Why is the form not getting submitted?

StackOverflow https://stackoverflow.com/questions/22291467

Question 

<link rel="stylesheet" href="//code.jquery.com/mobile/1.4.2/jquery.mobile1.4.2.min.css">
<script src="//code.jquery.com/jquery-1.10.2.min.js"></script>
<script src="//code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.min.js"></script>


<script>
    $( "#submit" ).click(function() {
       $( "#my_form" ).submit();
    });
</script>

<body>
<form id="my_form" action="my_place.jsp" method="POST" style="align:center">
    <div data-role="page" id="page1">
        <div data-role="header">
            <h1>Parameters:</h1>
        </div>
        <div data-role="rangeslider">
            <label for="range-1a">Support:</label> <input name="range-1a"
                id="range-1a" min="1" max="21" value="1" type="range"> <label
                for="range-1b">Support:</label> <input name="range-1b" id="range-1b"
                min="1" max="21" value="5" type="range">
        </div>
        <div data-role="rangeslider">
            <label for="range-2a">Confidence:</label> <input name="range-2a"
                id="range-2a" min="50" max="100" value="90" type="range"> <label
                for="range-2b">Confidence:</label> <input name="range-2b"
                id="range-2b" min="50" max="100" value="100" type="range">
        </div>
        <div data-role="fieldcontain">
            <label for="select-choice-1" class="select">Building:</label>
            <select name="select-choice-1" id="select-choice-1">
                <option value="Library">Library</option>
                <option value="Hospital">Hospital</option>
            </select>
        </div>
        <input type="submit" name="Submit" value="Submit" id="submit">
    </div>
</form>
</body>

I am using JQuery mobile slider and I want to submit form to my_place.jsp once user clicks on submit. What is the problem in my code?

Was it helpful?

Solution

two things

first: wrap your click and submit functions into a function in closure.

$(function() {
    //your submit and click functions in here
});

the reason why you need them in closure is because the listener for your click and submit is not getting instantiated before the page loads.. which is why it needs to be in a function like that....

second: another issue that you may be having.. (i know because i had an issue with this) is you may need to turn ajax off on your form.. jQuery mobile has some issues with ajax preventing a form from working unless its turned off. 

<form data-ajax="false" id="my_form" action="my_place.jsp" method="POST" style="align:center">

let us know if those don't work! good luck!

OTHER TIPS

Put your code inside DOM ready handler $(document).ready(function(){....}); or shorter form $(function() {....});

$(function () {
    $("#submit").click(function () {
        $("#my_form").submit();
    });
});

This step is required since you'vre put your jQuery code in the <head> section of your page. Above task used to make sure all of your DOM elements have been loaded properly before executing your jQuery code

Also you need to use $("#my_form").submit(); instead of $("#asso_form").submit(); since you've assigned id="my_form" to your form.

Write your script like:

<script>
    $(document).ready(function(){
        $( "#submit" ).click(function() {
            $( "#asso_form" ).submit();
        });
    });
</script>
Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top