JavaScript array to form

JavaScript
1

Hi guys, I have a JavaScript array which I need to send via mail. I have a page where I have a contact form, but when the user clicks SEND, I want that javascript array to be attached to the mail in plain text aswell. I heard using forms would be good, but not sure how, can I use a pre-defined form, and then fill it’s input with data via Javascript function?

2

You might stringify that array and submit it with a hidden input field… like

var myArray = ['some', 'values', 'to', 'be', 'sent']
var myForm = document.getElementById('my-form')
var hiddenInput = document.createElement('input')

hiddenInput.type = 'hidden'
hiddenInput.name = 'myarray'
hiddenInput.value = JSON.stringify(myArray)

myForm.appendChild(hiddenInput)

Or, if the array holds only primitive values it may be more convenient for backend processing to create a hidden input for each entry like so:

var myArray = ['some', 'values', 'to', 'be', 'sent']
var myForm = document.getElementById('my-form')

myArray.forEach(function (value) {
  var hiddenInput = document.createElement('input')

  hiddenInput.type = 'hidden'
  hiddenInput.name = 'myarray[]'
  hiddenInput.value = value

  myForm.appendChild(hiddenInput)
})

Then you have the array directly accessible with $_POST['myarray'] (for example).

3

I kinda found a way to edit the input value through getelementbyid.value =
but the thing is that I have array with data, and I wanted that data to look nice, for example NEW line for each value. Any ideas how I can do that?

4

Something like myArray.join('\n')? But if this is for sending it with an email, wouldn’t this kind of formatting better be done one the backend?

5

Any tips how to do that? Anyway it will be done, I don’t mind. I just want it done.
Btw, what about myArray.join(‘\n’), what does it do?

Edit: got the .join working, but I think if used in a “value” field, it will still show in one line, wouldn’t it?

6

Take a look at this page; it should clear up what you need to know about .join - https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/join

7

Send it from the webpage to the server using JSON, and when it is received by the server (such as with PHP), format it for email output.

Here in the JavaScript forum we can help you with sending the information to the server. Beyond that though you would be better served by the people in the PHP forum when it comes to formatting that received JSON code to email…

8

yupp, PHP’s JSON encoder does have options to format its output.

9

The php thing is all new to me, so I’m trying to find a workaround that is easy for me to do, I don’t mind the hard ward.
I have another idea! How about I make a hidden

in html, then try to attach that to the mail? paragraphs can be edited easily with javascript, new lines are easy there, I just need to know a way to attach it to the mail via php, just like I do with the fields.

10

The problem with that is that you can’t create mails with the browser’s javascript (it could be possible using advanced setup, but then you could use PHP as well)

11

I have a php contact form set up. I just want to capture a paragraph via it aswell. This is the code:

HTML:

<!DOCTYPE html>
<html>

<body>
<form name="contactform" method="post" action="send_form_email.php">
<table width="450px">
<tr>
 <td valign="top">
  <label for="first_name">First Name *</label>
 </td>
 <td valign="top">
  <input  type="text" name="first_name" maxlength="50" size="30">
 </td>
</tr>
<tr>
 <td valign="top">
  <label for="last_name">Last Name *</label>
 </td>
 <td valign="top">
  <input  type="text" name="last_name" maxlength="50" size="30">
 </td>
</tr>
<tr>
 <td valign="top">
  <label for="email">Email Address *</label>
 </td>
 <td valign="top">
  <input  type="text" name="email" maxlength="80" size="30">
 </td>
</tr>
<tr>
 <td valign="top">
  <label for="telephone">Telephone Number</label>
 </td>
 <td valign="top">
  <input  type="text" name="telephone" maxlength="30" size="30">
 </td>
</tr>
<tr>
 <td valign="top">
  <label for="comments">Comments *</label>
 </td>
 <td valign="top">
  <textarea  name="comments" maxlength="1000" cols="25" rows="6"></textarea>
 </td>
</tr>


<tr>
 <td colspan="2" style="text-align:center">
  <input type="submit" value="Submit">
 </td>
</tr>


</table>
</form>

</body>
</html>

AND here’s the PHP

<?php
if(isset($_POST['email'])) {
 
    // EDIT THE 2 LINES BELOW AS REQUIRED
    $email_to = "test@hotmail.com";
    $email_subject = "Your email subject line";
 
    function died($error) {
        // your error code can go here
        echo "We are very sorry, but there were error(s) found with the form you submitted. ";
        echo "These errors appear below.<br /><br />";
        echo $error."<br /><br />";
        echo "Please go back and fix these errors.<br /><br />";
        die();
    }
 
 
    // validation expected data exists
    if(!isset($_POST['first_name']) ||
        !isset($_POST['last_name']) ||
        !isset($_POST['email']) ||
        !isset($_POST['telephone']) ||
        !isset($_POST['comments'])) {
        died('We are sorry, but there appears to be a problem with the form you submitted.');       
    }
 
     
 
    $first_name = $_POST['first_name']; // required
    $last_name = $_POST['last_name']; // required
    $email_from = $_POST['email']; // required
    $telephone = $_POST['telephone']; // not required
    $comments = $_POST['comments']; // required
 
    $error_message = "";
    $email_exp = '/^[A-Za-z0-9._%-]+@[A-Za-z0-9.-]+\.[A-Za-z]{2,4}$/';
 
  if(!preg_match($email_exp,$email_from)) {
    $error_message .= 'The Email Address you entered does not appear to be valid.<br />';
  }
 
    $string_exp = "/^[A-Za-z .'-]+$/";
 
  if(!preg_match($string_exp,$first_name)) {
    $error_message .= 'The First Name you entered does not appear to be valid.<br />';
  }
 
  if(!preg_match($string_exp,$last_name)) {
    $error_message .= 'The Last Name you entered does not appear to be valid.<br />';
  }
 
  if(strlen($comments) < 2) {
    $error_message .= 'The Comments you entered do not appear to be valid.<br />';
  }
 
  if(strlen($error_message) > 0) {
    died($error_message);
  }
 
    $email_message = "Form details below.\n\n";
 
     
    function clean_string($string) {
      $bad = array("content-type","bcc:","to:","cc:","href");
      return str_replace($bad,"",$string);
    }
 
     
 
    $email_message .= "First Name: ".clean_string($first_name)."\n";
    $email_message .= "Last Name: ".clean_string($last_name)."\n";
    $email_message .= "Email: ".clean_string($email_from)."\n";
    $email_message .= "Telephone: ".clean_string($telephone)."\n";
    $email_message .= "Comments: ".clean_string($comments)."\n";
    
 
// create email headers
$headers = 'From: '.$email_from."\r\n".
'Reply-To: '.$email_from."\r\n" .
'X-Mailer: PHP/' . phpversion();
@mail($email_to, $email_subject, $email_message, $headers);  
?>
 
<!-- include your own success html here -->
 
Thank you for contacting us. We will be in touch with you very soon.
 
<?php
 
}
?>
12

A form only captures form elements (input, select, textarea, button) that have a name. anything else is ignored for submission.

Problems to fix:

  • don’t layout a form with tables, unless you have tabular data. what you have there can be done with less HTML and a couple of CSS rules.
  • your email validation dismisses a lot of valid emails. better use PHP’s email filter
  • name validation is too strict (e.g. O’Brian or Renée would fail, not speaking of the countless European languages using letters beyond ASCII), there is almost no character that can not occur in a name. the only thing to actually test here is that a name is not composed of only whitespace
  • never suppress errors!
  • don’t use mail() better use a mailing library (e.g. SwiftMailer) that have (XSS) validation built-in. Emails are an extremely complex matter, after all.
13

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.