I've got some code for disabling textfields when radio is not checked working but only using internal coding. Whenever I try putting it on external page it won't work.
Can someone point me where I made mistake?
<script>
window.onload = function() {
document.getElementById('Ingredient').onchange = disablefield;
document.getElementById('Misc').onchange = disablefield;
document.getElementById('Size').disabled = false;
document.getElementById('Color').disabled = false;
document.getElementById('Brandname').disabled = false;
document.getElementById('Misc').checked = false;
document.getElementById('Ingredient').checked = false;
}
function disablefield()
{
if (document.getElementById('Ingredient').checked == true ){
document.getElementById('Brandname').value = '';
document.getElementById('Size').value = '';
document.getElementById('Color').value = '';
document.getElementById('Size').disabled = true;
document.getElementById('Color').disabled = true;
document.getElementById('Brandname').disabled = false;}
else if (document.getElementById('Misc').checked == true ){
document.getElementById('Brandname').value = '';
document.getElementById('Size').value = '';
document.getElementById('Color').value = '';
document.getElementById('Size').disabled = false;
document.getElementById('Color').disabled = false;
document.getElementById('Brandname').disabled = true;}
}
</script>
I did put this code in the head part on html
<script type="text/javascript" src="Additem.js"></script>
radio button codes
<input name="ItemType" type="radio" value="Ingredient" id="Ingredient" onclick="disablefield()"/>
Ingredient
<input name="ItemType" type="radio" value="Misc" id="Misc" onclick="disablefield()"/>
Misc. Item
textfield codes
<input type="text" name="Brandname" id="Brandname"/>
<input type="text" name="Size" id="Size"/>
<input type="text" name="Color" id="Color"/>
Try putting this in the bottom of the document, before the </body tag:
<script type="text/javascript" src="Additem.js"></script>
Related
Good day everyone, my instructor gave me an assignment on checkboxes and input fields, he wants the input field to be disabled on default, and open the field once the corresponding checkbox is checked and store the value on that field, and if I un-check the box again, the field should be clear and if I check the same box again, the last input value on the field should show again. I am able to succeed but I found a bug I can't solve, if I check an empty box, my previous stored value from the field becomes null again. I already put my variable in global scope but still the variable becomes null. (sorry for my english).
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<input type="checkbox" id="check1" onclick="send()">
<input type="text" id="input1" disabled><br>
<input type="checkbox" id="check2" onclick="send()">
<input type="text" id="input2" disabled><br>
<script>
var val1 = null;
var val2 = null;
function send() {
var check1 = document.getElementById('check1').checked;
var check2 = document.getElementById('check2').checked;
var input1 = document.getElementById('input1');
var input2 = document.getElementById('input2');
if(check1) {
input1.disabled = false;
input1.value = val1;
} else {
input1.disabled = true;
val1 = document.getElementById('input1').value;
input1.value = null;
}
if(check2) {
input2.disabled = false;
input2.value = val2;
} else {
val2 = document.getElementById('input2').value
input2.disabled = true;
input2.value = null;
}
}
</script>
</body>
</html>
The problem in your case is that you are handling boths checkboxes together, you need to seperate the processing so that all your checkbox/input combinations are independant from one another.
I altered the send function to take parameters and update the corresponding nodes accordingly and updated your HTML to fit.
// create data in which values have keys as the IDs of the inputs
var data = {
input1: null,
input2: null
};
function send(checkboxId, inputId) {
// get checkbox and input
let checkbox = document.getElementById(checkboxId);
let input = document.getElementById(inputId);
// handle checkbox and input state
input.disabled = !checkbox.checked;
if (checkbox.checked) {
input.value = data[inputId];
}
else {
data[inputId] = input.value;
input.value = null;
}
}
<input type="checkbox" id="check1" onclick="send('check1', 'input1')">
<input type="text" id="input1" disabled><br>
<input type="checkbox" id="check2" onclick="send('check2', 'input2')">
<input type="text" id="input2" disabled><br>
Hope this helps.
Try this:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<input type="checkbox" id="check1" onclick="sending(this.checked, 1)">
<input type="text" id="input1" disabled onblur="store(this.value, 1)"><br>
<input type="checkbox" id="check2" onclick="sending(this.checked, 2)">
<input type="text" id="input2" disabled onblur="store(this.value, 2)"><br>
<script>
var val1 = null;
var val2 = null;
function sending(isChecked, which) {
var check = which === 1 ? 'input1' : 'input2';
var field = document.getElementById(check);
if (!isChecked) {
field.value = null;
} else {
field.value = which === 1 ? val1 : val2;
}
field.disabled = !isChecked;
}
function store(val, which) {
if (which === 1) {
val1 = val;
} else {
val2 = val;
}
}
</script>
</body>
</html>
<div class="masterform type-selection">
<div class="radio"><span><input type="radio" name="feature_value_6" value="10" required=""></span></div><label>Cool</label>
function ShowLoading() {
var verif = true;
$(".masterform input").each(function() {
if($(this).val() == ""){
verif = false;
}
});
var radio = false;
$(".type-selection div.radio span").each(function() {
if($('.masterform input[type=radio]:checked').size() > 0){
radio = true;
}
});
if(verif == true && radio == true){
window.loading_screen = window.pleaseWait({
blabla }); }
}
i tried everything , the variable send me true but when i use this verification on radio input nothing work. my function work only when i stop the submit on my form by clicking on the cross of my safari navigator !
Everything works fine on chrome but cant make it work on safari
I cleaned up your code. Looks like you just need to use length instead of $.size()
var radio = false;
$(".type-selection div.radio span").each(function() {
if ($('.masterform input[type=radio]:checked').length > 0) {
radio = true;
}
console.log(radio);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="masterform type-selection">
<div class="radio">
<span>
<input type="radio" name="feature_value_6" value="10" required="" checked>
</span>
</div>
<label>Cool</label>
</div>
Try to use the "prop" property of jQuery, like this:
$(".type-selection div.radio span input[type='radio']").each(function(elemIndex, domElement) { //Each radio
if($(domElement).prop('checked')){
radio = true;
}
});
I have a button known as "Prepare Questions". Now when I click on this button, this button does two things, using the validaton() function it validates the form so that if there is an error in the form (empty textbox and radio button not selected) then it displays the suitable error messages on the page. But also the button uses the "openSessionPopup" function so that it opens up a pop up window which states the word "Session".
The problem is that when I click on the button it does both functions, so it displays validation errors if there is some and also opens up the pop up window.
What I want to do is that the pop up window should only be displayed after there are no validation errors. But I can't seem to get this to work, does anyone else know how to do this.
Below is my code:
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<title>Create a Session</title>
<script type="text/javascript">
function validation() {
var btnRadioO = document.getElementsByName("sessionNo");
var isbtnRadioChecked = false;;
var dateTextO = document.getElementById("datepicker");
var timeTextO = document.getElementById("timepicker");
var errMsgO = document.getElementById("radioAlert");
var errDateTimeMsgO = document.getElementById("dateTimeAlert");
var errDateMsgO = document.getElementById("dateAlert");
var errTimeMsgO = document.getElementById("timeAlert");
for(i=0; i < btnRadioO.length; i++){
if(btnRadioO[i].checked){
isbtnRadioChecked = true;
}
}
if(!isbtnRadioChecked) {
errMsgO.innerHTML = "Please Select the Number of Sessions you Require";
} else {
errMsgO.innerHTML = "";
}
if (dateTextO.value == ''){
errDateMsgO.innerHTML = "Please Select a Date";
}else{
errDateMsgO.innerHTML = "";
}
if (timeTextO.value == ''){
errTimeMsgO.innerHTML = "Please Select a Time";
}else{
errTimeMsgO.innerHTML = "";
}
}
function openSessionPopup (session) {
window.open(session,
'window',
'width=500,height=500,scrollbars=yes,status=no');
}
</script>
</head>
<body>
<form action="create_session.php" method="post">
<table>
<tr>
<th>Number of Sessions :</th>
<td class="sessionNo"><input type="radio" name="sessionNo" value="1" />1</td>
<td class="sessionNo"><input type="radio" name="sessionNo" value="2" />2</td>
<td class="sessionNo"><input type="radio" name="sessionNo" value="3" />3</td>
<td class="sessionNo"><input type="radio" name="sessionNo" value="4" />4</td>
<td class="sessionNo"><input type="radio" name="sessionNo" value="5" />5</td>
</tr>
</table>
<div id="radioAlert"></div>
<p><input type="text" id="datepicker" >
<br/><span id="dateAlert"></span></p>
<p><input type="text" id="timepicker" >
<br/><span id="dateTimeAlert"></span><span id="timeAlert"></span></p>
<p><input class="questionBtn" type="button" value="Prepare Questions" name="prequestion" onClick="validation();openSessionPopup(this.href); return false" /></p>
</form>
</body>
First you should move your event handlers out of your html markup.
Next you should bind an event handler to that click event.
After that you should modify your validation method to return true or false to denote if it passed validation or not.
Last you should use that validation result in a conditional wrapping your showpopup method invocation.
Something like
function myClickHandler(){
if(validation()){
showSessionPopup();
}
}
for your handler and this how how you would bind it
document.getElementsByName("prequestion")[0].addEventListener('click', myClickHandler);
Finally you would modify your validation method like so
function validation() {
var result = true;
var btnRadioO = document.getElementsByName("sessionNo");
var isbtnRadioChecked = false;;
var dateTextO = document.getElementById("datepicker");
var timeTextO = document.getElementById("timepicker");
var errMsgO = document.getElementById("radioAlert");
var errDateTimeMsgO = document.getElementById("dateTimeAlert");
var errDateMsgO = document.getElementById("dateAlert");
var errTimeMsgO = document.getElementById("timeAlert");
for(i=0; i < btnRadioO.length; i++){
if(btnRadioO[i].checked){
isbtnRadioChecked = true;
}
}
if(!isbtnRadioChecked) {
errMsgO.innerHTML = "Please Select the Number of Sessions you Require";
result = false;
} else {
errMsgO.innerHTML = "";
}
if (dateTextO.value == ''){
result = false;
errDateMsgO.innerHTML = "Please Select a Date";
}else{
errDateMsgO.innerHTML = "";
}
if (timeTextO.value == ''){
errTimeMsgO.innerHTML = "Please Select a Time";
result = false;
}else{
errTimeMsgO.innerHTML = "";
}
return result;
}
This will make your validation() method return false if you have errors.
I have the following input fields:
<input type="text" value="5" maxlength="12" id="qty" class="input-text qty" name="qty2050" tabindex="1">
and
<input type="text" value="0" maxlength="12" id="qty" class="input-text qty" name="qty2042" tabindex="1">
I use this code to prevent the user from losing inserted data (upon quitting the page):
<script>
window.onbeforeunload = function() {
var showAlert = false;
jQuery('.input-text.qty').each(function (){
//console.log("fonction 1");
var val = parseInt(jQuery(this).val(),10);
if(val > 0) { showAlert = true; }
//alert(val);
});
//console.log("fonction 2");
//console.log(showAlert);
if (showAlert == true) {
console.log("fonction 3");
return 'You have unsaved changes!';
}
}
</script>
I want to add an exception to my submit button, and to not show the alert message when there is a quantity > 0 in one of my input fields.
My problem is in adding this exception!
Thanks for help.
You can use bool confirmUnload. Like here: http://jonstjohn.com/node/23
<script>
var confirmUnload = true;
$("submit").click(function(){ confirmUnload = false; });
window.onbeforeunload = function() {
if (confirmUnload)
{
var showAlert = false;
jQuery('.input-text.qty').each(function (){
//console.log("fonction 1");
var val = parseInt(jQuery(this).val(),10);
if(val > 0) { showAlert = true; }
//alert(val);
});
//console.log("fonction 2");
//console.log(showAlert);
if (showAlert == true) {
console.log("fonction 3");
return 'You have unsaved changes!';
}
}
}
</script>
is this what you want:
<SCRIPT>
function checkForm(e) {
if (!(window.confirm("Do you want to submit the form?")))
e.returnValue = false;
}
</SCRIPT>
</HEAD>
<BODY>
<FORM name="theForm" action="0801.html"
onSubmit = "return checkForm(event)">
<INPUT type=submit>
</FORM>
your checks will go into the checkForm method in this case
i am geting undefined for ans . why? what is wrong?
function submitAnswer()
{
var myForm = document.getElementById('quiz');
var ansVal = myForm.ans.value;
var qnoVal = myForm.qno.value;
alert ("ans=" + ansVal);
alert ("qno = " +qnoVal);
return;
}
<form nam="quiz" id="quiz" >
Yes:
<input type="radio" id="ans" name="ans" value="1" />
<br />No:
<input type="radio" id="ans" name="ans" value="0" />
<input id="qno" type="text" name="qno " value="qqq" />
<input type="button" value="" onClick="submitAnswer(); " />
</form>
Using theForm.inputElement is not standard and can't be guaranteed to work. Instead, you should use document.getElementById, or some other DOM mechanism, to find the input element you want. theForm.elements[name] also works.
You'll also need to fix your element IDs before you can do that - you have two <input type="radio" /> elements with an ID "ans", which is incorrect. IDs must be unique:
<input type="radio" id="ans1" name="ans" value="1" />
<input type="radio" id="ans2" name="ans" value="0" />
<script type="text/javascript">
var ans1 = document.getElementById('ans1');
var ans1value = ans1.value;
</script>
Or, get the radio button group as a single element using elements:
<script type="text/javascript">
var theForm = document.getElementById('quiz');
var ansValue = theForm.elements['ans'].value;
</script>
You have two elements with the same ID, causing a name conflict. They're also the same as the name attribute on the same element, which could cause some confusion down the road.
Try:
var ansVal = myForm.ans.checked;
This will work:
function submitAnswer() {
var myForm = document.getElementById('quiz');
// Set a default value, in case no radio button is selected
var ansVal = 'default value here';
var qnoVal = myForm.qno.value;
// Loop through radio buttons, getting the value of the
// one that is checked (selected).
var radioButtons = myForm.ans;
for (var i = 0; i < radioButtons.length; i++) {
if (radioButtons[i].checked) {
ansVal = radioButtons[i].value;
}
}
alert ("ans=" + ansVal);
alert ("qno = " +qnoVal);
return;
}
this will work too
function submitAnswer()
{
var myForm = document.getElementById('quiz');
var qnoVal = myForm.qno.value;
var ansVal = 'none';
for( i = 0; i < myForm.ans.length; i++ )
{
if( myForm.ans[i].checked == true )
{
ansVal = myForm.ans[i].value;
break;
}
}
alert ("ans=" + ansVal);
alert ("qno = " +qnoVal);
return;
}
This will work
<html>
<form name="form">
Which one is good?<br>
<input type="radio" name="food" value="Spud"
checked="checked"> Spud<br>
<input type="radio" name="food" value="Carrot"> Carrot<br>
<input type="submit" onclick="get_radio_value()">
</form>
<script type="text/javascript>
<!--
function get_radio_value()
{
for (var i=0; i < document.form.food.length; i++)
{
if (document.form.food[i].checked)
{
var rad_val = document.form.food[i].value;
alert(rad_val);
}
}
}
//-->
</script>
</html>