Note that there are some explanatory texts on larger screens.

plurals
  1. POSimple PHP/AJAX question
    primarykey
    data
    text
    <p>Ok, so I am fairly new to webdeveloping, so probably a silly question:</p> <p>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). </p> <p>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.</p> <p>I don't need whole answers, just any tips getting to the right path would be greatly appreciated!</p> <p>here my code for the input and button:</p> <p>in head</p> <pre><code>&lt;script type="text/javascript" src="jquery.js"&gt;&lt;/script&gt; &lt;script&gt; function ok(){ $.post("test.php", { name: "John", time: "2pm" }, function(data){ alert("Data Loaded: " + data); }); } &lt;/script&gt; </code></pre> <p>in body:</p> <pre><code>&lt;form autocomplete="off"&gt; &lt;p&gt; Food &lt;label&gt;:&lt;/label&gt; &lt;input type="text" name="food" id="food" / &gt; &lt;/p&gt; &lt;input type="submit" id="submit" value="Submit" onclick="ok()" /&gt; &lt;/form&gt; </code></pre> <p>or:</p> <p>head: </p> <pre><code>&lt;script type="text/javascript" src="http://code.jquery.com/jquery-1.4.4.js"&gt;&lt;/script&gt; &lt;script&gt; $("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 }); }); &lt;/script&gt; </code></pre> <p>body:</p> <pre><code> &lt;form autocomplete="off"&gt; &lt;p&gt; Food &lt;label&gt;:&lt;/label&gt; &lt;input type="text" name="food" id="food" / &gt; &lt;/p&gt; &lt;input type="submit" id="submit" value="Submit" /&gt; &lt;/form&gt; </code></pre>
    singulars
    1. This table or related slice is empty.
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
 

Querying!

 
Guidance

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload