Question

I'm creating a jQuery mobile form that will display a calculated answer in a div below the form. Basically, a client-side submit button However, i'm not really having luck trying to fire the event. But it seems to be reloading the page or DOM, I don't really know and adds the values from the selected items before the submit button was hit. It seemed like the form is being posted, when this form wasn't supposed to post anything. This form is taking values from the JSON file and add them as options, radio buttons and checkboxes. The code below does not seem to fire at all when the submit button is clicked:

$("form").submit(function(event){
    alert("submit button clicked");
    event.preventDefault(); // stop default behaviour of submit
    event.stopPropagation(); //event handler moved to something else
    calculate(); //invokes the calculate method
}

I'm not really sure on what attributes my form would need since this would be a client-side submit button. I only had the id and wrapped all the jQuery mobile controls inside the form.

The full site that I'm trying to get the submit event to work properly is here: http://goo.gl/C9tW7

UPDATE: Looks like I was missing the pound sign on the declaration of the event handler. It looks like this particular issue is resolved though. The submit button event handler is properly firing, but the calculations that needed to be displayed isn't executing the way it should.

Was it helpful?

Solution

from your code, you are missing ending parenthesis

$("form").submit(function(event){
    alert("submit button clicked");
    event.preventDefault(); // stop default behaviour of submit
    event.stopPropagation(); //event handler moved to something else
    calculate(); //invokes the calculate method
}); //<-- here

OTHER TIPS

make sure your button's markup looks as below

<button data-theme="b" id="submit" type="submit">Submit</button>

and hoep you set your form id correctly

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top