Checkbox with JS and Mobile - javascript

Hello and thanks in advance for any help
In my store page, I have a checkbox that is checked when user agrees with the terms. When he checks the checkbox, submit button is disabled (false). My problem is that this solution doesn't work on iPhone and other mobile devices.
Here's the code:
function terms() {
if (document.getElementById("cbTerms").checked)
document.getElementById("submit").disabled = false;
else
document.getElementById("submit").disabled = true;
}
function cbc() {
if (document.getElementById("cbc").checked)
document.getElementById("cbc") = ("הריני מאשר קבלת מבצעים והטבות אל הדואר האלקטרוני מפראיה");
else
document.getElementById("cbc").value = ".";
}
<input class="btn btn-toranj alt" name="submit" type="submit" id="submit" value="לרכישה" disabled="true">
<br>
<br>
<input type="checkbox-0" id="cbTerms" name="cbTerms" onclick="terms();" style="width:15px; height:15px;">
<p style="margin-bottom:0px; font-size:14px; display: -webkit-inline-box;">הריני מאשר כי קראתי את התקנון
</p>
<br>
<input type="checkbox" id="cbc" name="os3" oninput="cbc()" style="width:15px; height:15px;">
<p style="margin-bottom:0px; font-size:14px; display: -webkit-inline-box;">הריני מאשר קבלת מבצעים והטבות אל דואר האלקטרוני</p>
<input type="hidden" value="הטבות ומבצעים" id="on3" name="on3">

At first sight your first checkbox is not really a checkbox.
<input type="checkbox-0" ...> should be more like: <input type="checkbox" ...>
With this change it will work.
P.S.:
Consider using braces for your if() {} else {} statements as you will propably run into some logic error if you change something in the future (e.g. add a line of code) and forget to add them.

The change event is preferred over click. And in addition, you'd pass the currently clicked checkbox on the fly as following
<input class="btn btn-toranj alt" name="submit" type="submit" id="submit" value="לרכישה" disabled="true">
<br><br>
<input type="checkbox" id="cbTerms" name="cbTerms" onchange="terms(this);" style="...">
<p style="...">הריני מאשר כי קראתי את
התקנון
</p>
<br>
<input type="checkbox" id="cbc" name="os3" onchange="cbc(this)" style="...">
<p style="...">הריני מאשר קבלת מבצעים והטבות אל דואר האלקטרוני</p>
<input type="hidden" value="הטבות ומבצעים" id="on3" name="on3">
<script type="text/javascript">
function terms(me)
{
document.getElementById("submit").disabled = !me.checked;
}
function cbc(me){
var val=document.getElementById("cbc").checked?
"הריני מאשר קבלת מבצעים והטבות אל הדואר האלקטרוני מפראיה":".";
document.getElementById("cbc").value = val;
}
</script>

Related

Validate input check ONLY when display=none (div is shown)

