php Ajax and jquery form loading then submission not working

Question

I have 4 files testmain.php test1.php test2.php test3.php, in the testmain.php I have a div with class "content_load" where I am loading 3 files on click one by one, they are loading fine but test1.php is a form file when it's finish loading I am submitting it with ajax but it's getting redirect, I am trying since yesterday but not able to solve this, if I do not load files with ajax and just submit the test1.php that works fine, but when I combine the code of loading files using load() and submit with $.ajax() then code for loading files works fine but get redirect any solve this issue for me please so I can go ahead with my learning.

testmain.php

 <div id="menu_top">
                <a class="menu_top" href="test1.php">TEST 1</a> /
                <a class="menu_top" href="test2.php">TEST 2</a> /
                <a class="menu_top" href="test3.php">TEST 3</a> /
    </div>
        <div class="content_load"></div>

test1.php

 <form class="ajax" action="test1.php" method="post" enctype="multipart/form-data">
        <input type="text" name="txt1" /> <br>
        <input type="text" name="txt2" /> <br>
        <select name="sel">
        <?php
        include  '../mysql_connect.php';
        $db = new DBConfig();
        $conn = $db->getDbPDO();

       $sql = "SELECT * FROM tbl_campus ORDER BY camp_id ASC";
       //$sql = "SELECT camp_id FROM tbl_campus ORDER BY camp_id ASC";

       $query = $conn->query($sql);
       $result = $query->fetchAll(PDO::FETCH_ASSOC);
       $arrlength = count($result);

       for ($x = 0; $x < $arrlength; $x++){
       ?>        
       <option value="<?php echo $result[$x]['camp_id']; ?>"><?php echo $result[$x]['camp_name']; ?>
       <?php } ?>
        </select>
        <br><br>
        <input type="submit" value="Click" name="submit" />
    </form>

test2.php & test 3.php

  <h3>THIS IS TEST 2</h3>   <h3>THIS IS TEST 2</h3>

jquery file

$(document).ready(function() {            
$('.content_load').load($('.menu_top:first').attr('href'));
$('.menu_top').click(function(){
    var page = $(this).attr('href');
    $('.content_load').load(page); return false; });

    $('form.ajax').on('submit', function(e){
     e.preventDefault();
        var that = $(this);
url = that.attr('action'), type = that.attr('method'), data = {};
        that.find('[name]').each(function(index, value){            
        var that=$(this),
            name = that.attr('name'),
            value = that.val();
            data[name] = value;
    });
    $.ajax({
       url: url,
       type: type,
       data: data,
       success: function(response){
           console.log(response);
       }
    });
    clearAll();
    return false;
              });
});

function clearAll(){
    $("form :input").each(function(){
       $(this).val(""); 
    });
}

score 0 · Accepted Answer · edited May 23 '17 at 12:14

0

You cannot use direct event handler to the element that is not loaded yet.Just try to change this line:

$('form.ajax').on('submit', function(e){

to:

$('.content_load').on('submit','form.ajax', function(e){

otherwise javascript doesn't bind that event to the form and regular submit occurs.

Great explanation of the difference here: Direct vs. Delegated - jQuery .on()

edited May 23 '17 at 12:14

Community

1
1

answered Jun 10 '15 at 19:45

n-dru

9,285
2
29
42

thank you brother this really working, but a little issue is it's also printing whole html of that form in the console. Is it normal? – mohsin Jun 11 '15 at 12:58
you mean `console.log(response);`? just erase it, if you needed it just for debugging – n-dru Jun 11 '15 at 14:11
no i mean it was printing whole html like all html tags e.g
etc. plus the form values so i thought there might be a way to just print only form values? – mohsin Jun 11 '15 at 15:01
sure, you can return json with values and fill in the corresponding fields, if you want to save bandwidth, but that's something you can always do once you have so many users that it makes difference. – n-dru Jun 11 '15 at 16:46
I have posted a [quesiton](https://stackoverflow.com/q/63534630/8868582) related to it can you please check? – Faisal Qayyum Aug 24 '20 at 08:52

score 0 · Answer 2 · answered Jun 10 '15 at 19:48

0

May I misunderstood the problem, but if you submit the site would execute the form action. If you dont want this, you need to add "return false" on submit, or make a "button" and no "input" for submitting.

answered Jun 10 '15 at 19:48

Zed

1
1

i have tried many things since yesterday, if you please send me a live working example that would be great – mohsin Jun 10 '15 at 19:52

php Ajax and jquery form loading then submission not working

2 Answers2