I'll start this by saying I've delved through copious amounts of other posts to try and find the solution however I've not been able get my code to work.
What I'm trying to do is send a variable from a radio button selection through AJAX to PHP. I don't want to have to add a submit button, I want the PHP code to process once a radio button is toggled.
My simple code is as follows, similar on.change code I've successfully used for dropdown menus but I'm struggling to get the same functionality for radio buttons.
Appreciate any assistance available.
HTML RADIO BUTTONS
<form>
<div class="label"><b>Include Points?</b></div>
<input type="radio" name="Pts" value="On" /> On
<input type="radio" name="Pts" value="Off" checked="checked" /> Off
</form>
JQUERY AJAX
jQuery(document).ready( function($) {
jQuery('#Pts').on( 'click', function () {
Pts = $('input:radio[name=Pts]:checked').val();
jQuery.ajax({
type: "POST",
url: "/wp-admin/admin-ajax.php",
data: {
action: 'call_radio_practice',
Pts: Pts,
},
success:function(output){
jQuery('#practice').html( output );
}
});
}).click();
});
PHP
$Pts = $_POST['Pts'];
print_r($Pts);
You don't have this selector jQuery('#Pts') (id Pts).
Change to listen to change event on input:radio[name=Pts]
jQuery(document).ready( function($) {
jQuery('input:radio[name=Pts]').on('change', function () {
Pts = $('input:radio[name=Pts]:checked').val();
jQuery.ajax({
type: "POST",
url: "/wp-admin/admin-ajax.php",
data: {
action: 'call_radio_practice',
Pts: Pts,
},
success:function(output){
jQuery('#practice').html( output );
}
});
});
});
Related
On my page1.php I want to toggle the visibility of the page2.php.
I am using the following code:
<input type="radio" name="city" value="Barcelona" onclick="getPage2(this.value);"> Barcelona
<input type="radio" name="city" value="Manchester"> Manchester
I call the page2.php using this code:
function getPage2()
{
$.ajax({
type: "GET",
url: "page2.php",
success: function(result){
$("#show_results").html(result);
}
});
};
I want to show the page2.php only if the radio button is selected and show nothing (Hide it) if none of the radio buttons, or the 'Machester' radio button is selected.
UPDATE
I solved it. It was actually very easy.
<input type="radio" name="city" value="Barcelona" onclick="getPage2(this.value);"> Barcelona
<input type="radio" name="city" value="Manchester" onclick="getPage2(this.value);"> Manchester
I show and I hide the page2.php using this code:
function getPage2()
{
var var_name = $("input[name='city']:checked").val();
$.ajax({
type: "GET",
url: "page2.php",
success: function(result){
if(var_name == "Barcelona")
$("#show_results").html(result).show();
else
$("#show_results").html(result).hide();
}
});
};
Thank guys anyway.
You can use a JQuery selector for that :
$('input').click(function(){
$('input').show(); // Show all inputs
$(this).hide(); // Hide the clicked input
$.ajax({
type: "GET",
url: "page2.php",
success: function(result){
$("#show_results").html(result);
}
});
})
Of course, this works only for a page with those inputs only.
You should have classes or IDs to your radios to target them directly with the selector.
You will have something like this :
$('.radio-page').click(function(){ // ...
You could just load the hide-able content WITH the original page. That way you can avoid the ajax call.
<input class="radios" type="radio" name="city" value="Barcelona"> Barcelona
<input class="radios" type="radio" name="city" value="Manchester"> Manchester
<div id="content" style="display:none">Hide-able content</div>
And then just have the script make it appear when Barcelona is selected.
$("input[type='radio']").click(function()
{
if($(this).val() == "Barcelona") $("#content").show();
else $("#content").hide();
});
I have a product page with the following form:
<form id="ratingsForm" action='../resources/add_rating_to_product.php' method="POST">
<input type="hidden" name="productID" value="<?php echo $productID; ?>" />
<span class="rating">
<input type="radio" class="rating-input"
id="rating-input-1-5" name="rating" value="5">
<label for="rating-input-1-5" class="rating-star"></label>
...
<input type="radio" class="rating-input"
id="rating-input-1-1" name="rating" value="1">
<label for="rating-input-1-1" class="rating-star"></label>
</span>
</form>
This is just a simple star rating form which uses radio buttons.
I have a javascript file that will submit the form once a radio button is clicked
$(document).ready(function() {
$('input[name=rating]').change(function(){
$('form').submit();
});
});
I have another javascript file that will trigger when the form is submitted and use ajax to post it to the correct file.
$(document).ready( function() {
$("#ratingsForm").on("submit",function(e){
e.preventDefault();
$.ajax( {
type: "POST",
url: $(this).attr( 'action' ),
data: $(this).serialize(),
success: function( response ) {
alert('Thanks for rating');
}
});
})
});
Add_rating_to_product just takes the posted information and inserts it into the database.
The problem I'm having is that instead of preventing and redirection, e.preventDefault redirects me to my search page for apparently no reason. I have check all of my code in my product page and there's nothing that could redirect me there so what is the problem? Without the preventDefault(), it redirects to add_rating_to_product.php as expected.
Is there any chance you have another form on your page? If you do, the following code submits all the forms on the page:
$(document).ready(function() {
$('input[name=rating]').change(function(){
$('form').submit();
});
});
I think it would be safer to do the following:
$(document).ready(function() {
$('input[name=rating]').change(function(){
$(this).closest('form').submit();
});
});
After the success function call you can use
$(this).unbind('submit').submit()
, which will allow the execution to continue as if preventDefault was nt called
Try this:
$(document).ready(function() {
$('input[name=rating]').change(function(e){
e.preventDefault();
var prodID = $(this).find("input[name='productID']").val();
$.ajax( {
type: "POST",
url: $(form#ratingsForm).attr( 'action' ),
data: {$('form#ratingsForm').serialize(), prodID: prodID},
success: function( response ) {
alert('Thanks for rating');
}
});
});
});
Just do it in one function to initialize and send them in server side. I hope this works.
I have a page that lists a bunch of items with add to cart buttons, the user clicks the button it fires AJAX which adds the item to the php cart and adds the item to the sidebar for a visual cue of what's in the cart, with a remove button. Problem is, when i click the remove button it refreshes the page even though i have prevent default attached to the function
This works
$(document).ready(function(e) {
$('.additem').click(function(e) {
e.preventDefault();
$(this).html('Added').attr('disabled' , true);
$(this).closest('form.form_add').submit()
});
$('form.form_add').submit(function(e) {
e.preventDefault();
$.ajax({
type: "POST",
url: "buy-page-handler.php",
data: $(this).serialize(),
dataType: "json",
success: function(result) {
var id = result.id;
var name = result.name;
var qty = result.qty;
var price = result.price;
$('#sidebar').append('<div class="cart_cont">'
+'<div class="desc">'+name+' '+price+'</div>'
+'<div class="remove">'
+'<form method="post" class="form_delete">'
+'<button type="submit" class="removeitem">Remove</button>'
+'<input type="hidden" name="id" value="'+id+'">'
+'<input type="hidden" name="item-remove" value="true">'
+'</form>'
+'</div>'
+'</div>');
}
});
});
This doesn't work
$('.removeitem').click(function(e) {
e.preventDefault();
$(this).closest('.form_delete').submit()
});
$('.form_delete').submit(function(e) {
e.preventDefault();
$.ajax({
type: "POST",
url: "buy-page-handler.php",
data: $(this).serialize(),
success: function() {
alert("success")
}
});
});
This is my first attempt at using the jquery/ajax/php combination, so i'm sure its a bit rough.
Any help would be greatly appreciated.
The issue is that your class="removeitem" elements are added dynamically after the DOM is ready, so your new elements are not bound to $('.removeitem').click(). Try binding it by delegating to the parent -
$('#sidebar').on('click', '.removeitem', function(e) {
e.preventDefault();
$(this).closest('.form_delete').submit()
});
Just change:
<button type="submit" class="removeitem">Remove</button>
to:
<button type="button" class="removeitem">Remove</button>
I am working on a login form that gets loaded inside a div (parent of .messageboxcontent) with .load on a button press. It all works till the 3rd time I press submit where the div disappears again (I guess by reload of the page and the div CSS is hidden). The URL has the $_POST data added after the 3rd submit (?username=<whatever_I_Fill_In_As_3rd>).
<div class="messageboxcontent">
<form id="ajaxform">
<table>
<tr>
<td>Gebruikersnaam: </td><td><input type="text" name="username" /></td><td>
</tr>
</table>
<input type="submit" value="Registreer" id="submit" />
</form>
</div>
<script>
$('form').on('submit', function( event )
{
var dataString = $(this).serialize();
event.stopPropagation();
//event.preventDefault();
$.ajax(
{
type: "POST",
url: "register.php",
data: dataString,
success: function(response)
{
$('.messageboxcontent').html(response);//FIXED by changing .messageboxcontent to parent.
}
});
return false;
});
</script>
I tried different kind of approaches like:
$('form').submit(function(event) {
//..
}
//
$('#ajaxform').submit(function(event) {
//..
}
//
$(document).ready(function()
{
$("#ajaxform").on("submit", function( event )
{
var dataString = $(this).serialize();
//event.stopPropagation();
event.preventDefault();
$.ajax(
{
type: "POST",
url: "register.php",
data: dataString,
success: function(response)
{
$("div.messageboxcontent").html(response);
}
});
return false; //with and without this.
});
});
Be consistent with quotes. Also close your div (<div class="messageboxcontent"></div>)
Try this:
$(document).ready(function(){
$("#ajaxform").on("submit", function( event ){
var dataString = $(this).serialize();
event.preventDefault();
$.ajax({
type: "POST",
url: "register.php",
data: dataString,
success: function(response)
{
$("div.messageboxcontent").html(response);
}
});
return false;
});
});
Hope that helps.
return false; or event.preventDefault(); inside your ajax function would stop the page from reloading.
Secondly, jQuery works with selector methods via class or id - so, in your case, you will want to use $('#ajaxform').
Lastly, the possible reason why you are facing with unexpected result like after 3rd time is because your form is wrapped inside a div that you want to manipulate the result. So, try rewrapping your DIV element to this: <div class="messageboxcontent"></div> and have your <form> stand on its own separately from messageboxcontent div.
The page's link is: localhost/mysite/create-user
This is the code:
<form class="form-horizontal" name = "signUp1F" id = "signUp1F">
<input class="input-xlarge focused" name="pskil" id ="pskil" type="text" placeholder = "Doctor, Trainer, Human Resource etc.">
<input type="hidden" name="neoid" id="neoid" value="<?php echo $neoid; ?>" />
<span><button id = "plus" class="btn btn-success">Plus</button></span>
<div id="skillsAdded"></div>
</form>
The jquery code:
<script type="text/javascript">
$('#plus').click( function(event){
var pskil = $('#pskil').val();
var neoid = $('#neoid').val();
if( !pskil){
alert( "Please write a skill.");
return false;
}
$.ajax({
type: 'post',
url: "localhost/mysite/add-skill",
data: { pskil: pskil, neoid: neoid},
success: function( response){
$('#skillsAdded').append( pskil + "<br>");
return false;
}
});
});
</script>
The purpose is this: user enters a skill value to the input, clicks the Plus button, an ajax request is sent to add the skill to the database. And the code that handles this request is on localhost/mysite/add-skill.
But things go wrong. When I click the "plus" button, it goes to the page localhost/mysite/create-user?pskil=php&neoid=53. What can possibly make this direction? I've been working on this issue for almost 2 hours and I cannot manage to handle it.
The issue is that your button tag submit your form. Here is a updated JavaScript source that you can use. jQuery got a built in preventDefault() method for events. This will for an example prevent the button to submit the form.
<script type="text/javascript">
$('#plus').click( function(event){
event.preventDefault();
var pskil = $('#pskil').val();
var neoid = $('#neoid').val();
if( !pskil){
alert( "Please write a skill.");
return false;
}
$.ajax({
type: 'post',
url: "localhost/mysite/add-skill",
data: { pskil: pskil, neoid: neoid},
success: function( response){
$('#skillsAdded').append( pskil + "<br>");
return false;
}
});
});
</script>
Tryout: http://jsfiddle.net/3A7Mg/1/