StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

PO
text
Body
copied!<p>Since you provided no code, I'll have to guess, either:</p> <p>1) You have the AJAX code to load the php response into a division but the page still refreshes, in which case - when the form is submitted you need to prevent the default event triggering, do this with:</p> <pre><code>event.preventDefault(); </code></pre> <p>Stick that as the first thing inside the function that get's executed inside the onClick(). It should all work now. Incidentally, you probably want onSubmit() instead, in case someone hits 'Enter' instead of clicking the 'submit' button (although I'm not sure if it's part of the standard javascript/DOM). Check out a javascript library called JQuery, it makes javascript a breeze.</p> <p>2) You actually want AJAX, in which case go to jquery.com, download their javascript library and go through some tutorials on ajax requests. The basics are something like:</p> <pre><code>$("#id_of_your_form").submit(function(event){ event.preventDefault(); $.post( url_of_php_file, $("#id_of_your_form").serialize(), function(data){ $("#id_of_your_div").html(data); }); }); </code></pre> <p>This code is basic, but should work, provided you remember to include the library file in your .html file.</p> <p><strong>#UPDATED</strong></p> <p>Is there any particular reason you're using the JSON object? I just haven't used it before myself, so my input here might be limited. Try this:</p> <p>ajax.html</p> <pre><code><html> <head> <script type="text/javascript" src="js/jquery.js"></script> <script type="text/javascript"> // $(document).ready(function(){ $("#button").click(function(event){ //don't forget to pass the event as an argument //need this, or your page will follow the url defined in the form event.preventDefault(); var sendu = $("#username").val(); var sendp = $("#password").val(); $.ajax({ type: "POST", url: "ajax.php", data: "username="+sendu+"&password="+sendp, /*shouldn't the method be GET then?*/ dataType: "json", success: function(msg){ $("#result").html(msg.name+'<br />'+msg.password); } }); }); }); </script> </head> <body> <form action="miss.php" method="post"> Name:<input type="text" id="username" name="username" /><br /> Password:<input type="password" id="password" name="password" /><p> <input type="submit" id="button" /> </form> <p><div id="result"></div> </body> </html> </code></pre> <p>ajax.php</p> <pre><code><? $name = $_POST['username']; //use $_POST array instead $password = $_POST['password']; $list = array('name'=>$name, 'password'=>$password); $c = json_encode($list); echo $c; ?> </code></pre> <p>(Note: I haven't checked the php code as such, since as I said, I'm not too familiar with JSON objects) If you don't specifically need the json object, you could try using standard text/xml for simplicity. Also, consider using <em>$.post</em> instead of <em>$.ajax</em>, it should make things easier.</p> <p>Also, don't forget to use the <em>form</em> tags around your input or your html won't be valid(citation needed) and finally, if you're working with html in your javascript it might be a good idea to use single quotes instead of double quotes to indicate your strings. Hope that helped.</p> <p><strong>#UPDATE 2</strong></p> <p>Okay, since you don't need JSON for basic stuff(leave JSON for later), use text/xml instead. Also, have a look at the comments. This should all work, provided WAMP is running and both files are in the same folder. Here's the code:</p> <p>ajax.html</p> <pre><code><html> <head> <script type="text/javascript" src="js/jquery.js"></script> <script type="text/javascript"> // $(document).ready(function(){ $("#login_form").submit(function(event){ //don't forget to pass the event as an argument //need this, or your page will follow the url defined in the form event.preventDefault(); var sendu = $("#username").val(); var sendp = $("#password").val(); $.post("ajax.php", {'username' : sendu, 'password' : sendp}, function(data){ $("#result").html(data); //data is everything you 'echo' on php side }); }); }); </script> </head> <body> <form action="miss.php" method="post" id="login_form"> Name:<input type="text" id="username" name="username" /><br /> Password:<input type="password" id="password" name="password" /><p> <input type="submit" id="button" /> </form> <p><div id="result"></div> </body> </html> </code></pre> <p>ajax.php</p> <pre><code> <?php //you used shorthand <? as the php tag, it's probably why your code didn't work //I would discourage using the shorthand, it's silly $name = $_POST['username']; //use $_POST array instead $password = $_POST['password']; echo $name.'<br />'.$password; ?> </code></pre> <p>If this doesn't work...check if you have skype running, for some reason WAMP will not work with skype on at the same time, it's weird.</p>

Querying!

Guidance

An individual column

Larger individual text columns get their own page to allow for proper reading.

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