Clearing input text field on enter or search button? - php

Question

I've got a form that lets my user search. I'm using jQuery to append the search results lower in the page without reloading the page. So, I've got this:
isbn.php:
<form method="post" action="ajax.php" name="searchISBN" id="searchForm">
<input type="text" name="isbn" placeholder="Search..." />
<input class="myaccount" id="doSearch" name="doSearch" type="submit" value="Search" />
</form>
The problem is, I need that input text search field to clear when the user hits the Search button or hits enter. Both hitting enter and the Search button execute the search, so it must clear when either action happens.
But, I'm absolutely stumped.
Any help will be greatly appreciated!!
Edit:
I've tried what Treffynnon suggested. The problem there is, I've disabled the search button from actually loading ajax.php. So, when I use that code, it stops the page from staying on isbn.php and it loads ajax.php . This is the code that loads the search results.
isbn.php:
<script>
// attach a submit handler to the form
$("#searchForm").submit(function(event) {
// stop form from submitting normally
event.preventDefault();
// get some values from elements on the page:
var $form = $( this ),
term = $form.find( 'input[name="isbn"]' ).val(),
//term = "isbn",
url = $form.attr( 'action' );
$.post( url, { doSearch: "Search", isbn: term } ,
function( data ) {
var content = $( data );
$( "#result" ).append( content );
}
);
});
</script>

Answer 1

$('#searchForm').submit(function(){
// do search loading code here and then
$('input[name="isbn"]').val('');
});
Try this based on your update:
// attach a submit handler to the form
$("#searchForm").submit(function(event) {
// stop form from submitting normally
event.preventDefault();
// get some values from elements on the page:
var $form = $( this ),
$term_input = $form.find('input[name="isbn"]'),
term = $term_input.val(),
//term = "isbn",
url = $form.attr( 'action' );
$.post( url, { doSearch: "Search", isbn: term } ,
function( data ) {
var content = $( data );
$( "#result" ).append( content );
}
);
$term_input.val('');
});

Answer 2

Add a hidden variable to achieve this as follows:
<form method="post" action="ajax.php" name="searchISBN" id="searchForm">
<input type="text" name="isbn_holder" placeholder="Search..." />
<input type="hidden" name="isbn"/>
<input class="myaccount" id="doSearch" name="doSearch" type="submit" value="Search" />
</form>
$('#searchForm').submit(function(){
$('input[name="isbn"]').val($('input[name="isbn_holder"]').val());
$('input[name="isbn_holder"]').val('');
});