So I've been trying to figure out the method of posting form data from a textarea using jQuery's ajax() function to a mysql database. Problem is, I don't really understand the theory of doing so.
Say there's a form:
<form method="post" action="action.php">
<textarea name="somecontent" rows="5" cols="30">Some content</textarea>
<input type="submit" name="submit" value="Post to db using ajax" />
</form>
The form points to action.php which processes data, yadayada. In a theoretical sense, how could I manipulate jQuery ajax to post the data rather than directly submitting the form data to action.php?
Edit:
I don't understand how to send the data with ajax.
You need to catch the form submit event in javascript, prevent the default action (submitting...) and call your ajax / jQuery submit instead.
$("form").submit(function(){
// do your stuff
$.post(
"action.php",
// add all stuff, see their page
);
return false; // prevent the original form action from happening
});
See jQuery's $.post or $.ajax for more information.
Related
I'd like to put a small form on my PHP page with a single input and a submit.
The single input will be for a text date (Apr 4, 2021).
Upon submit, I'd like to just display the timestamp for that input next to the form.
I'm hoping this can be accomplished without having to leave the page as usually I need the timestamp in another form I'm working with at the same time.
I've looked at jquery and ajax, but it's a bit outside my expertise. Can someone point me in the right direction?
What I'm hoping to do:
<form id="show_date" method="post">
Payment Date: <input type="text" name="pay_date">
<input type="submit" value="Calculate">
</form>
<div id="result"></div>
Consider the following jQuery Example.
$(function() {
$("#show_data").submit(function(e) {
e.preventDefault();
$.post("./calcPayDate.php", {
pay_date: $("input[name='pay_date']", this).val()
}, function(results) {
$("#result").html(results);
});
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form id="show_date" method="post">
Payment Date: <input type="text" name="pay_date">
<input type="submit" value="Calculate">
</form>
<div id="result"></div>
jQuery is a Framework for JavaScript. You need JavaScript to be able to perform something in the "background". That something is referred to AJAX. The idea that your browser can send a bit of data to the server and the server can respond without loading an entire web page.
In HTML the default behavior of the Form will send the data, via GET or POST, to another page (usually a server side script).
With JavaScript, or in this case jQuery, we can collect the Value from the form and send just that to your Script. You will then need to handle the data that is returned by the script.
e.preventDefault is an Event command that prevent s the default event of the Form.
$.post() is a shorthand form of the AJAX POST method in jQuery.
$("input[name='pay_date']", this).val() gets the value from a specific input.
function(results) is a anonymous callback function that takes the data sent back and assigns it to results variable.
$("#result").html(results); puts the data into your container.
That's a super crash course for it.
Is it possible to get data from another using a different form?
I don't want to use one form
<?php
echo $_POST['2'];
?>
<html>
<head>
</head>
<body>
<form method="post">
<input type="submit" name="submit" />
</form>
<form method="post">
<input type="text" name="2" />
</form>
</body>
</html>
No, that's not possible because browsers will only ever submit one form at a time (the one containing the clicked submit button, typically).
They can't possibly submit multiple forms at once because each form has its own action and method attribute which determines the request to send.
As #peter said, you can submit only one form at a time. But there are some workarounds for your needs.
Method 1
Post your form to a php script(say form_1_action.php) and then store the form input in a Session variable.
$_SESSION['form_data_1'] = $_POST;
Then you will be able to access it in different pages. Like,
$_SESSION['form_data_1']['field_name']
Method 2
Post your form to a php script(say form_1_action.php) and then store the form input in a PHP variable.
$formData1 = $_POST;
Then you can use the data from the first form in the second form (the second form should be on the same file form_1_action.php) like
<input name="name" value="{$formData1['field_name']"}>
You should pass the data from the first form in a hidden field on the second form if you need it on the form_2_action.php.
Method 3
Use Javascript to accomplish your requirements in a more userfriendly way.
try using jquery to Prevent the other form from submiting and try updating the value using event listening of the first form and update that input.
$( '#Submit' ).click( function ( event ) {
event.preventDefault();
var value = <?= $postedValue ?>;
$('input[name="input_name/2"]').val(value);
}
I have an input like this:
<input value="<?php echo $formdata['title'] ?>" type="text" name="title" id="Editbox2">
This is an edit page, I load database data into fields with echo, replace them, and hit submit to update them.
But when I hit submit it refreshes the old data onto browser's fields, how can I prevent this?
Submit your form using ajax request with jquery submit.
Use action="javascript:;" for the form tag
You need to handle the script with javascript, then prevent the default behaviour, which is refreshing the page. Here is an example:
*I haven't tested this, but from what I recall this is what I used to do. Let me know if it doesn't work, I'll give other suggestions.
<form>
<!-- elements inside -->
<input type="submit" id="submit-btn" value="Submit"/>
</form>
and in your javascript have the following:
<script>
$("#submit-btn").click(function(e){
e.preventDefault();
// handle form here with your JS
});
</script>
I have a form which opens in Colorbox and is submitted via Ajax/JQuery to itself. However, it seems as if the data passed is not including the value of the submit button itself. Whether I use multiple submits or just one, there is no data in $_POST['submitButton'], and it doesn't respond to isset() or empty().
The rest of the form posts just fine though. I can echo $_POST['name'] and $_POST['email'], just not $_POST['submitButton']
Here is (a stripped down version of) my form:
<form id="sub-process" action="<?php echo $_SERVER['PHP_SELF']; ?>" method="post">
<input name="name" type="text" value="">
<input name="email" type="text" value="">
<input name="submitButton" type="submit" value="Submit">
</form>
And here is the jquery that processes the form to be submitted via AJAX, rather than an HTTP request.
jQuery(function(){
jQuery('.cbox-form').colorbox({maxWidth: '75%', onComplete: function(){
cbox_submit();
}});
});
function cbox_submit()
{
jQuery("#sub-process").submit(function(){
jQuery.post(
jQuery(this).attr('action'),
jQuery(this).serialize(),
function(data){
jQuery().colorbox({html: data, onComplete: function(){
cbox_submit();
}});
}
);
return false;
});
}
I know this is an old question but It looks like people do not understand that #itachi has the correct answer.
The serialize method will NEVER return a value from the submit button. It does not return the submit button in the post.
You will do best to just use a hidden form field and adding a click event to the button.
Try using $_POST['submitButton']
jQuery's serialize() function is kind of quirky and particular. I find it to be not so useful for many scenarios. You may want to try the serializeObject plugin. I've found it to work in many cases when serialize() does not work for me.
I am using an image instead of a submit button for search option and use onclick events to load the results using ajax in php.Now I need to load results by hit enter also.Is their any ways to update my application without changing the image.
Thanks
Sure, add <input type="submit" style="display:none;" /> to the end of your form, should trick the browsers into allowing the Enter key to submit your form.
As far as getting the same functionality as your AJAX onclick event: You should be tying your ajax function to the <form>'s submit event instead of the <input>'s click event.
jsfiddle demonstration (uses jQuery for ajax ease, but your event doesn't have to)
I don't know what javascript library you're using, but I'll use jQuery in my example.
<script>
$(document).ready(function() {
$("form#interesting").bind("submit",function() {
$.get("target_page.php".function() {
// Callback functionality goes here.
});
});
});
</script>
<form id="interesting">
Enter your input: <input type="text" name="interesting_input" />
<!-- input type="image" is a way of using an image as a submit button -->
<input type="image" src="submit_button_image.gif" />
</form>
Hmm, There are several things I can think about.
fitst one - someone mentioned that you can style submit button as an image. Good idea and it's easy. this tutorial was posted as an answer some time ago http://www.ampsoft.net/webdesign-l/image-button.html .
Another problem is, you bind your submit event to onclick, but the natural submit for form is onsubmit. So if you hit enter on form input the form receives onsubmit event. You have to bind your JS to it.
It works genrally as in answer from #phleet when you use jquery, when you don't use any library, you can do something like
<form onsubmit="YOUR_JS_HERE">.....</form>
like in onclick. I also recommend using jQuery, though.