when pressing the radio button "option" it displays a div using the (display:none display:block) method. The input "Requirements" is required and has that in the html. The problem is that when pressing submit, the form requires that input even if the div isn't being shown bc the user hasn't selected the radio button which blocks the css. The field should only be required if the user has selected the radio button option.
<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jquery/[jquery version here]/jquery.min.js"
language="javascript" type="text/javascript"></script>
<title>Test</title>
<style type="text/css">
body {
padding: 80px;
}
#requirements {
width: 100%;
}
#results {
width: 100%;
}
</style>
<script type="text/javascript">
// DISPLAY HIDDEN TEXT
function hide() {
document.getElementById('hidden').style.display ='none';
}
function show() {
document.getElementById('hidden').style.display = 'block';
}
function hidetext() {
document.getElementById('hiddentwo').style.display = 'none';
}
function showtext() {
document.getElementById('hiddentwo').style.display = 'block';
}
function validateForm(e) {
let inp=[...document.getElementsByName("tick")];
if(!inp.some(i=>i.checked) && chk.checked) {
e.preventDefault();
alert('You must select why you are attending!');
}
}
</script>
</head>
<body>
<h1>Registration Request</h1>
<form id="form" method="post" name="form" enctype="multipart/form-data" action="#">
<p>This course is identified in my Work Plan and Learning Agreement</p>
<input type="radio" name="optionOne" value="yes" onclick="hide()" required> Yes<br>
<input type="radio" id="chk" name="optionOne" value="no" onclick="show()"> No<br>
<div id="optionOne_error" class="val_error"></div>
<p>
<div id="hidden" style="display: none">
<p>I am attending this session because (tick all that apply) </p>
<input type="checkbox" name="tick" value="It will help me develop the skills and knowledge required for my current role" > It will help me develop the skills and knowledge required for my current role<br>
<input type="checkbox" name="tickone" value="It will help me develop the skills and knowledge for a possible future role/body of work" > It will help me develop the skills and knowledge for a possible future role/body of work <br>
<input type="checkbox" name="ticktwo" value="t was identified as a need during my performance management discussions"> It was identified as a need during my performance management discussions<br>
<input type="checkbox" name="tickthree" value="My manager recommended that I attend"> My manager recommended that I attend<br>
<input type="checkbox" name="tickfour" value="I am interested in the content"> I am interested in the content<br>
<p>
<p>What would you like to achieve as a result of your attendance? For example, "I would like to learn to write better emails to improve my communication skills." </p>
<input type="text" id="results" name="results">
</div>
<p>Do you require adjustments or additions to the session delivery to support your participation? For example, hearing loop or wheelchair access.</p>
<input type="radio" name="option" value="yes" onclick="showtext()" required> Yes<br>
<input type="radio" name="option" value="no" onclick="hidetext()"> No<br>
<div id="option_error" class="val_error"></div>
<div id="hiddentwo" style="display: none;">
<p>Please provide details of your requirments.</p>
<input type="text" id="requirements" name="requirements" ></input>
</div>
<p>Please upload any supporting documentation to support your registration request </p>
<div class="browse-button">
<input type="file" name="attachments[]" multiple="multiple"></input>
</div>
<div class="submit-button">
<button type="submit" name="submit" onclick="validateForm(event)" value="submit">Submit</button>
</div>
</form>
<img src="Logo.png" alt="Persuit Technology Logo" width="110" style="margin-top: 20px">
</body>
</html>
I suggest that not you also disable the input tag inside thediv when hiding it.
So the hide function would be:
function hide() {
var inputs = document.getElementById('hidden').getElementsByTagName('input');
for(i = 0; i < inputs.length ; i++)
inputs[i].disabled = true
document.getElementById('hidden').style.display ='none';
}
And the show function would be:
function show() {
var inputs = document.getElementById('hidden').getElementsByTagName('input');
for(i = 0; i < inputs.length ; i++)
inputs[i].disabled = false
document.getElementById('hidden').style.display ='block';
}
You can use also use those functions for showText and hideText.

I am stuck with Checkbox Attribute

I recently start to learn JavaScript and have a question about checkbox Attribute.
I want to put Nickname feature that is if someone want to put his/her nickname, he/she can check the checkbox and it appears the text box for Nickname.
However, when the page is loaded, the text box is there even though the checkbox is not checked.
Can anyone please help me with the problem...?
<fieldset>
<form>
<div>
<label for = "yesNick"> Nickname?:</label>
<input id="yesNick" name="yesNick" type="checkbox" value="yes" onchange="nicknameFunction()"/><br/>
</div>
<div id= "nick">
<label for = "nickname">Nickname:</label>
<input type="text" name="nickname" id="nickname"><br/>
</div>
<input type="submit" value="Vertify"/>
<script type="text/javascript">
function nicknameFunction() {
if (document.getElementById('yesNick').checked){
document.getElementById('nick').style.display="inline";
document.getElementById('nickname').setAttribute('required',true);
}
else{
document.getElementById('nickname').removeAttribute('required');
document.getElementById('nick').style.display="none";
}
}
</script>
</form>
</fieldset>
</p>
Set your initial display for the #nick div to 'none'. Your function only runs on change of the checkbox so you will need to ensure initial state on your own.
function nicknameFunction() {
if (document.getElementById('yesNick').checked){
document.getElementById('nick').style.display="inline";
document.getElementById('nickname').setAttribute('required',true);
}
else{
document.getElementById('nickname').removeAttribute('required');
document.getElementById('nick').style.display="none";
}
}
#nick {
display:none;
}
<fieldset>
<form>
<div>
<label for = "yesNick"> Nickname?:</label>
<input id="yesNick" name="yesNick" type="checkbox" value="yes" onchange="nicknameFunction()"/><br/>
</div>
<div id= "nick">
<label for = "nickname">Nickname:</label>
<input type="text" name="nickname" id="nickname"><br/>
</div>
<input type="submit" value="Vertify"/>
</form>
</fieldset>
You don't need JavaScript for this; in fact, you shouldn't use JS for this because accessing the dom is quite slow. CSS is more than sufficient. You can also make it animated by using width instead of display property, but for my example I only used the display property.
#yesNick:checked ~ #nickname {
display: block;
}
#nickname {
display: none;
}
<div>
<label for = "yesNick"> Nickname?:</label>
<input id="yesNick" name="yesNick" type="checkbox" value="yes"/><br/>
<label for = "nickname">Nickname:</label>
<input type="text" name="nickname" id="nickname"><br/>
</div>
<input type="submit" value="Vertify"/>
try hiding the textbox for the first time :
var nickName = document.getElementById('nick');
nickName.style.display="none";
function nicknameFunction() {
if (document.getElementById('yesNick').checked){
nickName.style.display="inline";
document.getElementById('nickname').setAttribute('required',true);
}
else{
document.getElementById('nickname').removeAttribute('required');
nickName.style.display="none";
}
}

