jquery form submit does not work after using a load function

Question

I have an index.html page which, using jquery, calls somepage.php residing within the same site to load the contents of this index.html page.

So this is the intended page load sequence: index.html -> somepage.php -> submit.php (if submit button is clicked)

The index.html has only the "main-div" and no contents as such. When the somepage.php is called, the "main-div" contents are loaded by running the php script. The main-div contains a sub div with a small form with a submit button. Using jQuery,I see if the submit button is clicked, and when clicked, the submit.php script is called.

This is the barebone code:

<!DOCTYPE html>
<html>
<head>
        <script src="js/jquery.js"></script>
        <script>
            $('document').ready(function(){            

                $("#main-div").load("http://www.someurl.com/somepage.php");

                $('#item-submit').click(function(){
                    jsURL = $('#input').val();
                    submit(jsURL);

                });

                function submit(jsURL){
                    $.get(
                        'http://www.someurl.com/submit.php',    
                        {   item: jsURL   },
                        function(data){
                            if(data=="success")
                            {
                            $('#submit-status').html(data);
                            }
                            else
                            {
                            $('#submit-status').html(data);
                            }
                        }
                    );
                }


            });
        </script>

</head>
<body>

    <div id="main-div"> </div>

</body>
</html>

Now the issue: The index.html page loads with everything displayed correctly (the small form with the submit button, all other main-div contents, everything is displayed). However, the submit button does not call the submit.php script, meaning I believe that the jQuery code corresponding to the click event is not being registered.

I am fairly new to jQuery. Does this have something to do with how I have "ordered" the code in the jQuery .ready()? Something to do with the DOM not being ready before the function is called, or maybe an issue with the .load() in jQuery?

where is '#item-submit' on your html, Is it in the returned response? — Mohamed AbdElRazek, Mar 24 '13 at 12:08
http://stackoverflow.com/questions/1200266/submit-a-form-using-jquery can help you — Prateek Shukla, Mar 24 '13 at 12:08
@MohamedAli - yes, item-submit is in the returned response from the somepage.php script — kallakafar, Mar 24 '13 at 12:17

score 2 · Answer 1 · answered Mar 24 '13 at 12:09

2

$(document).ready(function(){            
    $("#main-div").load("http://www.someurl.com/somepage.php");

    $("#main-div").on('click', '#item-submit', function(e){
           e.preventDefault();
           var jsURL = $('#input').val();
           submit(jsURL);
    });

    function submit(jsURL){
      $.get('http://www.someurl.com/submit.php', {item: jsURL}, function(data){
           $('#submit-status').html(data);
      });
    }
});

Do not quote the document
load() is a shortcut for $.ajax, and it's async, so #item-submit does'nt exist when you attach the event handler, you need a delegated event handler for that.
If it's really a submit button inside a form, make you sure you prevent the default action so the form does'nt get submitted.

answered Mar 24 '13 at 12:09

adeneo

312,895
29
395
388

You may quote `document`, it doesn't matter. – Marcel Korpel Mar 24 '13 at 12:17
@MarcelKorpel - Sure, it does work even with the quotes, so Sizzle probably figures it out, but it does in fact matter as dropping the quotes will reference the document directly. – adeneo Mar 24 '13 at 12:19
Or use shorthand `$(function(){`. – Marcel Korpel Mar 24 '13 at 12:20
Thank You, @Marcel Korpel and adeneo – kallakafar Mar 24 '13 at 12:50

Marcel Korpel · Answer 2 · 2013-03-24T12:19:10.977

2

The load function works asynchronously. With your code #item-submit is not yet there when you try to bind the event handler.

Bind the event handler on succes:

$("#main-div").load("http://www.someurl.com/somepage.php", function () {
    $('#item-submit').click(function () {
        jsURL = $('#input').val();
        submit(jsURL);
    });
});

edited Mar 24 '13 at 12:19

answered Mar 24 '13 at 12:11

Marcel Korpel

21,536
6
60
80

Andrei · Answer 3 · 2013-03-24T12:25:20.633

load loads the data asynchronously, which means time by the time you are assigning a click handler on submit button the button itself might not be yet on the page. To overcome this you have two options:

Specify a success handler for load.

$("#main-div").load("http://www.someurl.com/somepage.php", function(){
    $('#item-submit').click(function(){
            jsURL = $('#input').val();
            submit(jsURL);
        });
});

Use on to indicate that the click handler should be assigned to elements that are or will be on the page.
```
$('#item-submit').on('click', function(){
    jsURL = $('#input').val();
    submit(jsURL);
});
```

Shuhel Ahmed · Answer 4 · 2013-03-24T12:33:38.607

2

As all pointed out, the load function works asynchronously so, your click handler is not working for the 'future' div.

You can bind handler to a future element like this:

$(document).on('click', '#item-submit', function(event){
          jsURL = $('#input').val();
          submit(jsURL);  
});

This way you can bind your handler in the jQuery document ready function.

edited Mar 24 '13 at 12:33

answered Mar 24 '13 at 12:24

Shuhel Ahmed

963
8
14

All the responses highlighted the same thing. Thank you too @Shuhel Ahmed. – kallakafar Mar 24 '13 at 12:51

score 2 · Accepted Answer · answered Mar 24 '13 at 12:28

Try this :

<script>
$(document).ready(function(){
        $("#main-div").load("http://www.someurl.com/somepage.php",function(){
        $("#main-div").on('click', '#item-submit', function(e){
           e.preventDefault();
           var jsURL = $('#input').attr('value');
           submit(jsURL);
        });
        });
});

function submit(jsURL){
                    $.ajax({
                    url:'http://www.someurl.com/submit.php',
                    type :'GET',
                    success: function(data){
                    $('#submit-status').html(data);
                    }
                    });

                }
</script>

jquery form submit does not work after using a load function

5 Answers5