$('.ssn_byphone').click(function(){
var ssn_role = document.getElementById('ssn_byphone').checked;
if(ssn_role==true)
{
$('#ssn-div').hide();
$('.ssn_byphone').css('display','block');
$('#ssn').val('');
}
else
{
$('#slideUp').show();
}
});
<input id="ssn_byphone" class="ssn_byphone" type="radio" name="pi[ssn_byphone]" value="Yes"><label for="radio1"> I will provide SSN by phone</label>
I want to check/uncheck this radio button when i clicked on it, and want to set condition accordingly.
Try this:
var checked=false;
$('.ssn_byphone').click(function(){
checked=!checked;
$(this).prop("checked",checked);
if($(this).is(':checked'))
{
$('#ssn-div').hide();
$('.ssn_byphone').css('display','block');
$('#ssn').val('');
}
else
{
$('#slideUp').show();
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
<input id="ssn_byphone" class="ssn_byphone" type="radio" name="pi[ssn_byphone]" value="Yes"><label for="radio1"> I will provide SSN by phone</label>
You can place a checkbox instead of the radio button and change the appearance so that it will look like a radio button
<input id="ssn_byphone" class="ssn_byphone" type="checkbox" name="pi[ssn_byphone]" value="Yes" style="-webkit-appearance: radio; -moz-appearance: radio;-ms-appearance: radio;"><label for="radio1"> I will provide SSN by phone</label>
CHECK AND UNCHECK SINGLE RADIO BUTTON
var myRadio = document.getElementById('ssn_byphone');
var booRadio;
myRadio.onclick = function(){
if(booRadio == this){
this.checked = false;
booRadio = null;
}else{
booRadio = this;
}
};
<input id="ssn_byphone" class="ssn_byphone" type="radio" name="pi[ssn_byphone]" value="Yes"><label for="radio1"> I will provide SSN by phone</label>
Related
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>
I have radio buttons as shown below.
<div id="lensType">
<input type="radio" name="design" style="vertical-align: middle" value="1"/>
<label for="design">Single Vision</label><br/>
<input type="radio" name="design" style="vertical-align: middle" value="2" />
<label for="material" >Accommodative Support</label><br/>
<input type="radio" name="design" style="vertical-align: middle" value="3"/>
<label for="design">Bifocal</label> <br/>
<input type="radio" name="design" style="vertical-align: middle" value="4" />
<label for="material" >Varifocal (Intermediate/Near)</label><br/>
<input type="radio" name="design" style="vertical-align: middle" value="5"/>
<label for="material" >Varifocal (Distance/Near)</label>
</div>
I am making a dynamic select. I have my javascript code that post the value . It seems the supplier value is now posted. Below is the code for my script.
$(document).ready(function(){
function populate() {
fetch.doPost('getSupplier.php');
}
$('#lensType').change(populate);
var fetch = function() {
var counties = $('#county');
return {
doPost: function(src) {
$('#loading_county_drop_down').show(); // Show the Loading...
$('#county_drop_down').hide(); // Hide the drop down
$('#no_county_drop_down').hide(); // Hide the "no counties" message (if it's the case)
if (src) $.post(src, { supplier: $('#lensType').val() }, this.getSupplier);
else throw new Error('No source was passed !');
},
getSupplier: function(results) {
if (!results) return;
counties.html(results);
$('#loading_county_drop_down').hide(); // Hide the Loading...
$('#county_drop_down').show(); // Show the drop down
}
}
}();
populate();
});
Php code :
<?php
if(isSet($_POST['supplier'])) {
include 'db.php';
$stmt = $mysql->prepare("SELECT DISTINCT SupplierBrand FROM plastic WHERE HeadingNo='".$_POST['supplier']."'");
$stmt->execute();
$stmt->bind_result($supplierBrand);
while ($row = $stmt->fetch()) : ?>
<option value="<?php echo $supplierBrand; ?>" width="100px"><?php echo $supplierBrand; ?></option>
My problem is when I debug I notice there is no value passed to the php script and this makes the select empty. I have tried to trace or debug by having firebug output the console.log and failed in this regard.
Please assist with this code which is meant to show a dynamic list from a radio button selection.
for debugging:
$('input[name="design"]').change(function(){
console.log($('#lensType').find("input:radio[name ='design']:checked").val());
});
else:
$('#lensType').find("input:radio[name ='design']:checked").val();
instead of
$('#lensType').val()
and you probably want to wrap it witg a changed function, since onload no design is selected:
$(document).ready(function(){
$('input[name="design"]').change(function(){
var design = $('input[name="design"]:checked').val();
function populate() {
fetch.doPost('getSupplier.php');
}
$('#lensType').change(populate);
var fetch = function() {
var counties = $('#county');
return {
doPost: function(src) {
$('#loading_county_drop_down').show(); // Show the Loading...
$('#county_drop_down').hide(); // Hide the drop down
$('#no_county_drop_down').hide(); // Hide the "no counties" message (if it's the case)
if (src) $.post(src, { supplier: design }, this.getSupplier);
else throw new Error('No source was passed !');
},
getSupplier: function(results) {
if (!results) return;
counties.html(results);
$('#loading_county_drop_down').hide(); // Hide the Loading...
$('#county_drop_down').show(); // Show the drop down
}
}
}();
populate();
});
});
In your javascript you are getting the value of the div, not the radio button:
$('#lensType').val() <--- change that
To something like this:
$("#lensType input:radio[name='design']:checked").val()
I want to hide and show input field on radio button click event my HTML is
<input type="radio" id="abc" name="abc1" checked = "checked" value="Experienced" />
<label> Experienced </label>
<input type="radio" id="xyz" name="xyz1" checked = "checked" value="Fresher" />
<label>Fresher</label>
<input type="text" name="cardno" id="tyx" /><br />
<p > Number</p>
What I want is when radio button with value="Fresher" is clicked the input box name="cardno" should be hidden.
I tried to solve this by using jQuery but it is not working.
$(document).ready(function () {
$("input[name$='abc1']").click(function () {
var value = $(this).val();
if (value == 'Experianced') {
$("#tyx").show();
} else if (value == 'Fresher') {
$("#tyx").hide();
}
});
Can any body help me how to solve this?
name of your radio button should be same to check on click event or make array name of your radio button
like below code
<input type="radio" id="abc" name="abc1" checked = "checked" value="Experienced" />
<label> Experienced </label>
<input type="radio" id="xyz" name="abc1" checked = "checked" value="Fresher" />
<label>Fresher</label>
<input type="text" name="cardno" id="tyx" /><br />
<p > Number</p>
and then create function like
$(document).ready(function () {
$("input[name$='abc1']").click(function () {
var value = $(this).val();
if (value == 'Experianced') {
$("#tyx").show();
} else if (value == 'Fresher') {
$("#tyx").hide();
}
});
please reply if i can help you more..
change the spelling to Experienced
you used
if (value == 'Experianced')
Besides the typo in Experienced, try setting up a click event for each radio button:
$(document).ready(function() {
$('input[name="abc1"][value="Experienced"]').click(function() {
$("#tyx").show();
});
$('input[name="xyz1"][value="Fresher"]').click(function() {
$("#tyx").hide();
});
});
Note:
You can simplify your selectors to use ids with:
$('#abc')
and
$('#xyz')
Fix with:
$(document).ready(function () {
$("input[type='radio']").click(function () {
var value = $(this).val();
if (value == 'Experianced') {
$("#tyx").show();
} else if (value == 'Fresher') {
$("#tyx").hide();
}
});
});
Html:
<input type="radio" id="abc" name="jobtype" checked = "checked" value="Experienced" />
<label> Experienced </label>
<input type="radio" id="xyz" name="jobtype" checked = "checked" value="Fresher" />
<label>Fresher</label>
<input type="text" name="cardno" id="tyx" /><br />
<p > Number</p>
Radio buttons of same group should have same name
Js:
$(document).ready(function () {
$("input[name='jobtype']").click(function () {
var value = this.value;
if (value == 'Experienced') {
$("#tyx").show();
}
else{
$("#tyx").hide();
}
});
});
My code snippet for radio buttons is -
<input type="radio" name="isPush" id="isPushYes" <? if($isPush) {?>checked="checked"<?}?> value="<?= $isPush;?>" > <? echo "Yes"?></input>
<input type="radio" name="isPush" id="isPushNo" <? if(!$isPush) {?>checked="checked"<?}?> value="<?= $isPush;?>" > <? echo "No"?></input>
<table id="emailTable"><tr><td>...</td></tr></table>
The value of isPush will be 0 or 1. So one of my radio buttons will always be selected. And selecting either of the radio buttons initially is not in my hands.
Now, For the table, I want to set display: none when when second radio button is selected and set display: visible when first radio button is selected.
So which event should I put? I certainly can't put onclick.
You need to check the selected radio onload, as well as onchange. This means the table will be hidden to start with, if No is selected by default.
jsFiddle Demo
function checkRadio()
{
var tbl = document.getElementById("emailTable");
if(document.getElementById("isPushYes").checked)
{
tbl.style.display = "";
}
else
{
tbl.style.display = "none";
}
}
window.onload = function()
{
document.getElementById("isPushYes").onchange = checkRadio;
document.getElementById("isPushNo").onchange = checkRadio;
checkRadio();
}
Another option is without the onload event, you set the display with PHP:
<table id="emailTable" <?php if(!$isPush) echo 'style="display:none"'; ?>><tr><td>...</td></tr></table>
i think this is what you want:
<label><input type="radio" name="myradio" value="1" checked="true" onchange="hideActive(this.name);" /> radio 1</label>
<label><input type="radio" name="myradio" value="2" onchange="hideActive(this.name);" /> radio 2</label>
<label><input type="radio" name="myradio" value="3" onchange="hideActive(this.name);" /> radio 3</label>
<script type="text/javascript">
function hideActive(radioGroupName) {
var all = document.getElementsByName(radioGroupName);
for(var n = 0; n < all.length; n++) {
if(true === all[n].checked) {
all[n].setAttribute('style', 'display: none;');
}
else {
all[n].removeAttribute('style');
}
}
}
hideActive('myradio');
</script>
if you support jquery try this
<label><input type="radio" name="myradio" value="1" checked="true" /> radio 1</label>
<label><input type="radio" name="myradio" value="2" /> radio 2</label>
<label><input type="radio" name="myradio" value="3" /> radio 3</label>
<script type="text/javascript">
jQuery(function() {
var all = jQuery('input[name=myradio]');
var change = function() {
all
.show()
.filter(':checked').hide();
};
all.change(function(){
change();
});
//call init
change();
});
</script>
You want to perform some action when the radio button is checked by the user, so you'll want to bind a handler for the onchange event.
you should write a javascript function that changes the display attribute and then call it in 2 places.
1- When the document loads.
window.onload = function () { javascript_function(); }
if you have JQuery you can do this:
$(document).ready(function(){
javascript_function();
)};
2- When there's a change in the radio button.
Either set a onchange="javascript_function" or use JQuery.
$(document).ready(function(){
javascript_function();
$("#radio_id").change(javascript_function());
)};
Its a test. Change it as like as you want
<script type="text/javascript">
function fnc(myid,otherid)
{
if(document.getElementById(myid).checked)
{document.getElementById(otherid).disabled='disabled';}
}
</script>
<input type="radio" name="isPush" id="isPushYes" onchange="fnc(this.id,'isPushNo')">
<input type="radio" name="isPush" id="isPushNo" onchange="fnc(this.id,'isPushYes')">
Onchange, for example (in JQuery):
$('input[name="isPush"]').change(function() {
// your code
});
Or:
<input onchange="myFunction();" type="radio" name="isPush" id="isPushYes" <? if($isPush) {?>checked="checked"<?}?> value="<?= $isPush;?>" > <? echo "Yes"?></input>
<input onchange="myFunction();" type="radio" name="isPush" id="isPushNo" <? if(!$isPush) {?>checked="checked"<?}?> value="<?= $isPush;?>" > <? echo "No"?></input>
I personally would look at onChange, this will catch occasions where the selected value changes. If doing this in jquery I'd do something like:
$('input[type=radio][name=isPush]').bind('change', function(e){
console.log('We had a change');
});
Note that if the item is dynamically added at all you should change bind to live.
here is the fidddle..
http://jsfiddle.net/vfuV5/2/
for example:
if($('input:radio[name="isPush"]:checked').val() == 'Yes') // used yes u can use 1 here
{
$('#emailTable').show();
}else{
$('#emailTable').hide();
}
$("input[name='isPush']").change(function() {
if($('input:radio[name="isPush"]:checked').val() == 'Yes') // used yes u can use 1 here
{
$('#emailTable').show();
}else{
$('#emailTable').hide();
}
});
OR
make a function
function checkRadioValue()
{
if($('input:radio[name="isPush"]:checked').val() == 'Yes') // used yes u can use 1 here
{
$('#emailTable').show();
}else{
$('#emailTable').hide();
}
}
Call this function on document.ready and onchange function
$(document).ready(function(){
checkRadioValue();
$("input[name='isPush']").change(function() {
checkRadioValue();
});
})
I made a design with ajax, jquery, mysql and checkbox in php. It is like that :
There is box with checkboxes. And there is another box which is empty. When you checked a checkbox in first box, information about that checkbox will be displayed in empty box. I did it and work good.But when you clicked another checkbox, information about first you clicked dissappear and only current selection is displayed. That is to say, I want to add new selection on old ones. Also how can I delete information in second box when I unchecked a checkbox. Thank you.
Here is HTML code :
<div id="first_box">
<label class='checkbox'>
<input type='checkbox' id=1>
First checkbox
</label>
<label class='checkbox'>
<input type='checkbox' id=2>
Second checkbox
</label>
<label class='checkbox'>
<input type='checkbox' id=3>
Third checkbox
</label>
</div>
<div id="second_box"> </div>
Here is jquery code :
$(document).ready(function() {
$("#first_box input:checkbox").change(function() {
if($(this).is(":checked")) {
$.post("/here/is/url", { strID:$(this).attr("id"), strState:"1" },
function(data) {
$("#second_box").html(data);
});
} else {
$.ajax({
url: 'here/is/url/',
type: 'POST',
data: { strID:$(this).attr("id"), strState:"0" }
});
}
});
});
Here is the php code for ajax request :
$strID = $_POST['strID'];
$strState = $_POST['strState'];
if ($strState) { //if checkbox is clicked
//I fetch data about checkbox which is clicked
$infos = $this->info_model->get_info_from_checkbox_id($strID);
foreach ($infos as $info) {
echo "<label class='checkbox'>
<input type='checkbox'>".$info->information .
"</label>";
}
} else { // if it is unchecked
// I do not know how to delete
}
I want to add new selection on old ones.
you can use append() instead of html() which replaces the content:
$("#second_box").append(data);
how can I delete information in second box when I unchecked a checkbox.
you can use empty() which removes the contents of the selected element:
$("#second_box").empty();
Alternatively, you could do more on the client-side. See here for a demo.
<div id="first_box">
<label class='checkbox'>
<input data-url="url1" data-id="1" type="checkbox"> First checkbox
</label>
<label class='checkbox'>
<input data-url="url2" data-id="2" type="checkbox" > Second checkbox
</label>
<label class='checkbox'>
<input data-url="url3" data-id="3" type="checkbox"> Third checkbox
</label>
</div>
<div id="second_box"></div>
JavaScript:
$(document).ready(function() {
$("#first_box input:checkbox").change(function(e) {
var $this = $(this);
if (already_loaded()) {
update_visibility();
} else {
load();
}
// END -- Functions
function already_loaded() {
return $this.data("loaded");
}
function is_loading() {
return $this.data("loading");
}
function load() {
if (!is_loading()) {
$this.data("loading", true);
var id = $this.data("id");
$.post("url", { // or use $this.data("url") if you want individual URLs
strId: id
}, function(data) {
$this.data("loaded", true);
$this.data("is_loading", false);
$("#second_box").append(data);
update_visibility();
});
}
}
function is_checked() {
return $this.is(":checked");
}
function update_visibility() {
var $info = $("#info-" + $this.data("id"));
if (is_checked()) {
$info.show();
}
else {
$info.hide();
}
}
});
$("#first_box input:checkbox").data("loaded", false);
$("#first_box input:checkbox").data("loading", false);
});