Ajax update works for radios, checkboxes but not a button

On click, I want the form to process and update based on which button is clicked.
html:
<input type="button" value="5.00" name="updatefield" id="updatefield" class="chooseit">
have also tried:
<button name="updatefield" id="updatefield" class="chooseit">5.00</button>
<button name="updatefield" id="updatefield" class="chooseit" type="button">5.00</button>
<button name="updatefield" id="updatefield" class="chooseit" type="button" value="5.00">5.00</button>
<button name="updatefield" id="updatefield" class="chooseit" type="submit" value="5.00">5.00</button>
When I change button to anything besides "button," (radio,checkbox, etc) the form process as expected. (The 5.00 is passed to the overall page total as +5.00)
View.js:
events: {
'click button.chooseit': 'chooseIt',
},
processing.js
chooseDonate: function(updatefield) {
this.set('updatefield', updatefield);
var that = this;
$.post('index.php?route=info/updateinfo', this.toJSON(), function(data) {
qc.event.trigger('updateAll', data);
that.updateForm(data);
}, 'json').error();
},
Are buttons handled differently? Can't figure out why radios/checkboxes work, but not buttons.
I'm not familiar with the framework you are using. If I understand events:{'click button.chooseit': 'chooseIt',} you bind the click to a function called chooseIt. It would be nice to see that function too.
But to answer your question "Are buttons handled differently?", well, it depends on what type of button. There are <input type="button">, <input type="submit">, <input type="image">, <input type="reset">, <button type="button">, <button type="submit">, <button type="menu"> and <button type="reset">. If type="submit" or type="image" the form is submitted. If type="reset" the controls in the form are reset to their initial value. If type="menu" a popup menu defined via its designated <menu>-element is displayed. If type="button" nothing special happens unless you have added a click-handler.
For the thing you are trying to do, there is no difference in plain javascript. I have added an example below where I use <input type="radio">, <input type="checkbox">, <input type="button">, <button type="button"> and <select>, and they are all using the same function to set the value of <output> to the latest clicked value. (type="checkbox" get special treatment since it can be clicked to uncheck)
So to find what's wrong, you need to dig into your framework and see what it is doing. A common mistake is that the form get submitted, and it can happen so fast that it looks like nothing happened. You can detect that, for example if you enable "sticky log" in your browsers developer console, so that the log is kept even if the page is reloaded.
var output = document.getElementById('output');
function setOutput(event) {
var value = this.value;
if (this.type === 'checkbox') {
if (!this.checked) value = '';
}
output.value = value;
}
document.querySelectorAll('input, button').forEach(
function (elem) {
elem.addEventListener('click', setOutput);
}
);
document.querySelectorAll('select').forEach(
function (elem) {
elem.addEventListener('change', setOutput);
}
);
fieldset{
display:inline-block;
width:150px;
height:50px;
vertical-align:top;
margin:0;
padding:0;
}
fieldset p {
margin:0;
padding:0;
font-size:80%;
}
<p>Proof of concept that the type of input element doesn't matter in this case.</p>
<form id="form1">
<fieldset>
<p><input type="radio"></p>
<label><input value="5" type="radio" name="radioValue">5</label>
<label><input value="10" type="radio" name="radioValue">10</label>
<label><input value="20" type="radio" name="radioValue">20</label>
</fieldset>
<fieldset>
<p><input type="checkbox"></p>
<label><input value="5" type="checkbox" name="chkValue">5</label>
<label><input value="10" type="checkbox" name="chkValue">10</label>
<label><input value="20" type="checkbox" name="chkValue">20</label>
</fieldset>
<fieldset>
<p><input type="button"></p>
<input value="5" type="button" name="ibtnValue">
<input value="10" type="button" name="ibtnValue">
<input value="20" type="button" name="ibtnValue">
</fieldset>
<fieldset>
<p><button type="button"></p>
<button value="5" type="button" name="btnValue">5</button>
<button value="10" type="button" name="btnValue">10</button>
<button value="20" type="button" name="btnValue">20</button>
</fieldset>
<fieldset>
<p><select></p>
<select>
<option value="">--Select value---</option>
<option value="5">5</option>
<option value="10">10</option>
<option value="20">20</option>
</select>
</fieldset>
<fieldset>
<p>Last selected value: <output id="output"></output></p>
</fieldset>
</form>
If your button is inside a form, it's probably submitting it (that is their default behavior).
Try adding a type attribute to tell your browser you don't want that to happen:
<button name="updatefield" id="updatefield" class="chooseit" type="button">5.00</button>
You need to give the button a value such as below:
<button name="updatefield" id="updatefield" class="chooseit" type="button" value="5.00">5.00</button>

