I am trying to build a form that requires at least two check boxes to be selected. I have tried everything that I could find without any sort of success.
function cb_require() {
let chckbx = document.forms['form_name']['contact'].value;
for (chckbx.length === 1) {
if (i = 0; i < chckbx.length; i++) {
alert('check 2');
return false;
}
}
}
<form method="post" name="form_name" id="form_name" action="mailto:bb#yahoo.com" enctype="text/plain" onsubmit="return cb_require()">
<label for="cont">Preferred Contact Method:</label>
<input type="checkbox" id="Phone" name="contact" value="Phone">
<label for="Phone">Phone</label>
<input type="checkbox" id="E-mail" name="contact" value="E-email">
<label for="E-mail">E-mail</label><br>
<input type="checkbox" id="Mail" name="contact" value="Mail">
<label for="Mail">Mail</label>
<input type="checkbox" id="LinkedIn" name="contact" value="LinkedIn">
<label for="LinkedIn">LinkedIn</label><br><br>
</form>
Thanks in advance for any help or advice!
You can simple use querySelectorAll for filter only checkbox checked, if length is equal to two submit form like:
const form = document.querySelector('#form_name');
form.addEventListener('submit', (e) => {
e.preventDefault();
let chckboxs = form.querySelectorAll('input[type="checkbox"]:checked');
if (chckboxs.length > 1) {
console.log('form submit');
} else {
console.log('error form');
}
});
<form method="post" name="form_name" id="form_name" action="mailto:bb#yahoo.com" enctype="text/plain">
<label for="cont">Preferred Contact Method:</label>
<input type="checkbox" id="Phone" name="contact" value="Phone">
<label for="Phone">Phone</label>
<input type="checkbox" id="E-mail" name="contact" value="E-email">
<label for="E-mail">E-mail</label><br>
<input type="checkbox" id="Mail" name="contact" value="Mail">
<label for="Mail">Mail</label>
<input type="checkbox" id="LinkedIn" name="contact" value="LinkedIn">
<label for="LinkedIn">LinkedIn</label><br><br>
<button type="submit">ClickMe</button>
</form>
Reference:
*.querySelectorAll()
Related
I have checkboxes with randomly generated ids on every page view and want to preselect and disable some of them, so they can not get unchecked anymore. Is it possible?
With a simple script which looks after value="" I'm able to achieve the preselection but if I try to disable it at the same time, it disables all input fields on the page.
On closer inspection I found out that they have these attributes in common: <div id="cb-selection">and <input name="mycb">.
What would be your solution if we had this:
<form method="post" id="submit-this" class="" enctype="multipart/form-data">
<div id="cb-selection">
<div>
<input type="checkbox" name="mycb" id="?" value="Check1">
<label for="?"> Check1 </label>
</div>
<div>
<input type="checkbox" name="mycb" id="?" value="Check2">
<label for="?"> Check2 </label>
</div>
<div>
<input type="checkbox" name="mycb" id="?" value="Check3">
<label for="?"> Check3 </label>
</div>
</div>
</form>
I would appreciate any help.
let checkList = ['check1','check2'];
checkList.forEach(checkBox=>{
$(`input[value=${checkBox}]`).attr("checked", "checked")
$(`input[value=${checkBox}]`).attr("disabled", true)
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="checkbox" id"123" value="check1">
<input type="checkbox" id"456" value="check2">
<input type="checkbox" id"789" value="check3">
you can do that
const myForm = document.getElementById('my-form')
, CheckList = [ 'Check2', 'Check4', 'Check5' ]
;
for (let ref of CheckList)
{
myForm[ref].checked = true
}
<form action="" id="my-form">
<label > <input type="checkbox" name="Check1" value="v1"> check 1 </label><br>
<label > <input type="checkbox" name="Check2" value="v2"> check 2 </label><br>
<label > <input type="checkbox" name="Check3" value="v3"> check 3 </label><br>
<label > <input type="checkbox" name="Check4" value="v4"> check 4 </label><br>
<label > <input type="checkbox" name="Check5" value="v5"> check 5 </label><br>
</form>
I am new to JQuery. I am trying to get form data by using JQuery, first I am getting form elements by fields name attribute. All fields values are coming fine. but the multiple checkbox values are not getting. I search out many like this post but don't get any answer that works for me.
Sorry for bad English. Thank you for your help in advance.
$(document).ready(function() {
$('#form-data').on('submit', function(event) {
var form = $(this);
var name = form.find('input[name="name"]').val();
var email = form.find('input[name="email"]').val();
var phone = form.find('input[name="phone"]').val();
var gender = form.find('input[name="gender"]').val();
var subjects = form.find('input[name="subject"]').map(function() {
return $(this).val();
}).get();
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form action="" id="form-data">
<label for="name">Enter Name</label>
<input type="text" name="name" id="name"><br>
<label for="email">Enter Email</label>
<input type="email" name="email" id="email"><br>
<label for="phone">Enter Phone</label>
<input type="text" name="phone" id="phone"><br>
<label for="gender" checked>male</label>
<input type="radio" name="gender" value="male">
<label for="gender">female</label>
<input type="radio" name="gender" value="female"><br>
<label for="subject">Subject</label><br>
<input type="checkbox" name="subject[]" value="programing" checked>Programing
<input type="checkbox" name="subject[]" value="Networking">Networking
<input type="checkbox" name="subject[]" value="Database">Database
<input type="checkbox" name="subject[]" value="web development">web development
<input type="checkbox" name="subject[]" value="game development">game development
<br>
<input type="submit" id="submit" name="submit" value="submit">
</form>
I am trying to remove the option to upload a file upon the selection of the No radio button but when I click No it doesn't go away. I have no idea what I'm doing when it comes to JavaScript. How do I make it go away (or come back).
<form method="post" enctype="multipart/form-data" onsubmit="return validateForm()">
<input type="submit" value="Submit" /><br>
<label for="fname">First Name:</label>
<input type="text" required /><br>
<label for="lname">Last Name:</label>
<input class="lname" type="text" required/><br>
<label for="email">Email:</label>
<input class="email" type="text" required/><br>
<input type="radio" name="file" value="yes" id="yes" />
<label for="Yes">Yes</label>
<input type="radio" name="file" value="no" id="no" />
<label for="No" "removeElement();">No</label><br>
<p><input type="file" size="30" required></p>
</form>
<script>
function validateForm() {
window.open("https://www.stackoverflow.com");
}
function removeElement(){
var parent = document.getId(file);
parent.removeChild(file);
}
</script>
Any help would be greatly appreciated!
You can't just put removeElement(); in the middle of the html tag.
I'm assuming you want to hide the file tag? You'll first want to remove the required.
You will need to add an event listener on your No.
In jQuery this looks like this
$('#no').change(
function() {
if ($(this).is(':checked') && $(this).val() == 'no') {
$(this).hide(); //Change this for the id of the element you want
}
else {
$(this).show(); //Change this for the id of the element you want
}
});
Partly inspired by this source
If you're looking for pure JavaScript, here's what my solution would look like :
<form method="post" enctype="multipart/form-data" onsubmit="return validateForm()">
<input type="submit" value="Submit" /><br>
<label for="fname">First Name:</label>
<input type="text" required /><br>
<label for="lname">Last Name:</label>
<input class="lname" type="text" required/><br>
<label for="email">Email:</label>
<input class="email" type="text" required/><br>
<input type="radio" name="file" value="yes" id="yes" onclick="handleChange(false);" />
<label for="Yes">Yes</label>
<input type="radio" name="file" value="no" id="no" onclick="handleChange(true);" />
<label for="No">No</label><br>
<p><input type="file" size="30" id="fileUpload"></p>
</form>
<script>
function validateForm() {
window.open("https://www.stackoverflow.com");
}
function handleChange(remove) {
var element = document.getElementById('fileUpload');
if (remove)
element.style.display = 'none';
else
element.style.display = 'block';
}
</script>
(Not tested)
for hide:
document.querySelectorAll('input[type=file]').style.display = 'none';
for show:
document.querySelectorAll('input[type=file]').style.display = 'block'; //or ''
I have a hidden element (submit form) if the user selects No to the radio button and I am wondering if there is a way to make it so the element is not required when it is hidden but then to required when it is not. Any ideas?
<form method="post" enctype="multipart/form-data" onsubmit="return validateForm()">
<input type="submit" value="Submit" /><br>
<label for="fname">First Name:</label>
<input type="text" required /><br>
<label for="lname">Last Name:</label>
<input class="lname" type="text" required/><br>
<label for="email">Email:</label>
<input class="email" type="text" required/><br>
<input type="radio" name="file" value="yes" id="yes" onclick="handleChange(false);" />
<label for="Yes">Yes</label>
<input type="radio" name="file" value="no" id="no" onclick="handleChange(true);" />
<label for="No">No</label><br>
<p><input type="file" size="30" id="fileUpload" ></p>
</form>
<script>
function validateForm() {
window.open("https://www.stackoverflow.com");
}
function handleChange(remove) {
var element = document.getElementById('fileUpload');
if (remove)
element.style.display = 'none';
else
element.style.display = 'block';
}
</script>
Disabling the element will cause the required tag to be ignored.
element.disabled = true;
We are trying to register users to a webinar and the only way to do it is via a one-click registration link that is normally used on an email. But we need to use this link on an optin form as well.
https://register.webinar.com/auto-register?webid=69bb17b947&memberid=39867&firstname=yourname&email=your#email.com&schedule=1
We have three schedules to choose from and this is set on the parameter 'schedule=X'
I'm using radio button with onclick action so that the submit link will changed based on the schedule chosen. e.g.
<form accept-charset="UTF-8" action="submit.php" method="POST" id="myForm">
<label for="FirstName">First Name *</label>
<input id="FirstName" name="FirstName" type="text" />
<label for="Email">Email *</label>
<input id="Email" name="Email" type="text" />
<div class="radio_form">
<input name="sel_schedule" type="radio" value="https://app.webinarjam.net/ew/auto-register?webicode=69bb17b947&memberid=39867&firstname=yourname&email=your#email.com&schedule=1" onclick="javascript:document.getElementById('next_url').href=this.value;" checked="checked">
<label>Schedule 1</label>
<input name="sel_schedule" type="radio" value="https://app.webinarjam.net/ew/auto-register?webicode=69bb17b947&memberid=39867&firstname=yourname&email=your#email.com&schedule=2" onclick="javascript:document.getElementById('next_url').href=this.value;">
<label>Schedule 2</label>
<input name="sel_schedule" type="radio" value="https://app.webinarjam.net/ew/auto-register?webicode=69bb17b947&memberid=39867&firstname=yourname&email=your#email.com&schedule=3" onclick="javascript:document.getElementById('next_url').href=this.value;">
<label>Schedule 3</label>
</div>
<div class="submit_form">
<a id="next_url" name="next_url" href="https://app.webinarjam.net/ew/auto-register?webicode=69bb17b947&memberid=39867&firstname=yourname&email=your#email.com&schedule=1" onclick="document.getElementById('myForm').submit();">Submit</a>
Now the other issue, how can I pass the field values for the name and email on the registration link before they click on the submit button? I thought of using onchange for the text fields but I don't know how to pass the info in the url parameter of the registration link.
Thanks in advance!
You can access url parameters and use those to populate form fields like this -
<form accept-charset="UTF-8" action="submit.php" method="POST" id="myForm">
<label for="FirstName">First Name *</label>
<input id="FirstName" name="FirstName" type="text" />
<label for="Email">Email *</label>
<input id="Email" name="Email" type="text" />
<div class="radio_form">
<input name="sel_schedule" type="radio" value="https://app.webinarjam.net/ew/auto-register?webicode=69bb17b947&memberid=39867&firstname=yourname&email=your#email.com&schedule=1" onclick="javascript:document.getElementById('next_url').href=this.value;" checked="checked">
<label>Schedule 1</label>
<input name="sel_schedule" type="radio" value="https://app.webinarjam.net/ew/auto-register?webicode=69bb17b947&memberid=39867&firstname=yourname&email=your#email.com&schedule=2" onclick="javascript:document.getElementById('next_url').href=this.value;">
<label>Schedule 2</label>
<input name="sel_schedule" type="radio" value="https://app.webinarjam.net/ew/auto-register?webicode=69bb17b947&memberid=39867&firstname=yourname&email=your#email.com&schedule=3" onclick="javascript:document.getElementById('next_url').href=this.value;">
<label>Schedule 3</label>
</div>
<div class="submit_form">
<a id="next_url" name="next_url" href="https://app.webinarjam.net/ew/auto-register?webicode=69bb17b947&memberid=39867&firstname=yourname&email=your#email.com&schedule=1" onclick="document.getElementById('myForm').submit();">Submit</a>
</div>
</form>
<script>
var getUrlParameter = function getUrlParameter(sParam) {
var sPageURL = decodeURIComponent(window.location.search.substring(1)),
sURLVariables = sPageURL.split('&'),
sParameterName,
i;
for (i = 0; i < sURLVariables.length; i++) {
sParameterName = sURLVariables[i].split('=');
if (sParameterName[0] === sParam) {
return sParameterName[1] === undefined ? true : sParameterName[1];
}
}
};
var webid = getUrlParameter('webid');
var firstName = getUrlParameter('firstname');
var email = getUrlParameter('email');
var schedule = getUrlParameter('schedule');
document.getElementById("FirstName").value = firstName;
document.getElementById("Email").value = email;
</script>