CODEWITHSUNDEEP
javascriptphpjqueryhtmljson
Xiaous
Xiaous

Reputation: 47

Convert HTML to php array

I currently have a form with a table inside of it. I want to pass these values to a php script. What would be my best way to do so? Everything I've searched has not been applicable.

This is how I have my form formatted:

<form id="pageform" action="phpscript.php" method="post">
  <table>
    <tbody>
      <tr>
        <td><input type="text" class="nestedInput"name="txtName" value="John"></td><td><input type="text" class="nestedInput" name="txtLocation" value="North St"></td><td><input type="text" class="nestedInput" name="txtAge" value="42"></td>
      </tr>
      <tr>
        <td><input type="text" class="nestedInput"name="txtName" value="John"></td><td><input type="text" class="nestedInput" name="txtLocation" value="North St"></td><td><input type="text" class="nestedInput" name="txtAge" value="42"></td>
      </tr>
      <tr>
        <td><input type="text" class="nestedInput"name="txtName" value="John"></td><td><input type="text" class="nestedInput" name="txtLocation" value="North St"></td><td><input type="text" class="nestedInput" name="txtAge" value="42"></td>
      </tr>
    </tbody>
  </table>
  <input type="button" name="btnSubmit" id="btnSubmit" value="Submit">
</form>

The jQuery:

$("#btnSubmit").click(function(){

  var array = [];

  $(".nestedInput").each(function(n){
    array[n] = $(this).val();
  });

  document.forms["pageform"].submit();

});

My PHP:

<?php
  $array=json_decode($_POST['json']);
  print_r($array);    
?>

What I'd like to do is run a mysqli insert using the values from each input in each tr. Any ideas on how I could do that?

Upvotes: 1

Views: 1865

Answers (3)

Batikan
Batikan

Reputation: 69

With jQuery ajax method;

function send_form(this) {
   jQuery.ajax({
      type: 'POST',
      url: $(this).attr('action'),
      data: $(this).serialize(),
      error:function(){ console.log('error'); },
      success: function(data) { $console.log(data);}
   });
   return false;
}

Your form;

<form id="pageform" onsubmit="return send_form(this);" action="phpscript.php">
   <table>
      <tbody>
        <tr>
          <td><input type="text" class="nestedInput"name="txtName" value="John"></td>
        </tr>
        <tr>
          <td><input type="text" class="nestedInput" name="txtLocation" value="North St"></td>
       </tr>
       <tr>
         <td><input type="text" class="nestedInput" name="txtAge" value="42"></td>
      </tr>
   </tbody>
</table>

in phpscript.php;

$name = $_POST['txtName'];
$txtLocation= $_POST['txtLocation'];
$txtAge= $_POST['txtAge'];

Upvotes: 1

Lal
Lal

Reputation: 14810

No need for jQuery and all that for this..Just use the default functionality of the HTML <form> tag

For this, first of all, change 

<input type="button" name="btnSubmit" id="#btnSubmit" value="Submit">

to

<input type="submit" name="btnSubmit" id="#btnSubmit" value="Submit">

Then add a method for your form tag like,

<form id="pageform" action="phpscript.php" method="post">

Now, in your phpscript.php page add var_dump($_POST) in the beginning itself inside the the php tag..

The var_dump() will print an array with all the form data that is passed, after the submit button is clicked.

To retrieve the values in your php page, you can just do it like

echo $_POST['txtName'];

where txtName is the name of your input.

Similarly for the other inputs..

Upvotes: 0

Hayden Schiff
Hayden Schiff

Reputation: 3330

In phpscript.php, you can access these variables like this:

$name = $_GET['txtName']
$location = $_GET['txtLocation']
$age = $_GET['txtAge']

Variables submitted via a form will be stored in the global array $_GET or $_POST (depending on whether your form uses GET or POST. Your form doesn't have a method attribute defining this, so it defaults to GET. More on this here.).

Also of note, your submit button's id property should be id="btnSubmit", not id="#btnSubmit".

Upvotes: 3

Related Questions