NO JQUERY! I have two radio buttons and for some reason I can select both of them and I only want to be able to select one. For example, if you select Have a Baby, you can choose both radio buttons. Is there a simple way to fix this? Can someone help me achieve this by fixing the error in my code?
http://jsfiddle.net/LuzkA/
<html>
<head>
<title>Life Event Picker Calendar</title>
<script>
function changeMessage(oElement) {
var rd1 = document.getElementById("rd1");
var rd1Text = rd1.parentNode.getElementsByTagName('span')[0];
var rd2 = document.getElementById("rd2");
var rd2Text = rd2.parentNode.getElementsByTagName('span')[0];
document.getElementById('choice').innerHTML = "Radio Choice=";
rd1.checked = false;
rd2.checked = false;
//nothing
if (oElement.value == "0") {
document.getElementById("btn").style.display = "none";
document.getElementById("radio").style.display = "none";
document.getElementById("day").innerHTML = "Date";
//have a baby
} else if (oElement.value == "100") {
document.getElementById("btn").style.display = "none";
document.getElementById("radio").style.clear = "both";
document.getElementById("radio").style.display = "inline-block";
rd1Text.innerHTML = "C-Section";
rd2Text.innerHTML = "Regular Birth";
rd1.value = "C-Section";
rd2.value = "Regular Birth";
document.getElementById("day").innerHTML = "Anticipated Due Date";
//military leave
} else if (oElement.value == "15") {
document.getElementById("btn").style.display = "none";
document.getElementById("radio").style.clear = "both";
document.getElementById("radio").style.display = "inline-block";
rd1Text.innerHTML = "Training";
rd2Text.innerHTML = "Active Duty";
rd1.value = "Training";
rd2.value = "Active Duty";
document.getElementById("day").innerHTML = "Anticipated Leave Date";
//get married
} else if (oElement.value == "5") {
document.getElementById("btn").style.display = "inline-block";
document.getElementById("radio").style.display = "none";
document.getElementById("day").innerHTML = "Marriage Date";
//adopt a child
} else if (oElement.value == "90") {
document.getElementById("btn").style.display = "inline-block";
document.getElementById("radio").style.display = "none";
document.getElementById("day").innerHTML = "Anticipated Adoption Date";
//retire
} else if (oElement.value == "35") {
document.getElementById("btn").style.display = "inline-block";
document.getElementById("radio").style.display = "none";
document.getElementById("day").innerHTML = "Anticipated Retirement Date";
//medical leave
} else if (oElement.value == "25") {
//document.getElementById("btn").style.display = "inline-block";
document.getElementById("radio").style.display = "none";
document.getElementById("day").innerHTML = "Anticipated Disability Date";
} else {}
return;
}
function showChoice(input) {
document.getElementById('choice').innerHTML = "Radio Choice=" + input.value;
document.getElementById("btn").style.display = "inline-block";
}
//gets info picked and displays messages
function getInfo() {
var myDate=new Date();
var ev_num = parseInt(document.getElementById("leave").value)
myDate.setFullYear(sel_year.value,sel_month.value,sel_day.value);
var event_value = document.getElementById("leave").value;
//document.getElementById("date").innerHTML = "The date you have selected to begin your time of absence is ..." + "<b>" + myDate + "</b>";
//if ((document.getElementById("rd1").checked) == true) {
//document.write(document.getElementById("rd1").value);}
//get married
if (event_value == 5) {
//have a baby
} else if (event_value == 100) {
var first_number = new Date(myDate);
first_number.setDate(myDate.getDate() + 31);
var second_number = new Date(myDate);
second_number.setDate(myDate.getDate() - 30);
var third_number = myDate.getDate() + 7;
var fourth_number;
var fifth_number1;
var fifth_number2;
//if the first radio button has been selected
if ((document.getElementById("rd1").checked) == true) {
fourth_number = myDate.getDate() + 56;
fifth_number1 = myDate.getDate() + 57;
fifth_number2 = myDate.getDate() + 91;
//if the second radio button has been selected
} else {
fourth_number = myDate.getDate() + 42;
fifth_number1 = myDate.getDate() + 43;
fifth_number2 = myDate.getDate() + 91;
}
document.getElementById("message1").innerHTML = "From " + myDate + " through " + first_number + "<br/>" + "You are eligible to update coverage and personal information through your 'Have a Baby' Life Event.";
document.getElementById("message2").innerHTML = "From " + second_number + " through " + myDate + "<br/>" + "1) Call 1-877-968-7762 to initiate your leave. <br/>" + "2) Complete Authorization Release Form.";
//adopt a child
} else if (event_value == 90) {
//retire
} else if (event_value == 35) {
//military leave
} else if (event_value == 15) {
//medical leave
} else if (event_value == 25) {
} else {}
//document.getElementById("event").innerHTML = "Based on the event you have selected you will miss ... " + "<b>" + document.getElementById("leave").value + " days." + "</b>";
//myDate.setDate(myDate.getDate() + ev_num);
//document.getElementById("return").innerHTML = "You will be expected back on ..." + "<b>" + myDate + "</b>";
}
</script>
</head>
<body>
Life Event Picker Calendar<br>
<hr align="left" width="200px"/>
<div id="life" style="display:inline-block;">Life Event</div><div id="day" style="display:inline-block; margin-left:100px;">Date</div><br>
<select style="float:left;" id="leave" onchange="changeMessage(this);">
<option value="0"></option>
<option value="5">Get Married</option>
<option value="100">Have a Baby</option>
<option value="90">Adopt a Child</option>
<option value="35">Retire</option>
<option value="15">Military Leave</option>
<option value="25">Medical Leave</option>
</select>
<div id="calendar-container" style="float:left;" ></div>
<button id="btn" style="display:none;" onclick="getInfo()"type="button">Process</button>
<br>
<div id="radio" style="display:none">
<label><span></span><input type="radio" name="" id="rd1" value="" onclick="showChoice(this)"/></label>
<label><span></span><input type="radio" name="" id="rd2" value="" onclick="showChoice(this)"/></label>
</div>
<div id="choice">Radio Choice</div><br>
<div id="date"></div>
<div id="event"></div>
<div id="return"></div>
<div id="yourdate"></div>
<div id="message1">Message 1</div><br>
<div id="message2">Message 2</div><br>
<div id="message3">Message 3</div><br>
<div id="message4">Message 4</div><br>
<div id="message5">Message 5</div>
You have no name so that is why you can select both of them. Give them the same name! The browser will take care of only letting the user select one.
<input type="radio" name="radiobtn" id="rd1" value="" onclick="showChoice(this)"/>
<input type="radio" name="radiobtn" id="rd2" value="" onclick="showChoice(this)"/>
You have to give the radio buttons a name. easy Peasy
<div id="radio">
<label><span></span><input type="radio" name="boom" id="rd1" value="" onclick="showChoice(this)"/></label>
<label><span></span><input type="radio" name="boom" id="rd2" value="" onclick="showChoice(this)"/></label>
Your radio buttons need the "name" attribute to not be empty.
http://jsfiddle.net/LuzkA/1/
<label><span></span><input type="radio" name="something" id="rd1" value="" onclick="showChoice(this)"/></label>
<label><span></span><input type="radio" name="something" id="rd2" value="" onclick="showChoice(this)"/></label>
Your radio buttons don't have name values.
Only if they have name values they can be grouped as radio buttons
Without name
<form>
<input type="radio" id="id1" name="" value="aa" />aa<br>
<input type="radio" id="id2" name="" value="bb" />bb<br>
</form>
<hr />
With name
<form>
<input type="radio" id="id3" name="a" value="aa" />aa<br>
<input type="radio" id="id4" name="a" value="bb" />bb<br>
</form>
Related
I am new to javascript..I am facing some problems while trying to implement form submit action onclick using javascript..
The problem is when I implement all the validation checks using if-else conditions ..The function dose not produce any result..
[] 1[]2
I have implemented various validation check and tried to capture all possible form elements with different conditions..But I am failing when I am implementing validation check..otherwise the code works -I cannot figure out what is the problem..
Here is the code:
function submitForm() {
var nam = document.getElementById("student_name").value;
if (nam.length == 0 || !(isNAN(nam)) || nam.length > 20) {
nam = "Invalid";
}
var ag = document.getElementById("student_age").value;
if (ag.length == 0 || isNAN(ag) || ag.parseInt() > 100) {
age = "Invalid";
}
var gender = document.getElementById("g1").value;
if (document.getElementById("g1").checked) {
gender = document.getElementById("g1").value;
} else if (document.getElementById("g2").checked) {
gender = document.getElementById("g1").value;
} else {
alert("You must select a gendrer!!");
}
var cty = document.getElementById("city").value;
var pan = document.getElementById("h1").value;
var dan = document.getElementById("h2").value;
var sprt = document.getElementById("h3").value;
if (document.getElementById("h1").checked) {
var pan = document.getElementById("h1").value;
pan = pan + "#";
} else {
pan = "";
}
if (document.getElementById("h2").checked) {
var dan = document.getElementById("h2").value;
dan = dan + "#";
} else {
dan = "";
}
if (document.getElementById("h3").checked) {
var sprt = document.getElementById("h3").value;
sprt = sprt + "#";
} else {
spt = "";
}
var hobbies = pan + "" + dan + "" + sprt
document.getElementById("name").innerHTML = nam; //document.getElementById("student_name").value;
document.getElementById("age").innerHTML = ag; //document.getElementById("student_age").value;
document.getElementById("gd").innerHTML = gender;
document.getElementById("ct").innerHTML = cty; //document.getElementById("city").value;
document.getElementById("hb").innerHTML = hobbies; //document.getElementById("h1").value;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>MyTest</title>
</head>
<body style="background:pink;">
<div id="body">
<form>
<br><br>
<span id="name_label" style="background:yellow;">Student Name</span> <input type="text" id="student_name" style="background:yellow;"> <br><br>
<span id="age_label" style="background:yellow;">Age</span> <input type="text" id="student_age" style="background:yellow;"><br><br> Gender <input type="radio" value="male" name="gender" id="g1">M
<input type="radio" value="female" name="gender" id="g2">F<br>
<br><br> City
<select id="city">
<option value="Delhi">Delhi</option>
<option value="Mumbai">Mumbai</option>
<option value="Kolkata">Kolkata</option>
<option value="Chennai">Chennai</option>
</select><br><br>
<label>Hobby </label> <input type="checkbox" id="h1" value="Painting">Painting
<input type="checkbox" id="h2" name="cbox" value="Dancing">Dancing
<input type="checkbox" id="h3" name="cbox" value="Sports">Singing
<br><br>
</form>
<input type="submit" value="Submit" id="student_submit" onclick="submitForm()">
<div>
<label>Name:</label><span id="name"></span><br>
<label>Age:</label><span id="age"></span><br>
<label>Gender:</label><span id="gd"></span><br>
<label>City:</label><span id="ct"></span><br>
<label>Hobbies:</label><span id="hb"></span><br>
</div>
</div>
</body>
</html>
The first error is at these lines
var nam=document.getElementById("student_name").value;
if(nam.value.length==0 || !(isNAN(nam)) || nam.value.length>20){
nam="Invalid";
}
nam is the value of the input again doing nam.value will throw an error
Secondly isNAN is not a javascript inbuilt function. Case matters while using in build function , it has to be isNaN
Thirdly ag.parseInt() is wrong. Instead it has to be parseInt(ag,10) where 10 is the radix
function submitForm() {
var nam = document.getElementById("student_name").value;
if (nam.length == 0 || !(isNaN(nam)) || nam.length > 20) {
nam = "Invalid";
}
var ag = document.getElementById("student_age").value;
if (ag.length == 0 || isNaN(ag) || parseInt(ag, 10) > 100) {
age = "Invalid";
}
var gender = document.getElementById("g1").value;
if (document.getElementById("g1").checked) {
gender = document.getElementById("g1").value;
} else if (document.getElementById("g2").checked) {
gender = document.getElementById("g1").value;
} else {
alert("You must select a gendrer!!");
}
var cty = document.getElementById("city").value;
var pan = document.getElementById("h1").value;
var dan = document.getElementById("h2").value;
var sprt = document.getElementById("h3").value;
if (document.getElementById("h1").checked) {
var pan = document.getElementById("h1").value;
pan = pan + "#";
} else {
pan = "";
}
if (document.getElementById("h2").checked) {
var dan = document.getElementById("h2").value;
dan = dan + "#";
} else {
dan = "";
}
if (document.getElementById("h3").checked) {
var sprt = document.getElementById("h3").value;
sprt = sprt + "#";
} else {
spt = "";
}
var hobbies = pan + "" + dan + "" + sprt
document.getElementById("name").innerHTML = nam; //document.getElementById("student_name").value;
document.getElementById("age").innerHTML = ag; //document.getElementById("student_age").value;
document.getElementById("gd").innerHTML = gender;
document.getElementById("ct").innerHTML = cty; //document.getElementById("city").value;
document.getElementById("hb").innerHTML = hobbies; //document.getElementById("h1").value;
}
<div id="body">
<form>
<br><br>
<span id="name_label" style="background:yellow;">Student Name</span> <input type="text" id="student_name" style="background:yellow;"> <br><br>
<span id="age_label" style="background:yellow;">Age</span> <input type="text" id="student_age" style="background:yellow;"><br><br> Gender <input type="radio" value="male" name="gender" id="g1">M
<input type="radio" value="female" name="gender" id="g2">F<br>
<br><br> City
<select id="city">
<option value="Delhi">Delhi</option>
<option value="Mumbai">Mumbai</option>
<option value="Kolkata">Kolkata</option>
<option value="Chennai">Chennai</option>
</select><br><br>
<label>Hobby </label> <input type="checkbox" id="h1" value="Painting">Painting
<input type="checkbox" id="h2" name="cbox" value="Dancing">Dancing
<input type="checkbox" id="h3" name="cbox" value="Sports">Singing
<br><br>
</form>
<input type="submit" value="Submit" id="student_submit" onclick="submitForm()">
<div>
<label>Name:</label><span id="name"></span><br>
<label>Age:</label><span id="age"></span><br>
<label>Gender:</label><span id="gd"></span><br>
<label>City:</label><span id="ct"></span><br>
<label>Hobbies:</label><span id="hb"></span><br>
</div>
</div>
This might help you
function submitForm()
{
var nam = document.getElementById("student_name").value;
if (!(nam) || nam.length > 20)
{
alert("please Select a valid name");
return false;
}
var ag = document.getElementById("student_age").value;
if (!(ag) || ag > 100)
{
alert("please Select a valid age");
return false;
}
var gender = "";
if(!document.getElementById("g1").checked && !document.getElementById("g2").checked )
{
alert("please Select gender");
return false;
}
else
{
if(document.getElementById("g1").checked)
{
gender = document.getElementById("g1").value;
}
else
{
gender = document.getElementById("g2").value;
}
}
var cty = document.getElementById("city").value;
if (!(cty) || cty=="Default")
{
alert("please Select a city");
return false;
}
var hobbies ="";
if(!document.getElementById("h1").checked && !document.getElementById("h2").checked && !document.getElementById("h3").checked)
{
alert("please Select hobby");
return false;
}
else
{
var inputElements = document.getElementsByName("cbox");
for(var i=0; inputElements[i]; ++i){
if(inputElements[i].checked){
var value=" "+ inputElements[i].value;
hobbies +=value;
}
}
}
document.getElementById("name").innerHTML = nam; //document.getElementById("student_name").value;
document.getElementById("age").innerHTML = ag; //document.getElementById("student_age").value;
document.getElementById("gd").innerHTML = gender;
document.getElementById("ct").innerHTML = cty; //document.getElementById("city").value;
document.getElementById("hb").innerHTML = hobbies; //document.getElementById("h1").value;
return true;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>MyTest</title>
<script type="text/javascript" src="index.js"></script>
</head>
<body style="background:pink;">
<div id="body">
<form action="#" method="post" onsubmit="return false">
<br><br>
<span id="name_label" style="background:yellow;">Student Name</span> <input type="text" id="student_name" style="background:yellow;"> <br><br>
<span id="age_label" style="background:yellow;">Age</span> <input type="text" id="student_age" style="background:yellow;"><br><br> Gender <input type="radio" value="male" name="gender" id="g1">M
<input type="radio" value="female" name="gender" id="g2">F<br>
<br><br> City
<select id="city">
<option value="Default">Select City</option>
<option value="Delhi">Delhi</option>
<option value="Mumbai">Mumbai</option>
<option value="Kolkata">Kolkata</option>
<option value="Chennai">Chennai</option>
</select><br><br>
<label>Hobby </label>
<input type="checkbox" id="h1" name="cbox" value="Painting">Painting
<input type="checkbox" id="h2" name="cbox" value="Dancing">Dancing
<input type="checkbox" id="h3" name="cbox" value="Sports">Singing
<br><br>
<input type="submit" value="Submit" onclick="submitForm()">
</form>
<div>
<label>Name:</label><span id="name"></span><br>
<label>Age:</label><span id="age"></span><br>
<label>Gender:</label><span id="gd"></span><br>
<label>City:</label><span id="ct"></span><br>
<label>Hobbies:</label><span id="hb"></span><br>
</div>
</div>
</body>
</html>
i want to consult issue about javascript jquery
i want this value > 20 && < 40 clear or reset option in jquery suggestion please.
It looks function error in javascript and function no clear and reset option. but function show display block wrong position .
<script>
function Checkbox() {
var length = document.tester.selection.length;
var $result = "";
var chked = 0;
for (i = 0; i < length; i++) {
if (document.tester.selection[i].checked) {
$result += document.tester.selection[i].value;
}
}
var getdata = $result;
}
var checked, checkedValues = new Array();
$("input[type=checkbox]").change(function(e) {
var selectedtext = ($(this).next().text());
if ($(this).is(':checked')) {
$("#showdatacheckbox").append('<option value="' + selectedtext + '">' + selectedtext + '</option>');
} else {
$('option[value*="' + selectedtext + '"]').remove();
}
});
function range(val) {
document.getElementById('number').value = val;
}
prefer = document.getElementById("number").value;
if (prefer > 20 && prefer < 40) {
document.getElementById("wordingprogrammer").style.display = "none";
document.getElementById("wordingsenior").style.display = "none";
} else {
document.getElementById("wordingprogrammer").style.display = "block";
document.getElementById("wordingsenior").style.display = "block";
}
</script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form action="" method="post" id="tester" name="tester">
<input type="checkbox" class="iconDirector" name="selection" id="Director" value="1" onclick="Checkbox()">
<label id="wordingdirector">Director</label>
<input type="checkbox" class="iconProgrammer" name="selection" id="Programmer" value="2" onclick="Checkbox()">
<label id="wordingprogrammer">Programmer</label>
<input type="checkbox" class="iconSenior" name="selection" id="Senior" value="3" onclick="Checkbox()">
<label id="wordingsenior">Senior</label>
<input type="range" name="rangeInput" min="0" max="100" onchange="range(this.value);">
<input type="text" id="number" value="">
</form>
<a id="showdatacheckbox"></a>
function Checkbox() {
var length = document.tester.selection.length;
var $result = "";
var chked = 0;
for (i = 0; i < length; i++) {
if (document.tester.selection[i].checked) {
$result += document.tester.selection[i].value;
}
}
var getdata = $result;
}
var checked, checkedValues = new Array();
$("input[type=checkbox]").change(function (e) {
var selectedtext = ($(this).next().text());
if ($(this).is(':checked')) {
$("#showdatacheckbox").append('<option value="' + selectedtext + '">' + selectedtext + '</option>');
} else {
$('option[value*="' + selectedtext + '"]').remove();
}
});
function range(val) {
document.getElementById('number').value = val;
if (val > 20 && val < 40) {
$("input[type='checkbox']:checked").click();
}
}
prefer = document.getElementById("number").value;
if (prefer > 20 && prefer < 40) {
document.getElementById("wordingprogrammer").style.display = "none";
document.getElementById("wordingsenior").style.display = "none";
} else {
document.getElementById("wordingprogrammer").style.display = "block";
document.getElementById("wordingsenior").style.display = "block";
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form action="" method="post" id="tester" name="tester">
<input type="checkbox" class="iconDirector" name="selection" id="Director" value="1" onclick="Checkbox()" />
<label id="wordingdirector">Director</label>
<input type="checkbox" class="iconProgrammer" name="selection" id="Programmer" value="2" onclick="Checkbox()" />
<label id="wordingprogrammer">Programmer</label>
<input type="checkbox" class="iconSenior" name="selection" id="Senior" value="3" onclick="Checkbox()" />
<label id="wordingsenior">Senior</label>
<input type="range" name="rangeInput" min="0" max="100" onchange="range(this.value);" />
<input type="text" id="number" value="" />
</form>
<a id="showdatacheckbox"></a>
I modified an existing fiddle to get a comprehensive solution for multiple checkboxes with select/unselect functionality. Now, it counts how many checkboxes checked and also gives which the checkboxes checked. It looks like it works fine but there are some points to fix and needs to improve it a bit more:
When you first check the option A and then click the "Select All" checkbox, the system does not work well.
The whole code looks like it's a bit long. I think we can shorten the code someway but I don't know how.
When we check all options manually, the firstgroup checkbox should automatically be checked or otherwise when any of the options are unchecked, the firstgroup checkbox should automatically unchecked. And accordingly, the div contents should change.
Thanks for any contribution.
<div style="margin-left: 20px;">
<input type="checkbox" id="firstgroup" /> Select All<br>
<input type="checkbox" class="order" id="first" /> A<br>
<input type="checkbox" class="order" id="second" /> B<br>
<input type="checkbox" class="order" id="third" /> C
</div>
<div id="result"></div>
<div id="form">Lorem ipsum</div>
x = document.getElementById("result");
y = document.getElementById("form");
x.innerHTML = '';
y.innerHTML = '';
$("#firstgroup").click(function() {
var checkBoxes = $("input[type='checkbox'].order");
checkBoxes.prop("checked", !checkBoxes.prop("checked"));
});
$("input[type='checkbox'].order").change(function() {
var check = $("input[type='checkbox'].order:checked").length;
var tnocb = $("input[type='checkbox'].order").length;
var classes = $("input[type='checkbox'].order:checked").map(function() {
return this.id;
}).get().join(", ");
if(check > 0) {
if(check == 1) {
x.innerHTML = 'Checked Checkbox: ' + classes + '<br>Total number of checked checkbox: ' + check;
} else if(check == tnocb) {
x.innerHTML = 'all of them are checked';
} else {
x.innerHTML = 'Checked Checkboxes: ' + classes + '<br>Total number of checked checkboxes: ' + check;
}
y.style.display = 'block';
} else {
x.innerHTML = '';
y.style.display = 'none';
}
return false;
});
$("#firstgroup").click(function() {
$('#form').text('');
$('#result').text('');
$('input:checkbox').not(this).prop('checked', this.checked);
if ($(".order:checked").length == 3) {
$('#form').text('all of them are checked');
}
});
$(".order").on('click', function() {
var selectedItems = '';
$('#result').text('');
$('#form').text('');
if ($(".order:checked").length == 3) {
$('#form').text('all of them are checked');
$("#firstgroup").prop('checked','checked');
} else if ($(".order:checked").length > 0) {
$("#firstgroup").prop('checked','');
$(".order:checked").each(function(i, d) {
selectedItems += d.id + ',';
});
$('#result').text('Checked Checkboxes: ' + selectedItems.substring(0, selectedItems.length - 1));
$('#form').text('Total number of checked checkboxes: ' + $(".order:checked").length);
}
});
<div style="margin-left: 20px;">
<input type="checkbox" id="firstgroup" /> Select All<br>
<input type="checkbox" class="order" id="first" /> A<br>
<input type="checkbox" class="order" id="second" /> B<br>
<input type="checkbox" class="order" id="third" /> C
</div>
<div id="result"></div>
<div id="form"></div>
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
The first issue
$("#firstgroup").click(function() {
var checkBoxes = $("input[type='checkbox'].order");
checkBoxes.prop("checked", $("#firstgroup").prop("checked"));
});
The second issue I can not fix.
$("#firstgroup").click(function () {
if ($("#firstgroup[type='checkbox']:checked"));
{
$("#firstgroup").siblings("input[type='checkbox']").prop('checked', true);
}
});
maybe it helps you.
<div style="margin-left: 20px;">
<input type="checkbox" id="firstgroup" /> Select All<br>
<input type="checkbox" class="order" id="first" /> A<br>
<input type="checkbox" class="order" id="second" /> B<br>
<input type="checkbox" class="order" id="third" /> C
</div>
<div id="result"></div>
<div id="form">Lorem ipsum</div>
<script type="text/javascript">
x = document.getElementById("result");
y = document.getElementById("form");
x.innerHTML = '';
y.innerHTML = '';
$("#firstgroup").click(function() {
var checkBoxes = $("input[type='checkbox'].order");
checkBoxes.prop("checked", !checkBoxes.prop("checked"));
$('.order').not(this).prop('checked', this.checked); //it will check and uncheck all checkbox
});
$("input[type='checkbox'].order").change(function() {
var check = $("input[type='checkbox'].order:checked").length;
var tnocb = $("input[type='checkbox'].order").length;
var classes = $("input[type='checkbox'].order:checked").map(function() {
return this.id;
}).get().join(", ");
if(check > 0) {
if(check == 1) {
x.innerHTML = 'Checked Checkbox: ' + classes + '<br>Total number of checked checkbox: ' + check;
} else if(check == tnocb) {
x.innerHTML = 'all of them are checked';
} else {
x.innerHTML = 'Checked Checkboxes: ' + classes + '<br>Total number of checked checkboxes: ' + check;
}
y.style.display = 'block';
} else {
x.innerHTML = '';
y.style.display = 'none';
}
return false;
});
</script>
I updated the multiple checkboxes with Select All's code: http://jsfiddle.net/LUtJF/42/
Now, you can
Get the number of checked checkboxes
Get the labels of the checked checkboxes
Get a message when all the checkboxes are checked
When you select all the checkboxes, the "Select All" checkbox is also checked automatically, or vice versa.
The system is responsive. Whenever you add a new option, no need to change any code.
Thanks for all your contribution and hope you'll find this last version useful.
Ahmet Arduc
www.ahmath.com
<div style="margin-left: 20px;">
<input type="checkbox" id="firstgroup" /> Select All<br>
<input type="checkbox" class="order" id="first" /> A<br>
<input type="checkbox" class="order" id="second" /> B<br>
<input type="checkbox" class="order" id="third" /> C<br>
<input type="checkbox" class="order" id="forth" /> D
</div>
<div id="result"></div>
<div id="form"></div>
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
$("#firstgroup").click(function() {
$('#form').text('');
$('#result').text('');
$('input:checkbox').not(this).prop('checked', this.checked);
if($(".order:checked").length == $(".order").length) {
$('#form').text('all of them are checked');
}
});
$(".order").on('click', function() {
var selectedItems = '';
$('#result').text('');
$('#form').text('');
if ($(".order:checked").length == $(".order").length) {
$('#firstgroup').prop('checked', true);
$('#form').text('all of them are checked');
} else if ($(".order:checked").length > 0) {
$('#firstgroup').prop('checked', false);
$(".order:checked").each(function(i, d) {
selectedItems += d.id + ',';
});
$('#result').text('Checked Checkboxes: ' + selectedItems.substring(0, selectedItems.length - 1));
$('#form').text('Total number of checked checkboxes: ' + $(".order:checked").length);
}
});
I am new in javascript and PHP. I am creating a form where I need an option that user clicks on add fields then some fields add.
I am using this script:
<script type="text/javascript">
var counter = 1;
var limit = 3;
function addInput(divName){
if (counter == limit) {
alert("You have reached the limit of adding " + counter + " inputs");
}
else {
var newdiv = document.createElement('div');
newdiv.innerHTML = "Entry " + (counter + 1) + " <br><input type='text' name='myInputs[]'>";
document.getElementById(divName).appendChild(newdiv);
counter++;
}
}
</script>
Entry 1
and it's working but I need this code in the inner HTML
<label>Category <strong>*</strong></label>
<font id=catname>
<select name='catname'>
<option value='0'>============</option>
</select></font>
<label>Item<strong>*</strong></label><font id=itemname>
<select disabled='disabled' name='itemname'>
<option value='0'></option>
</select></font>
So how can I put these fields ?
Complete Code
<script type="text/javascript">
var counter = 1;
var limit = 3;
function addInput(divName){
if (counter == limit) {
alert("You have reached the limit of adding " + counter + " inputs");
}
else {
var newdiv = document.createElement('div');
newdiv.innerHTML = "Entry " + (counter + 1) + " <br><input type='text' name='myInputs[]'>";
document.getElementById(divName).appendChild(newdiv);
counter++;
}
}
</script>
<div class="form-style-5" style="margin-left: 360px;">
<form name="form1" method="post" action="outgoingstocksave.php">
<fieldset>
<legend><span class="number"> </span> Outgoing Stocks Entry</legend>
<label>Ref. No.</label>
<input type="text" readonly="readonly" name="refno" value="<?php echo $refno; ?>">
<div id="dynamicInput">
<label>Category <strong>*</strong></label>
<font id=catname>
<select name='catname'>
<option value='0'>============</option>
</select></font>
<label>Item<strong>*</strong></label><font id=itemname>
<select disabled='disabled' name='itemname'>
<option value='0'></option>
</select></font>
<input type="number" name="quantity" maxlength="10" placeholder="ITEM QUANTITY *" required>
</div>
<input type="text" name="date" readonly="readonly" id="datepicker" placeholder="DATE *" required>
</fieldset>
<input type="submit" value="Save" />
</form>
</div>
<script language=Javascript>
function Inint_AJAX() {
try { return new ActiveXObject("Msxml2.XMLHTTP"); } catch(e) {} //IE
try { return new ActiveXObject("Microsoft.XMLHTTP"); } catch(e) {} //IE
try { return new XMLHttpRequest(); } catch(e) {} //Native Javascript
alert("XMLHttpRequest not supported");
return null;
};
function dochange(src, val) {
var req = Inint_AJAX();
req.onreadystatechange = function () {
if (req.readyState==4) {
if (req.status==200) {
document.getElementById(src).innerHTML=req.responseText; //retuen value
}
}
};
req.open("GET", "itemsfill.php?data="+src+"&val="+val); //make connection
req.setRequestHeader("Content-Type", "application/x-www-form-urlencoded;charset=iso-8859-1"); // set Header
req.send(null); //send value
}
window.onLoad=dochange('catname', -1); // value in first dropdown
</script>
I did a test on something similar a couple years back. See if you can hack this up for your needs.
Script...
<script type = "text/javascript">
var cnt = 0;
function addFile() {
var div = document.createElement('DIV');
div.innerHTML = '<input id="file' + cnt + '" name="file' + '' + '" type="file" />' +
'<input id="Button' + cnt + '" type="button" ' + 'value="X" onclick="deleteFile(this)" />';
document.getElementById("uploadControls").appendChild(div);
cnt++;
buttonText();
}
function deleteFile(div) {
document.getElementById("uploadControls").removeChild(div.parentNode);
cnt--;
buttonText();
}
function buttonText() {
if (cnt > 0) {
document.myform.add_button.value = 'Add Another Attachment';
} else {
document.myform.add_button.value = 'Add Attachment';
}
}
</script>
HTML...
<form name="myform" action="<your thing>" method="post" enctype="multipart/form-data" style="display:inline;">
<input id="add_button" type="button" value="Add Attachment" onclick="addFile()" />
<br /><br />
<div id="uploadControls"></div>
<br/>
<input type="submit" value="Submit" name="action">
</form>
i was wondering if i can make the title of an accordion a button as well without the button feeling?
here is a picture of the accordion title and some data inside it?
i want to click on the text that is in the title to navigate to a page...
using phonegap/cordova v1.9. Visual studio 2010 express for windows phone/html,CSS,javascript (c#)
any help will be appreciated :) im open to a solution in anyway, including jquery's
title is
inboxentry1 POS556445
I have made the accordion in a bunch of div's that stacked into eachother...
tell me if i must add anything else to help with the solution!
here is some html for the accordion!
<div id="AccordionContainer" class="AccordionContainer"></div>
<div onclick="runAccordion(1)">
<div class="Accordiontitle" onselectstart="return false;">
<input type="button" href="ItemPages.html">inbox entry1</input>
<br/>
<a>POS556446x</a>
</div>
</div>
<div id="Accordion1Content" class="AccordionContent" style="background-color:white; color:grey;">
<form>
<p>
<label for="create" >Created by :</label>
<input type="text" style="margin-left:60px;" size="22" id="create"/>
</p>
<p>
<label for="createdate" >Created Date :</label>
<input type="text" style="margin-left:43px;" size="22" id="createdate"/>
</p>
<p>
<label for="process" >Process name :</label>
<input type="text" style="margin-left:36px;" size="22" id="process"/>
</p>
<p>
<label for="transtype">Transaction type :</label>
<input type="text" style="margin-left:20px;" size="22" id="transtype"/>
</p>
<p>
<label for="lastact">Last action :</label>
<input type="text" style="margin-left:61px;" size="22" id="lastact"/>
</p>
<p>
<label for="lastuser">Last user :</label>
<input type="text" style="margin-left:73px;" size="22" id="lastuser"/>
</p>
<p>
<label for="lastupd">Last update :</label>
<input type="text" style="margin-left:55px;" size="22" id="lastupd"/>
</p>
<p>
<label for="duration">Duration :</label>
<input type="text" style="margin-left:78px;" size="22" id="duration"/>
</p>
<p>
<label for="saved">Saved :</label>
<input type="text" style="margin-left:93px;" size="22" id="saved"/>
</p>
<p>
<label for="adhoc">Ad hoc user :</label>
<input type="text" style="margin-left:53px;" size="22" id="adhoc"/>
</p>
</form>
</div>
here is my .js file
var ContentHeight = 200;
var TimeToSlide = 250.0;
var openAccordion = '';
function runAccordion(index) {
var nID = "Accordion" + index + "Content";
if (openAccordion == nID)
nID = '';
setTimeout("animate(" + new Date().getTime() + "," + TimeToSlide + ",'" + openAccordion + "','" + nID + "')", 33);
openAccordion = nID;
}
function animate(lastTick, timeLeft, closingId, openingId) {
var curTick = new Date().getTime();
var elapsedTicks = curTick - lastTick;
var opening = (openingId == '') ? null : document.getElementById(openingId);
var closing = (closingId == '') ? null : document.getElementById(closingId);
if (timeLeft <= elapsedTicks) {
if (opening != null)
opening.style.height = ContentHeight + 'px';
if (closing != null) {
closing.style.display = 'none';
closing.style.height = '0px';
}
return;
}
timeLeft -= elapsedTicks;
var newClosedHeight = Math.round((timeLeft / TimeToSlide) * ContentHeight);
if (opening != null) {
if (opening.style.display != 'block')
opening.style.display = 'block';
opening.style.height = (ContentHeight - newClosedHeight) + 'px';
}
if (closing != null)
closing.style.height = newClosedHeight + 'px';
setTimeout("animate(" + curTick + "," + timeLeft + ",'" + closingId + "','" + openingId + "')", 33);
}
You probably want to make some changes here. A few classes have been added and the button tag changed as it wasn't correct. Your want to remove the inline event you have for the accordion and stick it where commmented below.
<div class="AccordionRun">
<div class="Accordiontitle" onselectstart="return false;">
<input class="AccordionLink" type="button" href="ItemPages.html" value="inbox entry1">
<br/>
<a>POS556446x</a>
</div>
</div>
Then you can get it and add a click event to it...
var goToPage = function(elem) {
elem.onclick = function() {
alert('Go to page...');
window.location = elem.href;
};
};
var runAccordion = function(elem) {
elem.onclick = function() {
alert('Run Accordion...');
// Your accordion code goes here...
};
};
var buttons = document.getElementsByTagName('input');
for(var i=0; i < buttons.length; i++) {
if (buttons[i].className == 'AccordionLink') {
goToPage(buttons[i]);
}
}
var divs = document.getElementsByTagName('div');
for(var i=0; i < divs.length; i++) {
if (divs[i].className == 'AccordionRun') {
runAccordion(divs[i]);
}
}
jsfiddle.net/FKt4K/2
If you'd like to navigate to an other page on click of an input field, here's a simpe work-around.. Just bind it to a mouseup-event like so (needs a jQuery implemention):
UPDATED CODE
HTML:
<input class="followThisRel" type="button" rel="http://yoursite.com/">
JS:
$(function() {
$('input.followThisRel').on('click', function() {
var url = $(this).attr('rel');
window.location = url;
});
})