Question

Okey so I got a really wierd problem that I can’t understand. i got this piece of jquery code:

HTML CODE

<form>
  <input type="text" value="Search for a product" id="name" size="50">
  <input type="submit" id="submit" value="Search">
</form>

JAVASCRIPT CODE

$("#loader").hide();
$(document).ready(function() {      
  $('#submit').live('click', function(event){
  $("#loader").ajaxStart(function(){
    $(this).show();
  });
  $("#loader").ajaxStop(function(){
    $(this).hide();
  });
  $('.product').remove();
  var query = $("#name").val(); 
  var searchQuery = query.replace(/ /g,"+");     
  $.get("APIsearch.php", {keyword: searchQuery}, function(data){
    $("#content").html(data);
  });  
}); 
});

btw the #loader is just a loading gif that’s shown during the ajax call.

Its simple enough, when I click the button with id “submit” it sends a string from a text field with the id “name” and puts a + where there are spaces between the words and then sends the string to the page APIsearch.php where I get some stuff back that’s then loaded in to the “contetn” div. Now the problem is that when I add the “form” element around the “input” fields my ajaxt wont return anything and I need to have a form around since I want to start using .submit instead so I can use the enter button as a choise to submit the text. why does it only work when I remove the “form” elements like this?

<input type="text" value="Search for a product" id="name" size="50">
<input type="submit" id="submit" value="Search">

Answer 1

When you submit a form, the whole page gets submitted and on the server, you will need to responsed back in html format. You will not be able to just update the div as you have mentioned.

However, the form element that you have shown does not have “action” specified. This indicates that you want to get the information from the server using Ajax. For Ajax response, you can program the ‘enter’ key to work:

$("#name").keyup(function(event){
    if(event.keyCode == 13){
        $("#submit").click();
    }
});