I have a registration form that i'm creating. In my html file, I have two radio boxes,
<input type="radio" name="whatever" value="0" id="whatever" checked//> No
<input type="radio" name="whatever" value="1" id="whatever"> Yes
If the value is 1 it should send an email using ajax, here is what I have,
if($("input[name='whatever']").val()=='2'){
$.ajax({
type: 'POST',
url: base + 'email',
data: vData,
success: function() {
// alert( "I'm the callback")
}
});
}
Thanks in advance for the help.
Start by fixing your markup so that you don't have duplicate ids:
<input type="radio" name="whatever" value="0" checked="checked" /> No
<input type="radio" name="whatever" value="1" /> Yes
and then you could use the :checked selector to detect the value of the currently selected radio button:
if($(':radio[name="whatever"]:checked').val() == '1') {
// the Yes radio button was checked =>
// you could do your AJAX request here ...
}
or give your radio buttons unique ids:
<input id="no" type="radio" name="whatever" value="0" checked="checked" /> No
<input id="yes" type="radio" name="whatever" value="1" /> Yes
and then:
if($('#yes').is(':checked')) {
// the Yes radio button was checked =>
// you could do your AJAX request here ...
}
Related
I have many checkbox and other input like text,select ,textarea ,... in my form
I post all data of inputs but checkbox not post data
I saw this link
In Laravel 5.1 Can't post value of checkbox
But I do not want to use hidden button
Is there another way ?????
My form
<form id='test-form'>
<input name='text1'>
<input name='text2'>
<textarea name='text3'></textarea>
<input type="checkbox" name="test1" >
<input type="checkbox" name="test2" >
<input type="checkbox" name="test3" >
<input type="checkbox" name="test4" >
<input type="checkbox" name="test5" >
<input type="checkbox" name="test6" >
<input type="button" id='send'>
</form>
<script>
$(document).on("click", "#send", function () {
$.ajax({
type: 'post',
url: 'add',
data: $("#test-form").serialize(),
success: function (result) {
$('#ajax_div').html(result);
},
})
})
</script>
Your checkboxes will not send any data because they do not have the value attribute.
Change your html to:
<input type="checkbox" name="test[]" value="1" >
<input type="checkbox" name="test[]" value="2" >
<input type="checkbox" name="test[]" value="3" >
<input type="checkbox" name="test[]" value="4" >
<input type="checkbox" name="test[]" value="5" >
<input type="checkbox" name="test[]" value="6" >
<input type="button" id='send'>
Note that I also changed the names to test[], this will send an array of all the checkboxes that are checked.
For example: I check checkbox 1 and checkbox 3, the value that the server will receive is in $_REQUEST['test'] (either POST or GET), and will be an array with content [1,3].
If none of the checkboxes is marked, the $_REQUEST['test'] will be not set which you can check server side using isset().
I have a drop down that's numbered 1-30. So if I select '2', my radio buttons will appear like this:
<input type="radio" id="yes-sdf-1" name="field[1][sdfradio]" value="Yes" />
<input type="radio" id="no-sdf-1" name="field[1][sdfradio]" value="No" />
<input type="radio" id="yes-sdf-2" name="field[2][sdfradio]" value="Yes" />
<input type="radio" id="no-sdf-2" name="field[2][sdfradio]" value="No" />
How do I get the individual values of the radio buttons because I want to set conditions that will only affect those with the same name.
Here is an example to give you an idea.
Try this:
$('input:radio').click(function(){
alert($(this).attr('name'));
});
This will return the name of the radio button.
JSFiddle
I try to implement the follwing code:
<?php
$yesno1="";
$yesno2="";
$option1="";
$option2="";
$option3="";
if(isset($_POST['submit'])){
$yesno1=$_POST['yesno1'];
$yesno2=$_POST['yesno2'];
$option1=$_POST['option1'];
$option2=$_POST['option2'];
$option3=$_POST['option3'];
}
?>
<form method="POST" name="contact_form"
action="<?php echo htmlentities($_SERVER['PHP_SELF']); ?>">
<input type="radio" name="yesno1" value="yes" style="outline:0;"/>Yes
<input type="radio" name="yesno1" value="no" style="outline:0;"/>No
<input type="radio" name="yesno2" value="yes" style="outline:0;"/>Yes
<input type="radio" name="yesno2" value="no" style="outline:0;"/>No
<input type="checkbox" name="option1" value="Milk"> Milk<br>
<input type="checkbox" name="option2" value="Butter" checked> Butter<br>
<input type="checkbox" name="option3" value="Cheese"> Cheese<br>
<input type="submit" value="Submit" name='submit'>
</form>
Once I click submit button, normally the value I seleted in radio and marked in the checkbox are gone, so how can I keep the value even after the click the submit button or refrsh the page using php, javascript is fine as well, would be better if any one can help me with it on both php and javascript since I am not very good on both of them, thanks for kind help:)
An example below
<input type="checkbox" name="option1" value="Milk" <?php echo ($_POST['option1'] == 'Milk' ? 'checked' : '') ?>> Milk<br>
From MDN:
The input (<input>) element is used to create interactive controls for
web-based forms.
Attributes
type
[...]
radio: A radio button. You must use the value attribute to define the
value submitted by this item. Use the checked attribute to indicate
whether this item is selected by default. Radio buttons that have the
same value for the name attribute are in the same "radio button
group"; only one radio button in a group can be selected at one time.
This is a basic HTML question. Learn to walk before you run ;-)
I'm currently using ajax and jquery to update search results with a form that has different categories for filtering.
My problem is that I want to be able to pass different variables to the url I'm using for my ajax from checkboxes and other form elements from the current page.
I have the url of "http://example.com/search/results/?cat=tech&min=5&max=30" in my ajax call below and I need that url to update to something like "http://example.com/search/results/?cat=service&min=10&max=30" or even remove a param if it's not even selected like "http://example.com/search/results/?min=5"
<form>
<input type="radio" name="cat" value="" /> None<br />
<input type="radio" name="cat" value="service" /> Service<br />
<input type="radio" name="cat" value="tech" /> Tech<br />
<input type="radio" name="cat" value="other" /> Other<br />
<input type="radio" name="min" value="5" /> 5<br />
<input type="radio" name="min" value="10" /> 10<br />
<input type="radio" name="min" value="15" /> 15<br />
<input type="radio" name="max" value="5" /> 5<br />
<input type="radio" name="max" value="10" /> 10<br />
<input type="radio" name="max" value="15" /> 15<br />
</form>
<div class="result"></div>
<script type="text/javascript">
$(document).ready(function(){
$('.filter').live('click focus', function(){
$.ajax({
url: http://example.com/search/results/?cat=tech&?min=5&max=30,
context: document.body,
success: function(data) {
$('.result').html(data);
}
});
});
});
</script>
Some how the url in the ajax call above needs to have the params update in the url. Also, not every param will always be included or needed.
It would be nice if I could use something like PHP's http_build_query function that would automatically know what values of the array to replace or something like that but I'm really stuck as to what to do. I'm not sure if I need to create an array and concatantate
Ideally I would be able to have something like "http://example.com/search/results/cat/tech/min/5/30" if that's at all doable.
url: 'http://example.com/search/results/?' + $('form').serialize(),
or
url: 'http://example.com/search/results/?' + $('form').serialize().replace(/&=/, '/'),
Use jQuery's serialize() method.
jsFiddle.
Well, what you're really trying to do is submit the form without refreshing the page. So here's how to do that:
Add a submit button to the form
Hook into the submit event of the form
Cancel the default action which is to refresh the page with the response
Submit via ajax and handle the response
Like this:
<form id="MyFilterForm" action="/myBaseUrl" method="POST">
...
<input type="submit" value="Filter"/>
</form>
<script type="text/javascript">
$(document).ready(function(){
$('#MyFilterForm').submit(function(event){
// cancel the default action
event.preventDefault();
var theForm = $(this);
$.post(theForm.attr('action'), theForm.serialize(), function (data){
$('.result').html(data);
});
});
});
</script>
You can check which radio inputs have been selected and build the url accordingly e.g:
<input id="radCat" type="radio" name="cat" value="service" /> Service<br />
string url = "http://example.com/search/results/?";
if($("#radCat").attr("checked").val() == "checked") {
url = url + "cat=" + $("#radCat").attr("value").val();
}
hi i want to know about the addcart shopping. im doing the payment process named TRER. i have a problem with clicking button.i setup every code is correct eventhough i could not see any change.
i mentioned my product in radio button, i have a 5 radio buttons which has different amount like 20$ 40$ 58.99$ 70$ and 100$. this is the value of 5 radio button. if i clicks the 2 nd button that amount should add to shopping cart.
i have the little confusion with this. i want to know the action on radio button.
<input name="rmr" type="radio" value="20" onclick="add_payment_value()" />
<input name="rmr" type="radio" value="40" onclick="add_payment_value()" />
<input name="rmr" type="radio" value="58.99" onclick="add_payment_value()" />
<input name="rmr" type="radio" value="70" onclick="add_payment_value()" />
<input name="rmr" type="radio" value="100" onclick="add_payment_value()" />
i want to know the ajax function. should i use jquery and ajax togather.
could guys any one post some code else idea.
Wishing you a happy NewYear
thanks in advance mariya
HTML:
<input name="rmr" type="radio" value="20" />
<input name="rmr" type="radio" value="40" />
<input name="rmr" type="radio" value="58.99" />
<input name="rmr" type="radio" value="70" />
<input name="rmr" type="radio" value="100" />
JS:
var rbRmr = $('input[name="rmr"]');
$(rbRmr).bind('change', function(ev) {
var amount = $(this).val();
$(rbRmr).attr('readonly', 'readonly'); //block until the query ends Ajax
$.ajax({
...
data: {value: amount},
complete: function(xhr, sts) {
$(rbRmr).removeAttr('readonly'); //unblock
},
...
});
});
You should try jQuery $.ajax function! If you want to add price to shopping cart you could do something like:
HTML:
<input name="rmr" type="radio" value="20" />
<input name="rmr" type="radio" value="40" />
<input name="rmr" type="radio" value="58.99" />
<input name="rmr" type="radio" value="70" />
<input name="rmr" type="radio" value="100" />
jQuery:
$(document).ready(function(){
$("input[type='radio']").click(function(){
var price = $(this).val();
add_payment_value(price);
});
});
function add_payment_value(price){
// here you can use $.ajax function to add your 'price value' to your cart
$.ajax({
type: "POST",
url: "add_payment_price.php", // file where you can add price to your database
data: "",
success: function(){} // return something on success
});
}