Active radio button with jquery - php

I used all of the helpful answers on this site to try to build a jquery script to select radio buttons, but for some reason they don't work. Am I doing something wrong? For the sake of simplicity I've started back from square one.
I've attached the format that the php-generated form produces below. I tried multiple browsers, but was unable to get any button to select anything. Is there some complexity I'm not taking into account? The page is a .php page, and the form is generated in php.
Sorry for the basic question -- any help would be greatly appreciated. Not sure if it's relevant, but I want these buttons to work on mobile as well as various browsers.
Form Code:
<form class="form-horizontal" method="get" action="submit.php" name="form">
<div class="control-group">
<div class="row-fluid">
<div class="span2"></div>
<div class="span8">
<label class = "control-label" for="input1"> foreign policy </label>
<div class="controls">
<label class="checkbox inline"><input type="radio" name="group1" id="1_l" value="1_l"> Liberal</label>
<label class="checkbox inline"><input type="radio" name="group1" id="1_m" value="1_m"> Moderate</label>
<label class="checkbox inline"><input type="radio" name="group1" id="1_c" value="1_c"> Conservative</label>
</div>
</div>
</div>
<div class="row-fluid">
<div class="span2"></div>
<div class="span8">
<br>
<center><button type="submit" class="btn btn-danger btn-large">Generate</button></center>
</div>
<div class="span2"></div>
</div>
</form>
Jquery Code:
$('button').click(
function() {
$('#1_l').attr('checked', true);
}
);

Make sure to only bind the handler after the DOM has been loaded:
$(function() {
$('button').click(function() {
$('#1_l').attr('checked', true);
});
});

Use the ":checked" selector in jQuery to select the checked input, otherwise you only get the first one.
$(function () {
$('button.btn').click(function () {
var $box = $('.checkbox input:checked');
if ($box.length > 0)
alert($box.val());
});
});​

