I have a check box which will change the value of a textfield to 1 when checked and change it back to zero when unchecked, how can I do this? I want it in javascript.
<input type="checkbox" name="foo" onclick="document.getElementById('idtextfield').value = +this.checked;" />
You can do like this:
var chk = document.getElementById('checkbox_id');
var txt = document.getElementById('textbox_id');
chk.onclick = function(){
if (this.checked === true){
txt.value = '1';
}
else{
txt.value = '0';
}
};
window.onload = function() {
var checkBox = document.getElementById('idofcheck');
if (checkBox == null) {
return;
}
checkBox.onclick = function() {
var textField = document.getElementByd('ifoftextfield');
if (textField == null) {
return;
}
if (this.checked) {
textField.value = '1';
} else {
textField.value = '0';
}
};
};
if(document.getElementById("checkbox1").checked)
{
document.getElementById('textbox1').value=1;
}
else
{
document.getElementById('textbox1').value='';
}
Related
I don't want the submit button to be enabled if the default values of the drop-downs are present.
This is the portion of my code which relates to my problem:
function checkSelect(select) {
if (select.value == '-- select an option --') submit.disabled = true;
else submit.disabled = false;
}
(function() {
if (checkSelect(starting)) {
starting.addEventListener('change', function(e) {
startingEventVal = returnAirPort(e.srcElement.value);
console.log('startingEventVal', startingEventVal);
});
}
if (checkSelect(destination)) {
starting.addEventListener('change', function(e) {
startingEventVal = returnAirPort(e.srcElement.value);
console.log('startingEventVal', startingEventVal);
});
}
})();
And this is all of my code:
(function() {
var starting = document.getElementById('starting'),
destination = document.getElementById('destination'),
submit = document.getElementById('submit'),
airportNames = Object.keys(IntentMedia.Airports.airport_distances()),
startingEventVal,
destinationEventVal;
function appendToUL(ul, element) {
var optionEL = document.createElement('option');
optionEL.text = element;
optionEL.value = element;
return ul.appendChild(optionEL);
}
function returnAirPort(airport) {
return airport;
}
function checkSelect(select) {
if (select.value == '-- select an option --') submit.disabled = true;
else submit.disabled = false;
}
airportNames.forEach(function(element) {
appendToUL(starting, element);
appendToUL(destination, element);
});
(function() {
if (checkSelect(starting)) {
starting.addEventListener('change', function(e) {
startingEventVal = returnAirPort(e.srcElement.value);
console.log('startingEventVal', startingEventVal);
});
}
if (checkSelect(destination)) {
starting.addEventListener('change', function(e) {
startingEventVal = returnAirPort(e.srcElement.value);
console.log('startingEventVal', startingEventVal);
});
}
})();
submit.addEventListener('click', function(e) {
e.preventDefault();
var distance = IntentMedia.Distances.distance_between_airports(startingEventVal, destinationEventVal);
console.log('distance', distance);
document.getElementById('feedback').innerHTML = distance;
});
})();
Any help would be appreciated!
Fix this function:
//This is wrong because select.value refers to the value property of the select
//and you are comparing that to the selected option's text
function checkSelect(select) {
if (select.value == '-- select an option --') submit.disabled = true;
else submit.disabled = false;
}
Change it to this:
//Compare the selected option's text to see if it equals the default option text
function checkSelect(select) {
if (select.options[select.selectedIndex].text == '-- select an option --') submit.disabled = true;
else submit.disabled = false;
}
in the click event, try checking for the values of the inputs in an if statement and doing:
return;
to exit the function if they are the default values
I have drop-down and text-box in a gridview and I am trying to check if the selected value of a drop-down is set to "No" and no comments is entered in the text-box then i want to show message. The requirement should be as long as the selected value of the drop down is set to No then comments must be entered in the text-box. My issue is that i am getting the message even if the drop-down is set to Yes or comments is provided when the drop down is set to No. Here is the code:
function validate() {
var flag = false;
var gridView = document.getElementById('<%= GridView1.ClientID %>');
for (var i = 1; i < gridView.rows.length; i++) {
var ddl = gridView.rows[i].getElementsByTagName('Select');
var areas = gridView.rows[i].getElementsByTagName('textarea');
if (ddl != null && ddl.length > 1 && ddl[0] != null && areas != null && areas.length > 1 && areas[0] != null) {
if (areas[0].type == "textarea" && ddl[0].type == "select-one") {
var txtval = areas[0].value;
var txtddl = ddl[0].value;
if (txtddl.value == "No" && (txtval == "" || txtval == null)) {
flag = false;
break;
}
else {
flag = true
}
}
}
}
if (!flag) {
alert('Please note that comments is required if drop down is set to No. Thanks');
areas[i].focus();
}
return flag;
}
</script>
You can do like this:
<script>
function validate() {
var flag = false;
var gridView = document.getElementById('<%= GridView1.ClientID %>');
for (var i = 1; i < gridView.rows.length; i++) {
var selects = gridView.rows[i].getElementsByTagName('select');
//var inputs = gridView.rows[i].getElementsByTagName('input');
var areas = gridView.rows[i].getElementsByTagName('textarea');
if (selects != null && areas != null) {
if (areas[0].type == "textarea") {
var txtval = areas[0].value;
var selectval = selects[0].value;
if (selectval == "No" && (txtval == "" || txtval == null)) {
flag = false;
break;
}
else {
flag = true;
}
}
}
}
if (!flag) {
alert('Please enter comments. Thanks');
}
return flag;
}
</script>
Try this:
$('#select').on('change', function () {
var text = $(this).find(":selected").text();
var textBox = $(this).parent().filter('input [name="InputName"]');
if(text == "no" && textBox.val() =="")
{
\\display your message
}
});
I want to clear the value of an input field (textbox) when the user unchecks a checkbox.
When the user types in the field, I want to check the checkbox.
Edit:
Funny how you get downvotes for doing exactly what StackOverflow recommends:
https://blog.stackoverflow.com/2011/07/its-ok-to-ask-and-answer-your-own-questions/
With this HTML:
<input id="thecheckbox" type="checkbox">
<input id="theinput" type="text">
You can use this javascript:
$("#theinput").keyup(function () {
if ($(this).val() == "") {
$("#thecheckbox").prop("checked", false);
} else {
$("#thecheckbox").prop("checked", true);
}
});
$("#thecheckbox").change(function () {
if (!$(this).is(':checked')) {
$("#theinput").val("");
}
});
It works when using the keyboard for tabbing and/or checking the checkbox.
http://jsfiddle.net/B39Yq/
HTML
<input id="text"/>
<input type="checkbox" id="check"/>
Javascript
$("#text").keyup(function(){
$("#check").get(0).checked = !!$(this).val().trim();
});
$("#check").click(function(){
(this.checked) ? "":$("#text").val("");
});
JS Fiddle: http://jsfiddle.net/p5u64/1/
function onKeyUp(event) {
var target = event.target;
if (target.nodeName && target.nodeName.toLowerCase() === "input") {
if (target.type && target.type == "text") {
changeCheckboxes(this, target.value)
}
}
}
function onChange(event) {
var target = event.target;
if (target.nodeName && target.nodeName.toLowerCase() === "input") {
if (target.type && target.type == "checkbox" && !this.checked) {
clearTextfields(this);
}
}
}
function clearTextfields(form) {
var elements = form.elements;
for (i = elements.length; i--;) {
if (elements[i].type === "text") {
elements[i].value = "";
}
}
}
function changeCheckboxes(form, check) {
var elements = form.elements;
for (i = elements.length; i--;) {
if (elements[i].type === "checkbox") {
elements[i].checked = check;
}
}
}
var form = document.forms[0];
form.addEventListener("keyup", onKeyUp);
form.addEventListener("change", onChange);
form.addEventListener("click", onChange);
I am working with a dynamic element list of checkboxes and I am at a lose as to how I can go about deselecting the elements after I've processed the request: http://jsfiddle.net/Arandolph0/k7uLg/15/
document.attachEvent('onclick', function (e) {
var myBtn = document.getElementById('mybutton')
var target = e.srcElement;
if (target.name == "mycheckbox1" || target.name == "mycheckbox2") {
if(target.checked){
myBtn.disabled = false;
// list.addRecord(target);
} else if(!list.hasItems()) {
myBtn.disabled = true;
target.checked = false;
}
if(list.hasItems()) {
myBtn.disabled = false;
}
}
});
function someFunction() {
alert("Some function");
}
Here's the Html:
<input type="button" id='mybutton' value="Click" disabled onclick="someFunction()"/>
<input type="checkbox" name='mycheckbox1' />
<input type="checkbox" name='mycheckbox2' />
So, in summary after the button has 'do something' how would I then deselect the checked checkboxes?
You could get all of the checkbox elements by type and then set them to false.
function unselect() {
var elements = document.getElementsByTagName('input');
for(var i = 0; i < elements.length; i++)
{
if(elements[i].type.toLowerCase() == 'checkbox')
elements[i].checked = false;
}
}
It isn't very sexy but it gets the job done.
you just need to use
$("input:checkbox").removeAttr("checked");
this will uncheck all the checkboxes. I have also attached working copy of your code.
$(document).click(function (event) {
var myBtn = document.getElementById('mybutton');
var target = event.target;
if (target.name == "mycheckbox1" || target.name == "mycheckbox2") {
if(target.checked){
myBtn.disabled = false;
// list.addRecord(target);
} else if(!list.hasItems()) {
myBtn.disabled = true;
target.checked = false;
}
$("input:checkbox").removeAttr("checked");
if(list.hasItems()) {
myBtn.disabled = false;
}
}
});
I hope this will be able to solve your problem.
I have the following form:
<form name="survey1" action="add5up.php" method="post" onsubmit="return validateForm()">
<div id="question">Q1) My programme meets my expectations</div><br />
Always<INPUT TYPE = 'Radio' Name ='q1' value= 'a'>
Usually<INPUT TYPE = 'Radio' Name ='q1' value= 'b'>
Rarely<INPUT TYPE = 'Radio' Name ='q1' value= 'c'>
Never<INPUT TYPE = 'Radio' Name ='q1' value= 'd'>
<input type="submit" value="addData" />
</form>
I am trying to validate whether a Radio button has been selected.
The code I am using:
<script type="text/javascript">
function validateForm()
{
if( document.forms["survey1"]["q1"].checked)
{
return true;
}
else
{
alert('Please answer all questions');
return false;
}
}
</script>
This is not working. Any ideas?
When using radiobuttons you have to go through to check if any of them is checked, because javascript threats them as an array:
<script type="text/javascript">
function validateRadio (radios)
{
for (i = 0; i < radios.length; ++ i)
{
if (radios [i].checked) return true;
}
return false;
}
function validateForm()
{
if(validateRadio (document.forms["survey1"]["q1"]))
{
return true;
}
else
{
alert('Please answer all questions');
return false;
}
}
</script>
Regards
My solution for validation complex forms include radios.
Usage is simple, function return TRUE/FALSE after validation.
var rs_target is ID of form
scTo is my custom func to scroll to ID, you can use own function to show/scroll errors
scTo("#"+err_target);
Error box will be like
<div class="rq_message_box rq_message_box_firstname display-none">err message</div>
Validation
var validation = validateForm(rs_target);
if(validation == false){
return false;
}
Function
function validateForm(rs_target) {
var radio_arr = [];
var my_form = $("#"+rs_target);
my_form = my_form[0];
$(".rq_message_box").hide(); //clear all errors
//console.log(my_form);
var err = false;
var err_target = "";
for (key in my_form) {
//console.log("do");
if(!my_form[key]||my_form[key]==null||err){
break;
}
//console.log(my_form[key].name);
var x = my_form[key].value;
//console.log(x);
if(my_form[key].type == "radio"){
//console.log("radio");
if(radio_arr[my_form[key].name] != true){
radio_arr[my_form[key].name] = null;
}
if(my_form[key].checked){
radio_arr[my_form[key].name] = true;
}
}else{
if (x == null || x == "") {
//console.log(form[key].name.toString() + " must be filled out");
err = true;
err_target = my_form[key].name;
//return false;
}
}
}
//console.log(radio_arr);
var rad_err = false;
for (key in radio_arr) {
if(rad_err){
break;
}
var x = radio_arr[key];
if (x == null || x == "") {
//console.log("RADIO> "+key + " must be filled out");
rad_err = true;
err_target = key;
}
}
if(err || rad_err){
// some error stuff, for me show prepared error/help box with class [".rq_message_box_"+err_target] / err_target is name of input like [.rq_message_box_firsname]
$(".rq_message_box_"+err_target).show(); //show error message for input
scTo("#"+err_target); //scroll to - custom func
return false;
}else{
return true;
}
}