I've been having this issue for a while now and I guess I'm stuck. I've been reading on how to use AJAX to send data to a PHP file.
The thing is, I don't really get how to take the value of a radio button in a HTML page and then send that value through AJAX to a PHP file which will then process that value.
So for example:
If I had 2 radio buttons
<input type="radio" name="radio" value="yes">
<input type="radio" name="radio" value="no">
And I would like to take the value of those radio buttons and send it to my PHP file using AJAX.
Next I would be able to process those values in PHP.
How would I make it so that AJAX sends the value of the selected radio button to PHP?
Thanks, in advance!
EDIT:
Full code:
HTML File
<script type="text/javascript">
function updatePremium() {
var input1= $("#premium-yes").val();
var input2= $("#premium-no").val();
$.post( "upd_premium.php", { input1: input1, input2: input2 } );
}
</script>
<div class="usersRow2">
<form action="" method="POST"><label>Premium:</label> <p class="text-info-premium"><?php echo ucwords($premium_check) ?><i class="icon-star"></i></p> <div class="controls-premium"><i class="fa fa-pencil"></i> Edit</div></form>
</div>
<script>
$('#edit-premium').click(function() {
var text = $('.text-info-premium').text();
var input = $('<input type="radio" name="premium" id="premium-yes" value="yes">Yes <input type="radio" name="premium" id="premium-no" value="no">No <div id="premium"></div>')
$('.text-info-premium').text('').append(input);
$('#edit-premium').remove();
$('Update').insertAfter('#premium');
$('<i class="fa fa-times" title="Cancel Edit"></i> <br /><br /><br />').insertAfter('#update-premium');
$('.fa-times').click(function() {
location.reload();
});
});
</script>
PHP File
if($_POST['input1'] == 'yes') {
print_r($_POST);
}
Use jQuery. From the docs, a post is easy:
$.post( "test.php", { name: "John", time: "2pm" } );
Now, you need to get the values of the inputs and pass them to the post:
<input type="radio" name="radio" value="yes" id="input1">
<input type="radio" name="radio" value="no" id="input2">
<script>
var input1= $( "#input1" ).val();
var input2= $( "#input2" ).val();
$.post( "yourphpfile.php", { input1: input1, input2: input2 } );
</script>
Related
I can't submit the form after disable the submit button.
I make a jquery code to prevent multiple submit it's work but the form doesn't send the POST request.
jQuery:
$(document).ready(function() {
var enblereg = function(e) {
$(e).removeAttr("disabled");
}
$("#goRegister").click(function() {
$(this.form).submit();
var reg = this;
$('#reg').submit();
$(this).attr("disabled", true);
setTimeout(function() { enblereg(reg) }, 2000);
});
});
php:
<?php if (isset($_POST['goRegister'])) { echo "send";} ?>
<form action="?" method="POST" id="reg">
<h6>Full Name: <?php echo $fnamerr; ?></h6>
<input type="text" name="fname" value="<?php echo $fullname;?>">
<h6>Email: <?php echo $emailerr; ?></h6>
<input type="text" name="email" value="<?php echo $email;?>">
<h6>Re-enter Email: <?php echo $aemailerr; ?></h6>
<input type="text" name="aemail" value="<?php echo $aemail;?>">
<h6>password: <?php echo $passworderr; ?></h6>
<input type="password" name="password">
<h6>Re-enter password: <?php echo $apassworderr; ?></h6>
<input type="password" name="apassword">
<h6>Birthday: <?php echo $bdayerr;?></h6>
<?php include ("/incs/birthdayinc.php");?>
<h6>Gender: <?php echo $gendererr; ?></h6>
<input type="radio" name="gender" value="female"><font size="1"><b>Female</b></font>
<input type="radio" name="gender" value="male"><font size="1"><b>Male</b></font><br>
<input type="submit" name="goRegister" id="goRegister" value="Register">
</form>
without the jQuery the post work, I tried to solve it with "ONCLICK":
this.form.submit() - doesn't work
what should I need to add in jQuery to submit the form before disable the submit button ?
I think the jQuery code for the process would be like this
$(this.form).submit();
This would submit the form for you. If it doesn't actually trigger the event. Then you can capture the form and submit it directly using the id of it.
id="reg"
So, it would be
$('#reg').submit();
Do this... The form has id of #reg. So simply use $('#reg').submit();
$("#goRegister").click(function() {
var reg = this;
$('#reg').submit();
$(this).attr("disabled", true);
setTimeout(function() { enblereg(reg) }, 2000);
});
EDIT
Updated for ajax submit
$("#goRegister").click(function() {
var reg = $(this);
var form = $('#reg').serialize();
var url = "Whereveryouareposting.php";
//Submit ajax form
$.post(url,form,function(data){
//This is where you could send back error messages or success from the server
// To dictate wether to hide the button, or display errors.
// Ie On success....do this...
$(this).attr("disabled", true);
setTimeout(function() { enblereg(reg) }, 2000);
// On error, send a message packet with the errors, and loop through it to attach error
//messages to fields
});
});
<form method="POST">
<div id="showme">Show me <?php echo $_POST['name']?></div>
Send the value<input type="radio" name="name" value="ja"/>
<input type="submit" id="submit" name="submit" value="BEREKENEN! ">
</form>
<script>
$(document).ready(function () {
$('#showme').hide();
$('#submit').click(function(e) {
e.preventDefault();
$('#showme').fadeIn(5000);
});
});
</script>
This code won't send the value of the radiobutton to the showme div.
I can't receive the $_POST['name'] when I use hide() and fadeIn() between the <script> tags.
Whenever I don't use jQuery it sends the data - when using it , it won't let me send the value.
How do I fix this problem, this is just an example of 1 radio button. I have a list of 6 radiobuttons that need to be sent to PHP section in the same file, I don't want to make another file for this.
This code will FadeIn the requested div, it shows me Show me but it won't show the value where I ask for with the line <?php echo $_POST['name']?>
PHP is parsed on the server. <?php echo $_POST['name']?> has already been evaluated and echod to the page long before any of the submission stuff happens. What you need is to use AJAX.
You can replace the submit button with just a regular button, remove the <form> element entirely even.
jQuery:
$('#submit').on('click', function(evt) {
var e = evt || window.event;
e.preventDefault();
$.post('page.php', { name: $('input[name="name"]').val() }, function ( data ) {
$('#showme').append(data).fadeIn(5000);
});
return false;
});
(if you do what I did below turning submit into button, you dont need the e.preventDefault())
PHP:
if(isset($_POST['name'])) {
echo $_POST['name'];
return;
}
HTML:
<div id="showme">Show me </div>
<label for="name">Send the value</label><input type="radio" name="name" value="ja"/>
<input type="button" id="submit" name="submit" value="BEREKENEN!">
I'm not so sure you can get a non-BOOLEAN value from a radio button with PHP though. You're probably better off using <input type="hidden" value="ja" /> or maybe type="text".
<div id = "result"> Fade me in and hide div hideme</div>
<div id="hideme">
<form method="POST">
Yes<input type="radio" name="name" value="yes"/>
No<input type="radio" name="name" value="no" checked=true />
<input type="submit" id="submit" name="submit" value="HIDE NOW!" />
</form>
</div>
<script>
$(document).ready(function () {
$('#result').hide();
$('#submit').click(function(e) {
e.preventDefault();
$('#hideme').hide();
$('#result').fadeIn(5000);
});
});
</script>
This will hide my div where the submit is, whenever click on submit it wont send values to PHP.
How to fix that to make it send the values to PHP so i will get the values from html?
You have this e.preventDefault(); in your jquery click handler function. It means that when you press the submit button, the form wouldn't be submitted. It's simply preventing original action of that selector on click.
Here's how to fix it. Use ajax. There's many jquery functions for that, i will show you how to use $.ajax method.
$('#submit').click(function(e) {
e.preventDefault();
$.ajax({
type: "POST",
url: "yourphpscriphere.php",
data: "name=" + $('input[name="name"]').val(),
success: function() {
alert('thank you for using my form');
},
error: function() {
alert('an error happened during the request');
}
});
$('#hideme').hide();
$('#result').fadeIn(5000);
});
Remember to change url to your own. Then you can get your radio button value using $_POST['name'] in php.
try this code :
html:
<div id="result"> Fade me in and hide div hideme</div>
<div id="hideme">
<form method="POST" id="eform">
Yes<input type="radio" name="name" value="yes"/>
No<input type="radio" name="name" value="no" checked=true />
<input type="submit" id="submit" name="submit" value="HIDE NOW!" />
</form>
</div>
jQuery :
$(document).ready(function () {
$('#result').hide();
$('#submit').click(function(e) {
$.post("page.php",$("#eform").serialize(),function(data){
$('#hideme').hide();
$('#result').html(data).fadeIn(5000);
})
});
});
In the php script when I echo the $_POST['AllItems '] then it shows only the last selected value
instead of a whole string of values or array.
Below is the javascript am using :
$(function () {
$('#senditems').click(function () {
var items = $('input[name^="item"]:checked').map(function () {
return this.value;
}).get();
*****************************
//here when i do alert(items); ,
then it shows comma separated values - 1,22,321
****************************
$.post("saveitems.php", {
AllItems: items
});
});
});
Form is :
<form>
<input type="checkbox" name="items[1]" value="1" />
<input type="checkbox" name="items[22]" value="22" />
<input type="checkbox" name="items[321]" value="321" />
</form>
This is how your form should look.
<form id="my_form">
<input type="checkbox" name="items[]" value="1" />
<input type="checkbox" name="items[]" value="22" />
<input type="checkbox" name="items[]" value="321" />
</form>
Then in your php, you can iterate through all the $_POST['items']
If you want to use jQuery to post, you can use this, but is not necessary as you can add a method and action to the html in your form:
$('#senditems').on('click', function(){
var form_data = $('#my_form').serialize();
$.post({
url: "your_php.php",
data: form_data
});
});
Hey Friends
i am having one forms and two button, and some text fields,what i need it if i click button 1 then the details in the text box should be POST to Page1.php if i click Button2 the details in the text box should be POST to Page2.php, i am having 8 text boxes to do the in form, how can i do that?
Let's suppose your button one id is btn1 and second has btn2 and form name is frm, you can do something like this:
var btn1 = document.getElementById('btn1');
var btn2 = document.getElementById('btn2');
btn1.onclick = function(){
document.forms['frm'].action = 'page1.php'
document.forms['frm'].submit(); // submit the form
};
btn2.onclick = function(){
document.forms['frm'].action = 'page2.php'
document.forms['frm'].submit(); // submit the form
};
A PHP solution would be:
<form action='' method='post'>
<input name='inputText' /><br />
<button value='1' name='whichOption'></button><br />
<button value='2' name='whichOption'></button><br />
</form>
At the top of the page this form is in, put this:
<?php
if(isset($_POST['whichOption']) {
switch($_POST['whichOption']) {
case 1: /* do something */ break;
case 2: /* do something else */ break;
}
}
?>
"something" is an include, a session variable set, or whatever you like.
Try this:
<input type="button" value="page1" onclick="this.form.action='Page1.php'; this.form.submit();" />
<input type="button" value="page2" onclick="this.form.action='Page2.php'; this.form.submit();" />
Why not just use the same page? When I need multiple submit alternatives I simply use submit buttons with different names:
<input type="submit" name="submit-save" value="Save" />
<input type="submit" name="submit-delete" value="Delete" />
When I need to know what action it is, I just check which data is sent:
if(isset($_POST['submit-save']))
{
//Do something
}
elseif(isset($_POST['submit-delete']))
{
//Do something else
}
Html:
<input id="Button1" value="Button1" type="button" /><br />
<input id="Button2" value="Button2" type="button" /><br />
<textarea id="TextBox1" cols="40" rows="5"><br />
<textarea id="TextBox2" cols="40" rows="5">
jQuery:
function PostToPage(DOOMid,uri) {
var vDOOMEl = $("#" + DOOMid);
$.ajax({
type: 'POST',
url: uri,
data: ({text : vDOOMEl.innerHTML}),
success: function() {},
dataType: "html"
});
}
function init() {
$('#Button1').click(function(e){
PostToPage('TextBox1','Page1.php');
});
$('#Button2').click(function(e){
PostToPage('TextBox2','Page2.php');
});
}
window.onload=init;
PHP:
<?php
//do something with $_POST['text'];
?>
You must download jQuery, and use it for this solution