CODEWITHSUNDEEP
jqueryformsjspjquery-mobilejqueryform
shriguru nayak
shriguru nayak

Reputation: 310

Why is the form not getting submitted?

<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?

Upvotes: 0

Views: 279

Answers (3)

John Ruddell
John Ruddell

Reputation: 25862

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!

Upvotes: 1

Naveen Chandra Tiwari
Naveen Chandra Tiwari

Reputation: 5123

Write your script like:

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

Upvotes: 0

Felix
Felix

Reputation: 38112

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.

Upvotes: 0

Related Questions