Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 8 of 8
  1. #1
    New Coder
    Join Date
    Mar 2012
    Posts
    63
    Thanks
    7
    Thanked 0 Times in 0 Posts

    Form submission with Ajax

    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:

    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

  • #2
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,596
    Thanks
    78
    Thanked 4,387 Times in 4,352 Posts
    You *ARE* doing an AJAX submit. But then, because you used a SUBMIT BUTTON, the <form> GOES AHEAD AND SUBMITS ANYWAY.

    Answer is simple:
    Code:
    <input type="button" class="button" id="youtubesubmit" value="Search">
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • Users who have thanked Old Pedant for this post:

    cloudstryphe (10-13-2012)

  • #3
    New Coder
    Join Date
    Mar 2012
    Posts
    63
    Thanks
    7
    Thanked 0 Times in 0 Posts
    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?

  • #4
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,596
    Thanks
    78
    Thanked 4,387 Times in 4,352 Posts
    A little bit of a hack, but you can do this:
    Code:
    <form method="POST" id="youtubesearch" action="" onsubmit="return false;">
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • #5
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,596
    Thanks
    78
    Thanked 4,387 Times in 4,352 Posts
    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.
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • #6
    Senior Coder DanInMa's Avatar
    Join Date
    Nov 2010
    Location
    Salem,Ma
    Posts
    1,577
    Thanks
    13
    Thanked 248 Times in 248 Posts
    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)
    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>
    
    $("#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>

  • #7
    The fat guy next door VIPStephan's Avatar
    Join Date
    Jan 2006
    Location
    Halle (Saale), Germany
    Posts
    8,678
    Thanks
    6
    Thanked 1,009 Times in 982 Posts
    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.

  • #8
    New Coder
    Join Date
    Mar 2012
    Posts
    63
    Thanks
    7
    Thanked 0 Times in 0 Posts
    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.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •