I want to add a custom REQUIRED checkbox at the checkout page in my opencart 2.1.0.1 version (using journal theme).
I will create it easily with this <input type="checkbox"
but how can i use javascript to make it required?
Simply check for the checked attribute of your checkbox. According to that, submit your form or prevent it from submitting.
function validate() {
var checkbox = document.querySelector('#check');
if (!checkbox.checked) {
alert("Please check the checkbox!");
return false;
}
return true;
}
<form onsubmit="return validate()" action="">
<input type="checkbox" id="check">
<button>Send</button>
</form>
Edit:
If you don't have a form in your HTML, you could disable the submit button until the checkbox is checked like this:
function enableSubmit() {
var button = document.querySelector('#btn');
var checkbox = document.querySelector('#check');
if (checkbox.checked == false) {
button.setAttribute('disabled', '');
} else if (checkbox.checked == true) {
button.removeAttribute('disabled');
}
}
<input type="checkbox" id="check" onclick="enableSubmit()"><button type="submit" id="btn" disabled>Submit</button>
Edit 2
If you want to display an error message only, toggling the visibility of a div would be an option:
function validate() {
var checkbox = document.querySelector('#check');
var errorDiv = document.querySelector('#error');
if (checkbox.checked == false) {
errorDiv.style.display = "block";
} else if (checkbox.checked == true) {
errorDiv.style.display = "none";
}
}
#error {
width: 100%;
height: 20px;
background-color: #f44b42;
}
<input type="checkbox" onclick="validate()" id="check"><button id="btn">Send</button>
<div id="error" style="display: block">Please check the checkbox.</div>
Related
I have this page that has multiple checkboxes and when clicked, an element appears.
I have this stripped down version to show it simply:
<!DOCTYPE html>
<html>
<body>
<p>Display some text when the checkbox is checked:</p>
Checkbox 1: <input type="checkbox" id="check1" onclick="box1()"><br>
Checkbox 2: <input type="checkbox" id="check2" onclick="box2()">
<p id="fill">No boxes are checked</p>
<p id="text" style="display:none">Checkbox1 is CHECKED!</p>
<p id="text2" style="display:none">Checkbox2 is CHECKED!</p>
<script>
function box1() {
var checkBox = document.getElementById("check1");
var text = document.getElementById("text");
var fill = document.getElementById("fill");
if (checkBox.checked == true){
text.style.display = "block";
fill.style.display = "none";
} else {
text.style.display = "none";
fill.style.display = "block";
}
}
</script>
<script>
function box2() {
var checkBox = document.getElementById("check2");
var text = document.getElementById("text2");
var fill = document.getElementById("fill");
if (checkBox.checked == true){
text.style.display = "block";
fill.style.display = "none";
} else {
text.style.display = "none";
fill.style.display = "block";
}
}
</script>
</body>
</html>
My problem is that the text shows even a box is checked as shown in the image. How can I do this effectively? thanks!
I'd add the same listener to both checkboxes, and have that listener check the state of both. Then, if both are not checked, display the fill:
const isCheckeds = document.querySelectorAll('.is-checked');
const fill = document.querySelector('#fill');
function validate() {
let anyChecked = false;
document.querySelectorAll('input').forEach((checkbox, i) => {
if (checkbox.checked) {
anyChecked = true;
}
isCheckeds[i].style.display = checkbox.checked ? 'block' : 'none';
});
fill.style.display = anyChecked ? 'none' : 'block';
}
<p>Display some text when the checkbox is checked:</p>
Checkbox 1: <input type="checkbox" onclick="validate()"><br>
Checkbox 2: <input type="checkbox" onclick="validate()">
<p id="fill">No boxes are checked</p>
<p class="is-checked" style="display:none">Checkbox1 is CHECKED!</p>
<p class="is-checked" style="display:none">Checkbox2 is CHECKED!</p>
Note that inline handlers should be avoided. Strongly consider attaching them properly with Javascript instead. You could also consider using a change listener instead of a click listener (for better accessablity), and you could surround the inputs in a <label> to make them more clickable:
const isCheckeds = document.querySelectorAll('.is-checked');
const fill = document.querySelector('#fill');
const checkboxes = document.querySelectorAll('input');
function validate() {
let anyChecked = false;
checkboxes.forEach((checkbox, i) => {
if (checkbox.checked) {
anyChecked = true;
}
isCheckeds[i].style.display = checkbox.checked ? 'block' : 'none';
});
fill.style.display = anyChecked ? 'none' : 'block';
}
for (const checkbox of checkboxes) {
checkbox.addEventListener('change', validate);
}
<p>Display some text when the checkbox is checked:</p>
<label>Checkbox 1: <input type="checkbox"></label><br>
<label>Checkbox 2: <input type="checkbox"></label>
<p id="fill">No boxes are checked</p>
<p class="is-checked" style="display:none">Checkbox1 is CHECKED!</p>
<p class="is-checked" style="display:none">Checkbox2 is CHECKED!</p>
You forgot to define fill through a document.getElementById in the second checkbox. Right now you are disabling the fill on the first checkbox when interacting with the second one. I think this is causing some problems.
Javascript is not necessary for this task: with your markup structure you could use CSS only
:checked ~ p, #cb1, #cb2 {
display: none;
}
#check1:checked ~ #cb1,
#check2:checked ~ #cb2 { display: block; }
<p>Display some text when the checkbox is checked:</p>
Checkbox 1: <input type="checkbox" id="check1"><br>
Checkbox 2: <input type="checkbox" id="check2">
<p id="cb0">No boxes are checked</p>
<p id="cb1">Checkbox1 is checked</p>
<p id="cb2">Checkbox2 is checked!</p>
I am trying just to make the span tag appear when the submit button is pressed using the following code:
<form onsubmit="checkName(this);">
<ul>
<li>Surname<br><input type="text" name="username"><span id="surnameMissing">Surname is a required field</span></li>
...
<li><input type="submit"></li>
</ul>
</form>
My Javasrcipt:
function checkName(form){
if (form.username.value == "") {
document.getElementById("surnameMissing").style.visibility = "visible";
}
return false;
}
The span is set initially to hidden and changed upon submission however the tag only appears for a split second then goes back to being hidden. Any suggestions as to why this is?
This form is submitted that's why you see it only for second.
You need to prevent the submit if the form is invalid - Add return in the attribute onsubmit.
Like this:
function checkName(form) {
if (form.username.value == "") {
document.getElementById("surnameMissing").style.visibility = "visible";
}
return false;
}
#surnameMissing {
visibility:hidden;
}
<form onsubmit="return checkName(this);">
<ul>
<li>Surname<br><input type="text" name="username"><span id="surnameMissing">Surname is a required field</span></li>
...
<li><input type="submit"></li>
</ul>
</form>
Another option is to pass the event to the function, then use .preventDefault() like this:
function checkName(form, event) {
event.preventDefault();
if (form.username.value == "") {
document.getElementById("surnameMissing").style.visibility = "visible";
}
return false;
}
#surnameMissing {
visibility:hidden;
}
<form onsubmit="checkName(this, event);">
<ul>
<li>Surname<br><input type="text" name="username"><span id="surnameMissing">Surname is a required field</span></li>
...
<li><input type="submit"></li>
</ul>
</form>
It is because the form is submitted once you click submit. To prevent it from submitting, use this code.
<script>
function checkName(form){
if(form.username.value == ""){
document.getElementById("surnameMissing").style.visibility = "visible";
return false;
}
return true;
}
</script>
<form onsubmit="return checkName(this);">
<ul>
<li>Surname<br><input type="text" name="username"><span style="visibility:hidden;" id="surnameMissing">Surname is a required field</span></li>
...
<li><input type="submit"></li>
</ul>
</form>
Prevent your form from being submitted by adding event.preventDefault(); below your function name. And then make sure you will submit your form when username.value == "" returns false.
function checkName (form) {
// prevent from submission
event.preventDefault();
if(form.username.value == "") {
document.getElementById("surnameMissing").style.visibility = 'visible';
} else {
// Submit on successful validation
form.submit();
}
}
You can also add event.preventDefault() before you call your function in the onsubmit attribute of your form.
<form onsubmit="event.preventDefault(); checkName(this);"> ... </form>
Personally, I would also like to trap the event during the input itself. Not just during submission.
<form id="myForm">
<ul>
<li>Surname: <br><input type="text" name="username" id="username">
<span id="surnameMissing">Surname is a required field</span></li>
<li><input type="submit"></li>
</ul>
</form>
and the javascript
var form = document.getElementById("myForm");
form.addEventListener('submit', function(e) {
e.preventDefault();
if(this.username.value == "") {
document.getElementById("surnameMissing").style.visibility = 'visible';
} else {
this.submit();
}
});
var inputUsername = document.getElementById("username");
inputUsername.addEventListener('keyup', function(e) {
if(this.value == "") {
document.getElementById("surnameMissing").style.visibility = 'visible';
} else {
document.getElementById("surnameMissing").style.visibility = 'hidden';
}
});
Users will only be able to click the submit button if users select a video file and the textbox is not empty. i can disable the submit button but i cant re-enable it
<form action="upload.php" method="post" enctype="multipart/form-data">
<label for="file"><span></span></label>
<input type="file" name="videofile" id="videofile" />
<br/>
Please enter video title:
<br/>
<input type"text" name="videoTitle" />
<br />
<input type="button" disabled id="Submit" value="Submit" onclick="submit()"/>
</form>
<script>
document.getElementById('submit').disabled = true;
var n=document.getElementById('videoTitle').value;
function submit();
if($('#videofile')[0].files.length != 0) && (n.length > 1)
{
document.getElementById('submit').disabled = false;
}
</script>
Your code had a lot of mistakes. This is your corrected code:
function check() {
if (document.querySelector('#videofile').files.length != 0 && (document.getElementById("videoTitle").value.length > 1)) {
document.getElementById('Submit').disabled = false;
} else {
document.getElementById('Submit').disabled = true;
}
}
Here is the JSFiddle demo
Missing ID added (u added only name attribute, and forgot the ID while still trying to use them)
Changed 'submit' in code to 'Submit'
Remove JQuery $ syntax
Validation on keypress rather than on submit click (which doesn't makes sense since u cant click the button while its disabled)
Else code added to re-disable the button if conditions are not valid
onclick event over submit button does not make sense here. You must listen change event of the file input and keyup event of the text input and apply conditions accordingly. You have not assigned id attribute as well(videoTitle)
Also note that click handler will not be invoked if the button is disabled
Try this:
var submitBtn = document.getElementById('Submit');
function enableDisable() {
var elem = document.getElementById('videofile');
var n = document.getElementById('videoTitle').value;
if (elem.files.length && n) {
submitBtn.disabled = false;
} else {
submitBtn.disabled = true;
}
}
<form action="upload.php" method="post" enctype="multipart/form-data">
<label for="file"><span></span></label>
<input type="file" name="videofile" id="videofile" onchange='enableDisable()' />
<br/> Please enter video title:
<br/>
<input type="text" name="videoTitle" id='videoTitle' onkeyup='enableDisable()' />
<br />
<input type="button" disabled id="Submit" value="Submit" />
</form>
Can you try to make your submit function do something?
function submit() {
if($('#videofile')[0].files.length != 0) && (n.length > 1) {
document.getElementById('submit').disabled = false;
}
};
you should use change event for text and videofile elements. So that whenever you modify something, change event is triggered and ur condition is checked inside it. Submit button is enable according to it.
Se the below code for reference!
<form action="upload.php" method="post" enctype="multipart/form-data">
<label for="file"><span></span></label>
<input type="file" name="videofile" id="videofile" />
<br/>
Please enter video title:
<br/>
<input type"text" name="videoTitle" id="videoText"/>
<br />
<input type="button" disabled id="Submit" value="Submit" onclick="submit()"/>
</form>
<script>
document.getElementById('submit').disabled = true;
var n=document.getElementById('videoTitle').value;
function submit();
$('#videofile').change(function() {
if($('#videofile')[0].files.length != 0) && (n.length > 1) {
document.getElementById('submit').disabled = false;
} else {
document.getElementById('submit').disabled = true;
}
});
$('#videoText').change(function() {
if($('#videofile')[0].files.length != 0) && (n.length > 1) {
document.getElementById('submit').disabled = false;
} else {
document.getElementById('submit').disabled = true;
}
});
</script>
I feel this is a bit simpler way to achieve this
<script>
document.getElementById("submit").style.pointerEvents = "none"; //Disable
var n=document.getElementById('videoTitle').value;
function submit();
if($('#videofile')[0].files.length != 0) && (n.length > 1)
{
document.getElementById("submit").style.pointerEvents = "all"; //Enable
}
</script>
Just replace your script with this one & try..
Hope this works for you..
I have 2 radio button ie yes and no. When I select yes the text box as to get enabled. When i click no the text box as to be disabled. How to enable the text box when I click on Yes. Here is the code. Please tel me how to enable and disable it using javascript.
<script type="text/javascript">
$(function() {
$("#XISubmit").click(function(){
var XIyop= document.forms["XIForm"]["XIyop"].value;
var XIForm = $('form[name=XIForm]');
var XIAlmnus = XIForm.find('input[name=XIAlmnus]:checked').val();
if (XIAlmnus == null || XIAlmnus == "")
{
alert("Please select Parent is an Alumnus (old Boy) of this school");
return false;
}
document.getElementById("XIForm").submit();
});
</script>
<!-- html code-->
<html>
...
<label>Parent is an Alumnus (old Boy) of this school </label>   
<input type='radio' name='XIAlmnus' value='Yes' id="XIyes"/>Yes
<input type='radio' name='XIAlmnus' value='No' id="XIno"/>No</td>
<label>If Yes, Year of passing </label>   
<input type="textbox" name="XIyop" id="XIyop" >
...
</html>
I think, you should use some general handler for this: http://jsfiddle.net/maximgladkov/MvLXL/
$(function() {
window.invalidate_input = function() {
if ($('input[name=XIAlmnus]:checked').val() == "Yes")
$('#XIyop').removeAttr('disabled');
else
$('#XIyop').attr('disabled', 'disabled');
};
$("input[name=XIAlmnus]").change(invalidate_input);
invalidate_input();
});
first make the text box disabled.
<input type="textbox" name="XIyop" id="XIyop" disabled>
When radio button clicked, check and enable it.
if(document.getElementById('XIyes').checked) {
document.getElementById("XIyop").disabled = false;
}else if(document.getElementById('XIno').checked) {
document.getElementById("XIyop").disabled = true;
}
$(function() {
$('input[name="XIAlmnus"]').on('change', function() {
if ($(this).val() == 'Yes') {
$("#XIyop").prop('disabled', false);
} else {
$("#XIyop").prop('disabled', true);
}
});
});
<input type="textbox" name="XIyop" id="XIyop" disabled>
if(document.getElementById('XIyes').attr('checked')) {
document.getElementById("XIyop").disabled = 'true';
}
if(document.getElementById('XIno').attr('checked')) {
document.getElementById("XIyop").disabled = 'false';
}
HTML:
<label>Parent is an Alumnus (old Boy) of this school </label>   
<input type='radio' name='XIAlmnus' value='Yes' id="XIyes"/>Yes
<input type='radio' name='XIAlmnus' value='No' id="XIno"/>No
<br/>
<label>If Yes, Year of passing </label>   
<input type="textbox" name="XIyop" id="XIyop" disabled>
JS:
document.getElementById('XIyes').onchange = displayTextBox;
document.getElementById('XIno').onchange = displayTextBox;
var textBox = document.getElementById('XIyop');
function displayTextBox(evt){
if(evt.target.value=="Yes"){
textBox.disabled = false;
}else{
textBox.disabled = true;
}
}
Please see working demo here. Thank you I hope this will help you.
I have a simple function that I'm trying to append the results by group. I've been able to display the result for a single form but unsure where to proceed. Here is the function on Jsfiddle. http://jsfiddle.net/XBSVn/
try this. note that there is difference between your class names, and your selector only selects first input element:
$(function() {
$('.ratingroups input').each(function(i, v) {
var star = '★';
var val = parseInt(this.value, 10)
for (var i = 0; i < val; i++) {
$(this).parent().siblings('div').append($('<div>').html(star).text())
}
});
});
DEMO
The issue here is with the typos in the class names selectors(you used .ratinggroups and .ratingroups) and also the textbox selector(you were always getting the first text box to check the value).
Check this updated JsFiddle: http://jsfiddle.net/XBSVn/12/
Change your HTML to:
<form class="ratingroups">
<p><input class="asstars" value="5"/> </p>
<div class="rstars"></div>
</form>
<form class="ratingroups">
<p><input class="asstars" value="4"/> </p>
<div class="rstars"></div>
</form>
<form class="ratingroups">
<p><input class="asstars" value="3"/> </p>
<div class="rstars"></div>
</form>
<form class="ratingroups">
<p><input class="asstars" value="2"/> </p>
<div class="rstars"></div>
</form>
<form class="ratingroups">
<p><input class="asstars" value="1"/> </p>
<div class="rstars"></div>
</form>
and your Javascript to:
$(function() {
console.log($('.ratingroups input').length);
$('.ratingroups input').each(function() {
var asstars = $(this);
var stars = asstars.closest('.ratingroups').find('.rstars');
var display = true;
if (asstars.val() == '5') {
stars.append('<span>★★★★★</span>');
display = false;
}
else if (asstars.val() == '4') {
stars.append('<span>★★★★</span>');
display = false;
}
else if (asstars.val() == '3') {
stars.append('<span>★★★</span>');
display = false;
}
else if (asstars.val() == '2') {
stars.append('<span>★★</span>');
display = false;
}
else if (asstars.val() == '1') {
stars.append('<span>★</span>');
display = false;
}
if (display) {
stars.css('display', 'none');
}
else {
stars.css('display', 'block');
}
});
});