I have a text box. I want to take user input from there and pass it to PHP without using submit button. I would prefer a normal button and onclick should pass data to PHP.
Here is something I heard:
onclick and then you can submit the form
from thereBut I want to be on the same page after submitting the form. That's why I didn't want to submit the form in the first place. But looks like there is no other way.
If anyone knows about the submit method, please, help.
Yes, it is called AJAX. : )
In jQuery, for brevity:
// or $('#textbox_autopost').blur if you want to do it when the box loses focus
$('#textbox_autopost').change(function(){
$.ajax({
type: "POST",
url: "some.php",
data: {text:$(this).val()}
});
});
if you want to do it via button click
<button id="inlinesubmit_button" type="button">submit</submit>
$('#inlinesubmit_button').click(function(){
$.ajax({
type: "POST",
url: "some.php",
data: {text:$('#textbox').val()}
});
});
You can also do it through an A HREF (or submit button, or or something else wacky:
<!-- backup if JS not available -->
<a href="handler.php" id="inline_submit_a">add comment</a>
$('#inline_submit_a').click(function(evt){
$.ajax({
type: "POST",
url: "some.php",
data: {text:$('#textbox').val()}
});
evt.preventDefault();
return false;
});
If you want to do it on enter:
$('#textbox_autopost_onenter').keydown(function(evt){
if ((evt.keyCode) && (evt.keyCode == 13))
{
$.ajax({
type: "POST",
url: "some.php",
data: {text:$(this).val()}
});
evt.preventDefault();
return false;
}
});
Final, site-ready code:
$(document).ready(function(){
function submitMe(selector)
{
$.ajax({
type: "POST",
url: "some.php",
data: {text:$(selector).val()}
});
}
$('#textbox_button').click(function(){
submitMe('#textbox');
});
$('#textbox').keydown(function(evt){
if ((evt.keyCode) &&(evt.keyCode == 13))
{
submitMe('#textbox');
evt.preventDefault();
return false;
}
});
You'll need to use Javascript to make an AJAX POST request back to the PHP on the server.
There's a good tutorial here that uses jQuery to validate the form, send it to the server then display a message to the user based on the server's response.
Several ways to do that...
It sounds like you're after a non-redirecting solution, so I'd recommend jQuery (it's my fave, but there are plenty other solutions to implementing AJAX) and doing something like the following:
Assume you have a text box and button like this:
<input id="txt_input" type="text" />
<input id="btn_send" type="button" value="Submit" />
Then do something like this
$(document).ready(function () {
$("#btn_send").click(function () {
// Do stuff BEFORE sending... //
callAFunction();
var test = "asdfasdf";
// Send the text to PHP //
$.post("test.php", { input: $("#txt_input").val()},
function(data) {
alert("test.php returned: " + data);
}
);
// Do more stuff after sending.... //
callAnotherFunction();
});
});
I believe that'll get what your after. For more on jQuery and further options with $.post, check here: http://api.jquery.com/jQuery.post/
Hope that helps!
I´m not sure what you mean by "normal button", but if you don´t want to use an <input type="submit"> you can use a <button type="submit">.
A button gives you more freedom in layout, but older versions of IE get confused if you use multiple button elements in one page.
