Question

Ok, so I am fairly new to webdeveloping, so probably a silly question:

I have this search form which does autocomplete for fooditems (gets values from a database column) and that works. Now when I press the submit button I want to load a block of code that displays the food-items’ calories etc (also in the database on the same row as the food-item).

How can I accomplish such a thing. I kno this is a fairly broad question, but what i am really asking is, how can I make a small part of my website reload when pressing the submit button and using the input given in the text field as a parameter of some kind.

I don’t need whole answers, just any tips getting to the right path would be greatly appreciated!

here my code for the input and button:

in head

<script type="text/javascript" src="jquery.js"></script>
<script>
function ok(){
$.post("test.php", { name: "John", time: "2pm" }, function(data){ alert("Data Loaded: " + data); });
}
</script>

in body:

<form autocomplete="off">
  <p>
   Food <label>:</label>
   <input type="text" name="food" id="food"  / >
  </p>
  <input type="submit" id="submit" value="Submit" onclick="ok()" />

 </form>

or:

head:

<script type="text/javascript" src="http://code.jquery.com/jquery-1.4.4.js"></script>
<script>
$("input[type='submit']").bind("click", function (event) {
    event.preventDefault(); // Stop a form from submitting
    $.post("/path/to/call", { /* data? */ }, function (data) {
        // Process return data here
    });
});

</script>

body:

    <form autocomplete="off">
      <p>
       Food <label>:</label>
       <input type="text" name="food" id="food"  / >
      </p>
    <input type="submit" id="submit" value="Submit" />
</form>

Answer 1

jQuery and Ajax.

Change that input to a button

<button id="submit">Save</button>

For this I would do something like:

$("button#submit]").bind("click", function (event) {
    event.preventDefault(); // Stop a form from submitting
    $.post("/path/to/call", { /* data? */ }, function (data) {
        // Process return data here
    });
});

You need to first catch the click event .bind("click"). Then initiate an ajax call $.post which you will send data to. This data is received on the server via the POST array.