Here is what i see you have a div that was not closed i closed it
I changes the button type to button rather than submit so i could see it work and all was good
See my working DEMO
<form class="form-horizontal" method="get" action="submit.php" name="form">
<div class="control-group">
<div class="row-fluid">
<div class="span2"></div>
<div class="span8">
<label class = "control-label" for="input1"> foreign policy </label>
<div class="controls">
<label class="checkbox inline"><input type="radio" name="group1" id="1_l" value="1_l"> Liberal</label>
<label class="checkbox inline"><input type="radio" name="group1" id="1_m" value="1_m"> Moderate</label>
<label class="checkbox inline"><input type="radio" name="group1" id="1_c" value="1_c"> Conservative</label>
</div>
</div>
</div>
<div class="row-fluid">
<div class="span2"></div>
<div class="span8">
<br>
<center><button type="button" class="btn btn-danger btn-large">Generate</button></center>
</div>
<div class="span2"></div>
</div>
</div>
</form>​
and here is the jQuery
$(function () {
$('button').click(function() {
$('#1_l').attr('checked', true);
});​
}

Related

Empty / Null Return Value from Bootstrap Radio Button Group Selection

Would appreciate someone explaining to me why I only get an empty string back from PHP when trying to get radio-button group selection.
$currentlyemployed = null;
if (isset($currentlyemployedyes)) {
$currentlyemployed = "Yes";
}
else {
$currentlyemployed = "No";
}
NOTE: text inputs within the same form post and I can get their values.
Example snippets:
START FORM MARKUP
<div class="row">
<div class="col-sm-6 text-left">
<h5>Are you currently employed?</h5>
<div class="control-group">
<div class="controls">
<label>
<input type="radio" id="currentlyemployedyes" name="currentlyemployed" value="yes" />Yes</label>
<label>
<input type="radio" id="currentlyemployedno" name="currentlyemployed" value="no" />No</label>
<p class="help-block"></p>
</div>
</div>
</div>
</div>
END FORM MARKUP
START PHP CODE SNIPPET
$currentlyemployed = $_POST['currentlyemployed']; RETURNS empty string
/* FYI
$currentlyemployedyes = $_POST['currentlyemployedyes']; RETURNS "Yes"
$currentlyemployedno = $_POST['currentlyemployedno']; RETURNS "No"
*/
END PHP CODE SNIPPET
The code you have written works as expected. You can check out the snippet below.
Bootstrap or not it does not matter. The name="currentlyemployed" sent from the form to php server and then php binds it into $_POST associative global array.
<?php
echo "<pre>";
var_dump($_POST);
echo "</pre>";
echo "Currently Employed: ".$_POST['currentlyemployed'];
?>
<hr>
<div class="row">
<div class="col-sm-6 text-left">
<form method="POST">
<h5>Are you currently employed?</h5>
<div class="control-group">
<div class="controls">
<label>
<input type="radio" id="currentlyemployedyes" name="currentlyemployed" value="yes" />Yes</label>
<label>
<input type="radio" id="currentlyemployedno" name="currentlyemployed" value="no" />No</label>
<p class="help-block"></p>
</div>
</div>
<input type="submit">
</form>
</div>
</div>
I don't consider this a legitimate "answer", but, rather, a "work-around".
Would like to provide attribution, but forget where I found this, might have even been here on stack overflow.
<div class="row">
<div class="col-sm-6 text-left">
<h5>Are you currently employed?</h5>
<div class="control-group">
<div class="controls">
<label>
<input type="radio" id="currentlyemployedyes" name="currentlyemployed" value="yes" **onclick="$('#currentlyemployed').val('Yes');"** />
Yes</label>
<label>
<input type="radio" id="currentlyemployedno" name="currentlyemployed" value="no" **onclick="$('#currentlyemployed').val('No');"** />
No</label>
<p class="help-block"></p>
</div>
**<input name="currentlyemployed" id="currentlyemployed" type="hidden" value="" />**
</div>
</div>
</div>

jQuery show hide select menus based on serialized hash

I am trying to get select menus show hide by using ajax and serialised hashes. I had this system working last night but I changed the #selector from a form to a div and suddenly its stopped running. I had to broaden the form for additional data on post and did not want to serialise all the data at once for this as it would be additional strain on the system.
The page somewhat works as expected. It shows the first select, allows me to select an option, I can see the AJAX posting but the hash value is empty which I believe is breaking the PHP above. I cant figure out why the hash is posting empty. I assume its not getting the value from the select but I cant work out why..
If possible can you please point out where I am going wrong?
<section id="add">
<div class="container">
<form method="post">
<div class="panel panel-default">
<div class="panel-heading">
<h3 class="panel-title"><strong>Step 1: Instance Select</strong></h3>
</div>
<div id="selector">
<div class="panel-body">
<div class="col-md-6">
<select class="form-control box1" name="box1"></select>
<input name="box1hash" class="box1hash" type="hidden" />
</div>
<div class="col-md-6">
<select class="form-control box2" name="box2"></select>
<input name="box2hash" class="box2hash" type="hidden" />
</div>
<div class="col-md-6">
<select class="form-control box3" name="box3"></select>
<input name="box3hash" class="box3hash" type="hidden" />
</div>
<div class="col-md-6">
<select class="form-control box4" name="box4"></select>
<input name="box4hash" class="box4hash" type="hidden" />
</div>
<div class="col-md-6">
<select class="form-control box5" name="box5"></select>
<input name="box5hash" class="box5hash" type="hidden" />
</div>
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">
<h3 class="panel-title"><strong>Step 2: Event Details</strong></h3>
</div>
<div class="panel-body">
<input name="event_name" type="text" class="form-control" />
</div>
</div>
<input type="submit"/>
</form>
</div>
$(document).on('change', '#selector', function(e) {
ajax_post(this);
});
ajax_post();
})(jQuery);
function show_hide_select(select){
if ($(select).find('option').length < 1) {
$(select).hide();
} else {
$(select).show();
}
}
function ajax_post(element=null) {
var frm = $('#selector');
if (element != null) {
// Reset selections
var found=false;
frm.find('select').each(function(e){
if (found==true) {
$(this).hide().find('option:selected').prop("selected", false)
}
if (element==this) found=true;
});
}
$.ajax({
url: '?ajax=1',
type: "POST",
data: frm.serialize(),
dataType: 'json',
success: function (data) {
if (data.box1hash != frm.find('.box1hash').val()) {
frm.find('.box1').html(data.box1?data.box1:'');
frm.find('.box1hash').val(data.box1hash);
show_hide_select(frm.find('.box1'));
}
if (data.box2hash != frm.find('.box2hash').val()) {
frm.find('.box2').html(data.box2?data.box2:'');
frm.find('.box2hash').val(data.box2hash);
show_hide_select(frm.find('.box2'));
}
if (data.box3hash != frm.find('.box3hash').val()) {
frm.find('.box3').html(data.box3?data.box3:'');
frm.find('.box3hash').val(data.box3hash);
show_hide_select(frm.find('.box3'));
}
if (data.box4hash != frm.find('.box4hash').val()) {
frm.find('.box4').html(data.box4?data.box4:'');
frm.find('.box4hash').val(data.box4hash);
show_hide_select(frm.find('.box4'));
}
if (data.box5hash != frm.find('.box5hash').val()) {
frm.find('.box5').html(data.box5?data.box5:'');
frm.find('.box5hash').val(data.box5hash);
show_hide_select(frm.find('.box5'));
}
}
});
}
</script>
Contrary to my earlier comments, a form tag cannot be nested within another form tag. jquery serialize() only works on forms, so unfortunately it's not possible to focus it on a div component of the form. Instead however you can serialize the whole form as a string, and then extract the subsection of that string for reduced ajax posting. Snippet below with inline comments...
$('form').on({
'change':function(e){
e.preventDefault();
var dats = $(this).serialize(); // serialize the whole form into a string
var pico = dats.indexOf('&event_name='); // get the index of the end point of the desired data
var newDats = dats.slice(0 , pico); // get the edited section for ajax submission
$('#results').text(dats+' '+newDats);
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<section id="add">
<div class="container">
<form method="post" id='bob'>
<div class="panel panel-default">
<div class="panel-heading">
<h3 class="panel-title"><strong>Step 1: Instance Select</strong></h3>
</div>
<div id="selector">
<div class="panel-body">
<div class="col-md-6">
<select class="form-control box1" name="box1">
<option>a</option>
<option>b</option>
<option>c</option>
</select>
<input name="box1hash" class="box1hash" type="hidden" />
</div>
<div class="col-md-6">
<select class="form-control box2" name="box2"></select>
<input name="box2hash" class="box2hash" type="hidden" />
</div>
<div class="col-md-6">
<select class="form-control box3" name="box3"></select>
<input name="box3hash" class="box3hash" type="hidden" />
</div>
<div class="col-md-6">
<select class="form-control box4" name="box4"></select>
<input name="box4hash" class="box4hash" type="hidden" />
</div>
<div class="col-md-6">
<select class="form-control box5" name="box5"></select>
<input name="box5hash" class="box5hash" type="hidden" />
</div>
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">
<h3 class="panel-title"><strong>Step 2: Event Details</strong></h3>
</div>
<div class="panel-body">
<input name="event_name" type="text" class="form-control" />
</div>
</div>
<input type="submit"/>
</form>
</div>
<p><tt id="results"></tt></p>

hide/show php checkbox by id like www.anysite.php?id=10

I have a form and a checkbox. By click on the checkbox, a div within some other divs will show up or hide. This works! But, if i visit my page with an id like xxxxx.php?id=10, the checkbox is checked but the divs are hide. if i click on the checkbox, the divs will show up, but the checkbox is unchecked (bad for e.g. mysql updates).. hope anyone can help me by this issue..
Here my code:
$(document).ready(function() {
$('#Show').hide();
$("input[name=mycheckbox]").click(function () {
$('#Show').toggle();
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form id="form">
<div class="form-group">
<div class="form-group">
<div class="checkbox-inline">
<label>
<input type="checkbox" name="mycheckbox" id="mycheckbox" value="yes"> my option
</label>
</div>
</div>
</div>
<div id="Show">
<div class="form-group">
<label for="textinput" class="control-label">Company </label>
<div class="">
<input type="text" class="form-control" name="name" id="name" placeholder="" value="">
</div>
</div>
</div>
</form>
My input field have this code (php doesn't work in the snippet):
<input type="checkbox" name="mycheckbox" id="mycheckbox" value="yes" <?php if (isset($_GET['id'])) {echo $row->mycheckbox == "yes" ? 'checked="checked"' : "";}?>
thanks for your help!
I would recommend to use change event, trigger using .trigger('change') on page load so that the div in sync with the state of checkbox element.
Also you should .toggle(display)
$("input[name=mycheckbox]").change(function () {
$('#Show').toggle(this.checked);
}).trigger('change');

Check textarea is empty and checkbox was selected at least one when submit using jquery

I develop an app using codigniter. In view, I have a form like this :
<div class="box-content">
<?php
$properties = array('class' => 'form-horizontal', 'id' => 'myForm');
echo form_open("control_request/userRequest", $properties);
?>
<fieldset>
<div class="control-group">
<label class="control-label">Jenis Request :</label>
<div class="controls" id="chekboxes">
<label class="checkbox inline"><input type="checkbox" name="request[]" id="Login" value="Login" > Login </label>
<label class="checkbox inline"><input type="checkbox" name="request[]" id="Printer" value="Printer"> Printer </label>
<label class="checkbox inline"><input type="checkbox" name="request[]" id="Monitor" value="Monitor"> Monitor</label>
<label class="checkbox inline"><input type="checkbox" name="request[]" id="Computer" value="Computer"> Computer</label>
<label class="checkbox inline"><input type="checkbox" name="request[]" id="Network" value="Network"> Network</label>
<label class="checkbox inline"><input type="checkbox" name="request[]" id="Lain-lain" value="Lain-lain" > Lain-lain</label>
</div>
</div>
<div class="control-group hidden-phone">
<label class="control-label" for="Complaint" Complaint : </label>
<div class="controls">
<textarea class="cleditor" name="Complaint" id="Complaint" rows="3"></textarea>
</div>
</div>
<div class="form-actions">
<button type="submit" class="btn btn-primary" id="submit" >Submit</button>
<button type="reset" class="btn">Cancel</button>
</div>
</fieldset>
<?php echo form_close(); ?>
Now, I create some javascript using jquery to validate, if the checkbox and textarea was qualify before submit. Here is the logic of jquery :
<script>
$(document).ready(function() {
$("#submit").click(function(e){
if (chekbox not selected at least one ) {
<p> Please choose at least one </p>
}
if textbox is empty {
<p> Pleaser fill the textbox </p>
}
if (all qualified)
submit
});
</script>
I just wanna check all of the element is qualified before submitting. But if not qualified, there will be a error message like this
()Checkbox1 ()Checkbox2 ()Checkbox3 ()Checkbox 4 <p>Please select one</p>
<textarea></textarea> <p>Please describe your complaint</p>
I am using jquery 1.9.1 , I will keep learn, and for the help thank you so much..
JSFIDDLE
Your question is not clear ..but it may help you what do you need
$("textarea:empty").length == 0 // text area empty
$(".checkbox [type=checkbox]:checked").length >= 1 // at least one is selected
If you need to make the textarea mandatory, use requierd
attribute. The jQuery validate plugin that you have used will do the
rest of the trick for validation.
For checking if at least one of the checkboxes is selected, you can
add one rule for checkboxes:
rules: {
'request[]': {
required: true,
minlength:2
}
},
OR
You can add a custom rule:
$.validator.addMethod("request[]", function(value, elem, param) {
if($(".request[]:checked").length > 0){
return true;
}else {
return false;
}
},"You must select at least one checkbox to continue");

Change label text based on the radio button selection

I want to change the label text based on the selection of the radio button. Could you please help me to do it easily. Here is my code.
<div class="control-group ">
<div class="controls">
<label class="radio inline">
<input type="radio" name="btype[]" id="private" value="private" checked>Private
</label>
<label class="radio inline">
<input type="radio" name="btype[]" id="business" value="business">Business Advertiser
</label>
</div>
</div>
This is the label that i want to change the text
<div class="control-group " >
<label class="control-label" id="labelName">Name</label>
<div class="controls">
<div class="input-prepend">
<span class="add-on"><i class="icon-user"></i></span>
<input type="text" class="input-xlarge" id="name" name="name" placeholder="">
</div>
</div>
</div>
<div class="control-group ">
<label class="control-label" id="labelNum">NIC</label>
<div class="controls">
<div class="input-prepend">
<span class="add-on"><i class="icon-user"></i></span>
<input type="text" class="input-xlarge" id="regNum" name="regNum" placeholder="">
</div>
</div>
</div>
This is my javascript
<script type="text/javascript">
$(document).ready(function()
{
if (($('input[name=btype]:radio:checked').val())=="business")
{
document.getElementById("labelName").innerHTML="Company Name";
document.getElementById("labelNum").innerHTML="Reg No.";
}
}
);
</script>
I rewrote the code for you in a better way. When you have jQuery use it to the best. Don't get messed up by handling JavaScript. jQuery is there to do it for you.
<script type="text/javascript">
$(document).ready(function()
{
if ($('#business').is(':checked'))
{
$('#labelName').text("Company Name");
$('#labelNum').text("Reg No.");
}
}
);
</script>
youre mixing jquery in with your js, so heres jquery
<script type="text/javascript">
$(document).ready(function(){
$('input[name=btype]:radio:checked').click(function(e){
if($(e.currentTarget).val()==='business') {
$("#labelName").text("Company Name");
$("#labelNum").text("Reg No.");
}
});
});
</script>
JsFiddle
onclick="document.getElementById('labelName').innerHTML='NEWLABELNAME'"
You can achieve this by adding a change listener to that inputs and getting the value of the selected one
I have added some HTML5 attributes to avoid getting more DOM
please look at data-text
<div class="control-group ">
<div class="controls">
<label class="radio inline">
<input type="radio" data-text="private" name="btype[]" id="private" value="private" checked>Private
</label>
<label class="radio inline">
<input type="radio" data-text="Business Advertiser" name="btype[]" id="business" value="business">Business Advertiser
</label>
</div>
</div>
Here is your JS and its jQuery
$(document).ready(function(){
$('input[name="btype[]"]').change(function(){
alert($(this).data('text'));
});
});
You can add more than data-* attributes like price or whatever you want and getting the value of it by using $(this).data('*');
It's used like this to make your HTML valid and I used it to avoid getting parent text
Check this fiddle http://jsfiddle.net/gK6bU/1/
I hope this can help :)

Categories