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
– Ian McLaird, Commented Apr 17, 2016 at 5:14

Community · Accepted Answer · 2017-05-23 12:16:00Z

1

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

edited May 23, 2017 at 12:16

CommunityBot

11 silver badge

answered Apr 17, 2016 at 2:43

Mohamed-Yousef

24k3 gold badges21 silver badges28 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Renjith Kathirolil · Accepted Answer · 2016-04-17 03:44:32Z

1

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>

answered Apr 17, 2016 at 3:44

Renjith Kathirolil

9111 bronze badges

Collectives™ on Stack Overflow

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

2 Answers 2

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related