how to insert multi tag input the same name to Mysql by Ajax

Question

I had multi tag input the same name.I had insert into Mysql success. But it's reload page. I want insert into mysql , then it's without reload page. I know use Ajax for this. But i don't know must how i do. Who can help me?Thanks

HTML :

<form id="students" action="insert.php" method="post">
 a :<input name="c1[]" type="text" />
 b :<input name="c2[]" type="text" />
 c :<input name="c3[]" type="text" />
</br>
 a :<input name="c1[]" type="text" />
 b :<input name="c2[]" type="text" />
 c :<input name="c3[]" type="text" />
</br>
 a :<input name="c1[]" type="text" />
 b :<input name="c2[]" type="text" />
 c :<input name="c3[]" type="text" />``
 <input type="submit" value="submit" id="submitbutton" class="insert" />
</form>
 <script>
       $('#students').submit(function() {
        $.post('insert.php', $('form#students').serialize())
       });
</script>

and "insert.php"

$a1=$_POST['c1'];
$b1=$_POST['c2'];
$c1=$_POST['c3'];
$index=0;
foreach($a1 as $s){
$sql = "INSERT INTO test(col_a,col_b,col_c) VALUES('$s','".$b1[$index]."','".$c1[$index]."')";
mysql_query($sql);
    $index++;
}

"How do I use AJAX" is a very broad question. There are many examples and tutorials available online. Did you start with anything at all? — David, Mar 23 '16 at 13:28
i don't know alots about JQuery and Ajax. Can you tutorials detail for me? — HTT, Mar 23 '16 at 14:29
http://stackoverflow.com/questions/1960240/jquery-ajax-submit-form/28386477#28386477 — Shaiful Islam, Mar 23 '16 at 18:31

score 0 · Answer 1 · answered Mar 23 '16 at 13:41

0

You can send this form via Jquery Post method. For example

$.post(
'insert.php',
$('#students').serialize(),
function(data){
 console.log(data);
 }
)

You simply have to trigger this function on any event like on hover,click, keyup or any thing.

answered Mar 23 '16 at 13:41

Waleed Ahmed

1,014
9
16

i don't know alots about JQuery and Ajax. Can you tutorials detail for me? – HTT Mar 23 '16 at 14:29

score 0 · Answer 2 · answered Mar 23 '16 at 13:42

0

With JQuery it's simple:

$('#students').submit(function() {
    var self = $(this);
    $.post(self.attr('action'), self.serializeArray(), function() {
      // do something after ajax complete
    });
    return false; // prevent submiting the form
});

answered Mar 23 '16 at 13:42

jcubic

51,975
42
183
323

i don't know alots about JQuery and Ajax. Can you tutorials detail for me? – HTT Mar 23 '16 at 14:29
@HTT just google ["ajax tutorial"](https://www.google.pl/search?sclient=psy-ab&site=&source=hp&btnG=Search&q=ajax+tutorial&oq=&gs_l=&pbx=1) – jcubic Mar 24 '16 at 16:17

how to insert multi tag input the same name to Mysql by Ajax

2 Answers2