How to fix empty array from form-control w/o mySql (PHP, AJAX, JQuery, JS)

Question

I'm trying to create a PHP form to a nonprofit organization and would like to send an email via SMTP using PHPMailer. My problem is that the form contains a dynamic table, where I want to store/send data to a .php file via Ajax and JSON, but it doesn't fill the array with values (even if I type $(tr).find('td:eq(0)').val() . The Ajax data also contains two addition values. Also if I try to json_decode on the code below, the PHP breaks.

I tried getting the data by variable, and it works.
I tried to collect them in a single string which was converted to JSON, it didn't work.(The PHP doesn't send anything nor error feedbacks)
Right now I'm trying to create multiple arrays from rows. But like 2. it doesn't work

The HTML body:

<html>....
<input id="name" class="form-control" required>
<input type="email" id="email"class="form-control" required>
<table id="dynamic_field">
  <tr>
   <td>
    <textarea id="value1" class="form-control" required></textarea></td>
   <td>
    <textarea id="value2" class="form-control" required></textarea></td>
.....
</tr></table>
<input type="button" onclick="sendEmail()" value="Send &arr" class="btn btn-primary">

The Script:

function sendEmail() {
  var name = $("#name");
  var email = $("#email");
  var value1 = $("#value1");
  var value2 = $("#value2");
 ....  
  var TableData;
  TableData = JSON.stringify(storeTblValues());

  $.ajax({
          url: 'sendEmail.php',
          method: 'POST',
          dataType: 'json',
          data: {
                 name: name.val(),
                 email: email.val(),
                 value1: value1.val(),
                 value2: value2.val(),
                 TableData: TableData
   }, success:...

function storeTblValues(){
 var TableData = new Array();
 $("#dynamic_field tr").each(function (row, tr) {
   TableData[row] = {"value1": $(tr).find('td:eq(0)').text() , "value2": $(tr).find('td:eq(1)').text() , ......}
  ;});return TableData;
;}

I expect the output of the array TableData to be [{"value1":"Whatever in Value 1","value2":"Whatever in Value 2 ",....}] , but what I read from this string is [{"value1":"\\n ","value2":"\\n ",...}]

Answer 1

Use $('form').serializeArray()

Example:

 $('button').click(function () { var formData = $('form').serializeArray(); console.log(formData); });

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <form> <input type="text" name="your-name" placeholder="name"> <textarea name="your-text" placeholder="text"></textarea> <button type="button">Submit</button> </form>

Also you cant convert this array:

 var searchParams = new URLSearchParams("your-name=value1&your-text=value2"); var result = {}; // Display the key/value pairs for(var pair of searchParams.entries()) { result[pair[0]] = pair[1] } console.log(result);

How to fix empty array from form-control w/o mySql (PHP, AJAX, JQuery, JS)

Question

1 answers

solution1
0 2019-08-09 13:05:00

How to fix empty array from form-control w/o mySql (PHP, AJAX, JQuery, JS)

Question

1 answers

solution1 0 2019-08-09 13:05:00

solution1
0 2019-08-09 13:05:00