Search jQuery

jQuery Forum

Getting Started

sandraqu

jQueryMobile Submit button

in Getting Started • 1 years ago

Please help formatting the Submit Button. When I click the submit button, the "Loading" box appears and spins.

<form name="form1" method="post" action="results.php">
<div data-role="fieldcontain" id="my-search">
<label for="search">Search:</label>
<input type="search" id="search" name="keyword" value="" />
<input type="submit" value="Submit" />
</div>
</form>

Is a script call necessary?

I've placed the form code in a generic html page to test, and it works there. Again, it spins in a jquerymobile formatted page.

Replies(2)

sandraqu

Re: jQueryMobile Submit button

1 years ago

Here's the answer to my question. I was submitting to a PHP file. You need to use AJAX in order to do that. Here's the fix based on this StackOverflow post: jquery submit form and then show results in an existing div

<script>
$(document).ready(function() {
$('#foo-form form').submit(function() { // catch the form's submit event
$.ajax({ // create an AJAX call...
data: $('#foo-form form').serialize(), // get the form data
type: $('#foo-form form').attr('method'), // GET or POST
url: $('#foo-form form').attr('action'), // the file to call
success: function(response) { // on success..
$('#quick-form').html(response); // update the DIV
}
});
return false; // cancel original event to prevent form submitting
});
});
</script>

and here's the relevant form HTML

<li id="foo-form">
<form action="foo.php" method="post">
<div data-role="fieldcontain" id="foo-search">
<label for="search">Search:</label>
<input type="search" name="keyword" id="search" value="" />
<button data-theme="b" id="submit" type="submit">Submit</button>
</div>
</form>
</li>

Since I'm using jQuery Mobile, I would have liked to use a new page role for the results, but don't have time to figure out how to target that css id's content area. For now, the results print inside the id="foo-form" LI (and replace the FORM code). If anyone is up for figuring out the css ID scheme for a new page role content area and share it with me, I'd appreciate it.

blogoolian

Re: jQueryMobile Submit button

1 year ago

Alternatively, you can opt to use one of the jQueryMobile Dev tips here http://www.jquery4u.com/mobile/50-jquery-mobile-development/ which could also help with some of your concerns.

Top Reply

Response title

Attachments

jQuery Forum

jQueryMobile Submit button

Replies(2)

Re: jQueryMobile Submit button

Re: jQueryMobile Submit button

Statistics

Tags

Actions

Related Posts