PHP+AJAX+MYSQL Last form entry creates a new column in MySql

Question

I want to create a form where the user gets to add a new question that the next user will have to answer.

I want to use the function ALTER TABLE but I'm not sure how to call that in $_Post and how to dynamically $_Get more and more columns. Any advice? I stuck and would love to have someone point me into the right direction.

Also, I'm using bootstrap if that even makes a difference.

  <body>  
       <div class="container">  
            <br />  
            <br />  
            <h2 align="center">Dynamically Add or Remove input fields in PHP with JQuery</h2>  
            <div class="form-group">  
                 <form name="add_name" id="add_name">  
                      <div class="table-responsive">  
                           <table class="table table-bordered" id="dynamic_field">  
                                <tr>  
                                    <td> 
                                        <input type="text" name="question[]" placeholder="Ask a question" class="form-control" />
                                        </td>
                                         <td><input type="text" name="name[]" placeholder="Enter your Name" class="form-control name_list" /></td>   
                                        <td><button type="button" name="add" id="add" class="btn btn-success">Add More</button></td>

                                </tr> 
                           </table>  
                           <input type="button" name="submit" id="submit" class="btn btn-info" value="Submit" />  
                      </div>  
                 </form>  
            </div>  
       </div>  
  </body>

 <script>  
 $(document).ready(function(){  
      var i=1;  

  $('#submit').click(function(){            
       $.ajax({  
            url:"name.php",  
            method:"POST",  
            data:$('#add_name').serialize(),  
            success:function(data)  
            {  
                 alert(data);  
                 $('#add_name')[0].reset();  
            }  
       });  
  });  
 });  
 </script>

Don't use alter table for this. Go "vertical." Each question should be a *row* in the table, not a column. Then you can use `INSERT` which is much easier. — Ian McLaird, Apr 17 '16 at 05:14

score 1 · Accepted Answer · edited May 23 '17 at 12:16

1st: you need to use e.preventDefault(); to prevent the page reload.

2nd: good to use $('#add_name').on('submit') instead of $('#submit').click.

3rd: your code should looks like:

 <script>  
 $(document).ready(function(){  
      var i=1;  

  $('#add_name').on('submit' , function(e){   // <<<<<<<<<<<<<<<<<<< 2
       e.preventDefault();                    //<<<<<<<<<<<<<<<<<<<< 1     
       $.ajax({  
            url:"name.php",  
            method:"POST",  
            data:$(this).serialize(),  
            success:function(data)  
            {  
                 alert(data);  
                 $('#add_name')[0].reset();  
            }  
       });  
  });  
 });  
 </script>

in name.php

<?php 
  print_r($_POST);
  // reset of php code here
?>

you also can take a look at

Retrieving serialize data in a php file called using ajax

and

jQuery AJAX form data serialize using PHP

score 1 · Answer 2 · answered Apr 17 '16 at 03:44

Your js file order should be like

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>  
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script> 
<script src="scripts/main.js"></script>

PHP+AJAX+MYSQL Last form entry creates a new column in MySql

2 Answers2