Question

When creating a form in jQuery mobile, it seems like the default form functionality is to specify the page load animation from the <form> tag rather than the submit button. I am trying to build a form with two submit buttons that are each supposed to perform a different animation (it sounds weird, but it makes sense in the context of the app. but that’s not the point of the question 🙂 )

Is there a way that I can get around the default specification in the <form> tag and specify the animation in the <input> tag for each submit button instead? So here’s what I’m going for:

//this is where I have to specify the animation now, but I only want one button
//to trigger a "pop" animation
<form action='blah.php' data-transition='pop'>
    //form elements and whatnot

    //I'd like this button to have one animation by specifying it here:
    <input type='submit' value='submit button 1' data-transition='slide'>

    //And this button to have a different animation by specifying it here:
    <input type='submit' value='submit button 2' data-transition='pop'>

Right now, the transitions specified in the <input> tags are ignored whether or not I specify a transition in the <form>

Does anyone know how I can get this to work?

Answer 1

May be i would be wrong, I think Submit button do not support transitions, but anchor tag does.. Try this by using anchor tag…

For Example,

<form action="blah.php" method="get">
<a id="direct1" data-transition="slide">submit button 2</a>
<a id="direct2" data-transition="pop">submit button 2</a>
</form>

If this code does run then try add data-ajax="false" on anchors….