Enable submit button when select checkbox

I have try a few examples of enable the submit button when checkbox is selected but i'm getting nowhere. Below is one of my attempts, where the submit button is disabled until the checkbox is selected. Please let me know what am i missing.
function checked(sub1) {
var myLayer = document.getElementById(sub1);
var input = myLayer.childNodes[0];
if (input.checked == true) {
myLayer.disabled = "";
} else {
myLayer.disabled = "disabled";
}
}
<p style="color: #FF0000; font-weight: bold;">I have read and agree to the terms and conditions
<input type="checkbox" id="termsChkbx " onchange="checked('sub1')" />
</p>
<p>
<input type="submit" name="submit" value="Order now!" id="sub1" disabled="disabled" />
</p>
Nobody has explained why your code isn't working.
For one, you aren't selecting the input checkbox element properly. It is not a child node of the button element. You could either get a reference to the checkbox by passing this in the onchange event, or you could pass the event object and access the checkbox element through the event.target property:
For example:
<input type="checkbox" id="termsChkbx " onchange="isChecked(this, 'sub1')" />
Then you can access a reference to the checkbox element that fired on the change event:
function isChecked(checkbox, sub1) {
// checkbox
}
After changing a couple things, it would work as expected:
function isChecked(checkbox, sub1) {
var button = document.getElementById(sub1);
if (checkbox.checked === true) {
button.disabled = "";
} else {
button.disabled = "disabled";
}
}
However, you can simplify the code and rewrite it to:
Example Here
<input type="checkbox" id="termsChkbx " onchange="isChecked(this, 'sub1')" />
function isChecked(checkbox, sub1) {
document.getElementById(sub1).disabled = !checkbox.checked;
}
As a side note, I would highly suggest using unobtrusive JavaScript and add an event listener to the element in order to avoid inline onchange events:
Example Here
document.getElementById('termsChkbx').addEventListener('click', function (e) {
document.getElementById('sub1').disabled = !e.target.checked;
});
Here is the complete code
<p style="color: #FF0000; font-weight: bold;">I have read and agree to the terms and conditions
<input type="checkbox" id="termsChkbx " onclick="change_button(this,'sub1')"/>
</p>
<p><input type="submit" name="submit" value="Order now!" id="sub1" disabled="disabled"/></p>
<script type = "text/javascript">
function change_button(checkbx,button_id) {
var btn = document.getElementById(button_id);
if (checkbx.checked == true) {
btn.disabled = "";
} else {
btn.disabled = "disabled";
}
}
</script>
Try like this
<input type="checkbox" id="termsChkbx " onchange="isChecked(this,'sub1')"/></p>
<p><input type="submit" name="submit" value="Order now!" id="sub1" disabled="disabled"/></p>
JS
function isChecked(chk,sub1) {
var myLayer = document.getElementById(sub1);
if (chk.checked == true) {
myLayer.disabled = false;
} else {
myLayer.disabled = true;
};
}
PLUNKR
The major problem can be easily checked by using the browser's debug console. There you can immediately see an exception.
Try this:
Html:
<p style="color: #FF0000; font-weight: bold;">I have read and agree to the terms and conditions
<input type="checkbox" id="termsChkbx" onchange="checked('sub1', this.checked);" />
</p>
<p>
<input type="submit" name="submit" value="Order now!" id="sub1" disabled="disabled" />
</p>
JavaScript:
function checked(sub1, checkedState) {
document.getElementById(sub1, this).disabled = !checkedState;
}
But be aware, that this code snippet is not best practice. It just solves your current problem without using libraries like jQuery.
Try using this JQuery function
$(function() {
$('#termsChkbx').click(function() {
if ($(this).is(':checked')) {
$('#sub1').removeAttr('disabled');
} else {
$('#sub1').attr('disabled', 'disabled');
}
});
});
Example
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p style="color: #FF0000; font-weight: bold;">I have read and agree to the terms and conditions
<input type="checkbox" id="termsChkbx" /></p>
<p><input type="submit" name="submit" value="Order now!" id="sub1" disabled="disabled"/></p>
<script>
$(function() {
$('#termsChkbx').click(function() {
if ($(this).is(':checked')) {
$('#sub1').removeAttr('disabled');
} else {
$('#sub1').attr('disabled', 'disabled');
}
});
});
</script>
While your problem has been solved, there is no need for JavaScript here.
This can be done with pure CSS/HTML:
input[type="checkbox"]:not(:checked) ~ input[type="submit"]{
pointer-events: none;
tab-index: -1;
color: graytext;
}
<input type="checkbox"/>
<input type="submit" id="submit" value="submit" onclick="this.value='clicked';"/>
I've used the :not() pseudo-class to detect when a check-box isn't ticked as this is w3c's recommended approach. I wasn't sure where (in HTML) the check box is in relevance to the button, so I used the tilde (~ general sibling selector) to find the button. If the check-box is immediately before the button I would recommend using the adjacent sibling selector + instead.
However if you have multiple check-boxes and you only want one check-box to toggle the button's state then using the :nth-of-type pseudo class or an id may be more appropriate:
input[type="checkbox"]:nth-of-type(2):not(:checked) ~ input[type="submit"]{
pointer-events: none;
tab-index: -1;
color: graytext;
}
<input type="checkbox"/>
<input type="checkbox"/>
<input type="checkbox"/>
<input type="submit" id="submit" value="submit" onclick="this.value='clicked';"/>
Otherwise all the check-boxes will be 'required' for the button to become click-able:
input[type="checkbox"]:not(:checked) ~ input[type="submit"]{
pointer-events: none;
tab-index: -1;
color: graytext;
}
<input type="checkbox"/>
<input type="checkbox"/>
<input type="checkbox"/>
<input type="submit" id="submit" value="submit" onclick="this.value='clicked';"/>

