Javascript form button not submitting

Question

I have the following code in my main page

<html>
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>
<script type="text/javascript">
function loadQueryResults() {
    $('#DisplayDiv').load('toaction.php');
    return false;
}
</script>
<body>
    <div id="page">
        <form id="QueryForm" method="post">
            <div id="SubmitDiv" style="background-color:black;">
            <input type = "text" name="song"></input>

            <button type="submit" form="QueryForm" onclick="return loadQueryResults();">Submit Query</button>

            </div>
        </form>
        <div id="DisplayDiv" style="background-color:red;">
        </div>
    </div>
</body>
</html>

And the following in my toaction.php

<html>
<meta charset="utf-8">
<body>
    <div id="page" style="background-color:yellow;">
        <?php
            if( isset($_POST['song']) )
            {
            $song = $_POST['song'];
            echo $song;
            }
            else
            {
            echo "form didn't submit";
            }
        ?>
    </div>
</body>
</html>

The idea is to dynamically refresh the div without reloading the page. Which works, but the variable "song" is not passed through - so the div updates with "form didn't submit".

Thanks in advance,

How should it magically know which form to submit without you pointing it out? — Niels Keurentjes
– Niels Keurentjes, Commented Sep 7, 2014 at 0:59
lol,I know its a stupid mistake but I am pretty new to both languages so can u please expand — user2981725
– user2981725, Commented Sep 7, 2014 at 1:01

Barmar · Accepted Answer · 2014-09-07 01:01:19Z

1

You didn't send any parameters in your $.load() call. Also, $.load() sends a GET request, not POST. Try this:

function loadQueryResults() {
    $.post('toaction.php', $("#QueryForm").serialize(), function(response) {
        $('#DisplayDiv').html(response);
    });
    return false;
}

.serialize() will construct a parameter list from all the fields in the given form, similar to normal form submission (one difference is that the submit button won't be included in the parameters).

answered Sep 7, 2014 at 1:01

Barmar

789k57 gold badges555 silver badges669 bronze badges

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

2 Comments

user2981725 Over a year ago

developing this further...if I have two submit buttons such as <button name="song" type="submit" value="1" form="QueryForm" onclick="return loadQueryResults();">Play Song</button> and <button name="song" type="submit" value="2" form="QueryForm" onclick="return loadQueryResults();">Play Song</button> toaction.php doesn't pickup the value from a submit button .. what am I doing wrong?

Barmar Over a year ago

Read the last line of my answer, that explains it; submit buttons are only sent when the browser submits the form as a result of you clicking on it, AJAX doesn't know anything about it. If you need to include the submit button, you will have to add it to the parameters in your script. Or you could use a hidden input, and have the button click handlers fill this in.

Collectives™ on Stack Overflow

Javascript form button not submitting

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related