Form submission with Ajax

[cloudstryphe]

Hello all!

I'm having some issues submitting a form with ajax.

I built a site with youtube search functionality. I have the index page and a results page.

The results page takes a variable in the url to perform the search (results.php/?q=myyoutubesearch).

The index page has the search bar and I would like to be able to perform the search without having to reload the page and have the results display inside a div already on the page. No matter what I do though, when I click "search" the page redirects and doesn't perform the ajax request. Here is my code:

<form name="youtubesearch" method="POST" id="youtubesearch" action="">
	<!--[if IE]>
		<input type="search" name="youtubesearchinput" id="youtubesearchinputie" placeholder="Search YouTube.." required/>
		<input type="submit" class="button" value="Search">
	<![endif]-->
	
	<!--[if !IE]><!-->
	<input type="search" name="youtubesearchinput" id="youtubesearchinput" placeholder="Search YouTube.." required/>
	<input type="submit" class="button" id="youtubesubmit" value="Search">
	 <!--<![endif]-->
</form>


<script>
$("#youtubesubmit").click(function() {
var searchquery = $("#youtubesearchinput").val();

var dataString = '?q=' + searchquery;

	$.ajax({
		type: "POST",
		url:"/youtube/results.php",
		data: dataString,
		success:function(result) {
			$(".grid_13").html(result);
	}})
});
</script>

All help is appreciated

[Old Pedant]

You *ARE* doing an AJAX submit. But then, because you used a SUBMIT BUTTON, the <form> GOES AHEAD AND SUBMITS ANYWAY.

Answer is simple:

<input type="button" class="button" id="youtubesubmit" value="Search">

[cloudstryphe]

Thank you so much! I have one more question though...

Ok, I've changed the code which now works when I click the button, but when I press enter, it still redirects. Any ideas?

[Old Pedant]

A little bit of a hack, but you can do this:

<form method="POST" id="youtubesearch" action="" onsubmit="return false;">

[Old Pedant]

I'm curious why you think you need two different versions of that code: One for IE, one for non-IE??? jQuery-based AJAX code should work just fine in any major browsers. Yes, even IE.

[DanInMa]

you bind your ajax request directly to the submit event by using .submit(),l then regardless if they click a submit type button or press enter your ajax request will process. ( e.preventDefault() prevents the form from submitting itself in the normal fashion so the page doesnt reload)

<form name="youtubesearch" method="POST" id="youtubesearch" action="">
	<!--[if IE]>
		<input type="search" name="youtubesearchinput" id="youtubesearchinputie" placeholder="Search YouTube.." required/>
		<input type="submit" class="button" value="Search">
	<![endif]-->
	
	<!--[if !IE]><!-->
	<input type="search" name="youtubesearchinput" id="youtubesearchinput" placeholder="Search YouTube.." required/>
	<input type="submit" class="button" id="youtubesubmit" value="Search">
	 <!--<![endif]-->
</form>


<script>

$("#youtubesearch").submit(function(e) {
e.preventDefault();
var searchquery = $("#youtubesearchinput").val();

var dataString = '?q=' + searchquery;

	$.ajax({
		type: "POST",
		url:"/youtube/results.php",
		data: dataString,
		success:function(result) {
			$(".grid_13").html(result);
	}})
});
</script>

[VIPStephan]

I just wanted to chime in to say that simply changing the button type from “submit” to “button”, as OldPedant has suggested, is not the ideal solution because you basically remove the possibility to submit the form by pressing the button if JS isn’t available for whatever reason (and don’t come with “everyone has JS enabled nowadays”, this is such a simple issue that it doesn’t require you to jump through hoops to get it right). The better solution is the one DanInMa has suggested.

[cloudstryphe]

Oh wow, thank you guys very much. I wasn't familiar with the preventDefault function.

To answer Pendant, the reason I had the IE thing was pure styling issues IE was having with my page.