javascript manipulating 2 checkboxes from a button

I got a button called Rework, when i click the button two checkboxes has to be appeared and Rework button should be disappeared and in place a submit button has to be appeared . How will i move on with this concept.?
You can do this like this: http://codepen.io/anon/pen/pjrwLe
**HTML**
<input type="button" id="rework-button" value="Rework" onclick="rework()"/>
<div id="checkboxes">
Check A: <input type="checkbox" />
Check B: <input type="checkbox" id="check-a" />
</div>
<input type="submit" id="submit-button" value="Submit"/>
**CSS**
#checkboxes,
#submit-button{
display:none;
}
**JAVASCRIPT**
function rework(){
document.getElementById("checkboxes").style.display = "block"
document.getElementById("submit-button").style.display = "block"
document.getElementById("rework-button").style.display = "none"
}
You can try something like this, when Rework is clicked, if it is not displayed as none, and show the checkboxes and submit button.
function reworkClick() {
if (document.getElementById("Rework").style.display != "none"){
document.getElementById("Rework").style.display = "none";
document.getElementById("Submit").style.display = "block";
document.getElementById("checkboxContainer").style.display = "block";
}
}
understand this and edit as you want:
<div class='checkbx' style="display:none;">
<!--here goes your checkboxes-->
</div>
<input type='button' class'button1'/>
<input type='submit' class'button2'/>
<script>
$('.button1').click(function(){
$('.checkbx').show();
$('.button2').show();
$('.button1').hide();
});
</script>
This is jquery ..Learn Jquery Ok. code less Do more
Note: just dont forget to include jquery files... read about jquery
try this
<div class="input_box">
<input type="checkbox" name="vehicle" value="Bike"> I have a bike<br>
<input type="checkbox" name="vehicle" value="Car"> I have a car<br>
<input type="submit" value="Submit">
</div>
<div class="button">
<input type="button" class="Rework" value="Rework">
</div>
<script type="text/javascript">
$(document).ready(function(){
$('.input_box').hide();
$('.Rework').click(function(){
$('.button').hide();
$('.input_box').show();
});
});
</script>
Hope this helps!

Categories