I am using an ajax to load form fields. When the you select the school, the grade fields load. When you select the grade, the show name check box appears. When the select all box appears, I have to click the select all box twice for it to work. It like the checkboxes are not apart of the DOM until the second click. I am not really sure what the issue is.
Here is all of my code.
Main Page
ShowGrade.html
showname.html
<input type="checkbox" class="coursereportcheckall" onChange="ThirdCheck();" id="checkall" name="coursereportcheckall">Select All<br>
<input type="checkbox" onChange="FourthCheck(this.selectedIndex);" value="10" class="tid" id="tid" name="tid"> George Washington<br>
<input type="checkbox" onChange="FourthCheck(this.selectedIndex);" value="11" class="tid" id="tid" name="tid"> John Adams<br>
showcourse.html
<input type="checkbox" id="checkallcourse">Select All<br />
<input type="checkbox" name="cid" id="cid" class="cid" value="12"/> Twelve<br />
<input type="checkbox" name="cid" id="cid" class="cid" value="13"/> Thirteen<br />
<input type="checkbox" name="cid" id="cid" class="cid" value="14"/> Fourteen<br />
You will want to move your jQuery "on" outside of the ThirdCheck function. This should be set on jquery loaded, not when clicking on the checkbox.
$(document).on('click', '.#checkall', function(event) ...
Your problem is the click handler is being set the first time you click and then is being executed the second time you click.
Also, you don't need to include the "." in front of '.#checkall'.
Related
I have two radio buttons and the session to store which button is selected, which I want to access in my second page.
On selection of each radio button, there will be different fields to be displayed in second page which is modal.
For example, if user selects first one (e.g.: date and time filled should be hidden) on second it should display. How to do this?
<td>
<label class="radio-inline"><input type="radio" name="reason" value="1">Executed</label>
</td>
<td>
<label class="radio-inline"><input type="radio" name="reason" value="2">Expired</label>
</td>
<td>
<label class="radio-inline"><input type="radio" name="reason" value="3">Another Option</label>
</td>
and PHP code
//$reason = $_REQUEST['reason']; OR
$reason=$_POST['reason'];
this is your form data and you can change action if you want . suppose first submit form in same page2 then use this code
<form method="post" action="page2.php">
<input type="radio" name="reason" value="1"/>Reason1
<input type="radio" name="reason" value="2"/>Reason2
<input type="radio" name="reason" value="3"/>Reason3
<input type="submit" value="submit"/>
</form>
in second page this is code
and you want to use this value any place then use this code in your any place from project
<?php
session_start();
$reason = $_SESSION['reason'];
echo $reason;
?>
I am using bootstrap for templating. I have a group of checkboxes. I want to use required property of bootstrap but, when I want to use it for group of checkboxes not for individual.
Is there is any way to impletement this.
Here is the reference image http://grab.by/Hm5m
Given
<form>
<input type="checkbox" name="whatever" value="1" required="required" class="required_group" />
<input type="checkbox" name="whatever" value="2" required="required" class="required_group" />
<input type="checkbox" name="whatever" value="3" required="required" class="required_group" />
<input type="checkbox" name="whatever" value="4" required="required" class="required_group" />
<input type="submit" name="submit" />
</form>
You could make it so that the user is required to check at least one checkbox:
$('form').on('click', '.required_group', function(){
$('input.required_group').prop('required', $('input.required_group:checked').length === 0);
});
This solution relies on the HTML5 required attribute (and browser support). It doesn't require any particular Bootstrap code, but it uses jQuery (which you're already using with Bootstrap), so you can customize it with the Bootstrap classes and widgets that make sense for your project.
Can't figure out why the below piece of code makes the textfield disappear upon page refresh (when 'No' radio button selected).
Also, after the page is refreshed the default radio button doesn't get selected.
Forcing refresh, fixes the problem, though.
Any ideas?
<html>
<body>
<div class="editfield">
<div id="field_1">
<label>
<input type="radio" checked="checked" name="radio-1" id="radio-1_id" value="Yes" onclick="document.getElementById('divUrl').style.display='none'">Yes
</label>
<label>
<input type="radio" name="radio-1" id="radio-2_id" value="No" onclick="document.getElementById('divUrl').style.display='block'">No
</label>
</div>
</div>
<div class="editfield" id="divUrl" style="display:none">
<label>Website URL</label>
<input type="text" name="X" id="X_id" value="" />
</div>
</body>
</html>
<!DOCTYPE html>
<html lang="en-US">
<body onLoad="document.getElementById('radio-2_id').checked=false; document.getElementById('radio-1_id').checked=true;">
<div class="editfield">
<div id="field_1">
<input type="radio" checked="checked" name="radio-1" id="radio-1_id" value="Yes" onclick="document.getElementById('divUrl').style.display='none'">
<label for='radio-1_id'>
Yes
</label>
<input type="radio" name="radio-1" id="radio-2_id" value="No" onclick="document.getElementById('divUrl').style.display='block'">
<label for='radio-2_id'>
No
</label>
</div>
</div>
<div class="editfield" id="divUrl" style="display:none">
<label>Website URL</label>
<input type="text" name="X" id="X_id" value="" />
</div>
</body>
</html>
just a short recap:
1. on page refresh the div should disappear (all css and js and html that was dynamically set / added is removed) and the selected radio button should be the first (Yes)
2. tested this on all major browser and it works
3. still can't figure out why it wasn't working on Mozilla and IE without the JS refresh
I moved the radio buttons out of the labels to see if that impacted the refresh in any way and it didn't. Also, I removed an extra </div> that was in the original code.
The page refresh will initiate the page in its' original state. So the
style="display:none"
will be reactivated on the div and will be hidden and the "Yes" button will also be reenabled
what i did have a textarea insert number first ,0 make it readonly
then it will not disappear on refresh,to insert document.getElementById("demo").readOnly=false,and true to enable readonly
I would like to check only one radio button but in my code both radio buttons get selected.
Here is my code its in netsuite.
<input value="<%=getCurrentAttribute('item','internalid')%>" type="radio" name="service_level" onclick="getAddonFromNetsuite(<%=getCurrentAttribute('item','internalid')%>, '<%=getCurrentAttribute('item','pricelevel5')%>');"><label for="radio-2-1"></label>
<input value="INPUT" type="radio" id="radio-2-2" name="service_level_1" onclick="getAddonFromNetsuite(<%=getCurrentAttribute('item','internalid')%>, '<%=getCurrentAttribute('item','pricelevel5')%>');"/><label for="radio-2-2"></label>
here is the link of the site http://shopping.sandbox.netsuite.com/act
Please make the "name" of the radios be same for all.
<input value="<%=getCurrentAttribute('item','internalid')%>" type="radio" name="service_level" onclick="getAddonFromNetsuite(<%=getCurrentAttribute('item','internalid')%>, '<%=getCurrentAttribute('item','pricelevel5')%>');"><label for="radio-2-1"></label>
<input value="INPUT" type="radio" id="radio-2-2" name="service_level" onclick="getAddonFromNetsuite(<%=getCurrentAttribute('item','internalid')%>, '<%=getCurrentAttribute('item','pricelevel5')%>');"/><label for="radio-2-2"></label>
I am trying to parse through a typical form using jquery. I want to obtain all details about the various fields in the form- viz field name, field type (eg radio/checkbox/list)...
How do I determine if a field allows multiple values to be selected? (eg in check box or list box)?
If this cannot be done using jquery, then can it be done using pure javascript? I already have with me a ref to the element for which this (whether multiple values are allowed or not) has to be determined...
Surround your control with some <div> as:
<div id="testCheck">
<input type="checkbox" checked="checked" value="1" />
<input type="checkbox" checked="checked" value="2" />
<input type="checkbox" checked="checked" value="3" />
<input type="checkbox" checked="checked" value="4" />
<input type="checkbox" checked="checked" value="5" />
<input type="checkbox" checked="checked" value="6" />
<input type="checkbox" checked="checked" value="7" />
<input type="checkbox" checked="checked" value="8" />
</div>
and check the selected or unselected elements using follwwing jquery code snippet. .size() will return the no of checked item and you can get the value of selected items by .val().
//Write your code when Document is loaded or some element click
$(document).ready(function() {
$("#testChk").click(function() {
alert($("#testCheck :checked").size());
//function to print the value of each checked checkboxes
$("#testCheck :checked").each(function() {
alert("value = " + $(this).val());
});
for more help follow these links:
How can I know which radio button is selected via jQuery?
have a look on jquery selector. you should watch bottom itms :password, :reset etc that you need to use.
http://api.jquery.com/category/selectors/
http://jquery-howto.blogspot.com/2008/12/how-to-check-if-checkbox-is-checked.html
Handling Checkboxes, Radio Buttons and Select Options in jQuery
Hope this help you little bit...