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>
Related
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()
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 ''
this code is providing the submit button
the script
<script type="text/javascript">
function get_action(form) {
form.action = document.querySelector('input[name = "x"]:checked').value;;
}
html form
<form name = "quoted" method="get" onsubmit="get_action(this);">
<input id = "poster" type="text" name="poster" required="required" placeholder = "Credited Individual."> <br>
<textarea class = "actual_quote" name = "actual_quote" required="required" placeholder = "Write the question here!"></textarea><br><br><br>
<div class = "checkboxes" required="required">
<h3 style = "margin-top:-20px;">Please select one catagory that the quote falls into.</h3>
<label for="x"><input type="radio" name="x" value="stupid.php" id = "x" checked="checked" /> <span>stupid</span></label><br>
<label for="x"><input type="radio" name="x" value="stupider.php" id = "x" /> <span>stupider</span> </label><br>
<label for="x"><input type="radio" name="x" value="stupidest.php" id = "x"/> <span>stupidest</span></label>
</div>
<input id = "submit1" type="submit"><br>
dont mix your code-style between class="" and class = ""
div cant have a required
id must be unique
use jQuery for it
$(document).ready(function(){
// debug output
console.log('Document ready');
$('#submit1').click(function(event){
event.preventDefault();
var redirect = $('input[name=x]:checked', '#quoted').val();
alert (redirect);
location.href = redirect;
});
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<body>
<form id="quoted">
<input id="poster" type="text" name="poster" required="required" placeholder="Credited Individual."><br>
<textarea class="actual_quote" name="actual_quote" required="required" placeholder="Write the question here!"></textarea><br><br><br>
<div class = "checkboxes" required="required">
<h3 style = "margin-top:-20px;">Please select one catagory that the quote falls into.</h3>
<label for="x"><input type="radio" name="x" value="stupid.php" checked="checked" /> <span>stupid</span></label><br>
<label for="x"><input type="radio" name="x" value="stupider.php"/> <span>stupider</span> </label><br>
<label for="x"><input type="radio" name="x" value="stupidest.php"/> <span>stupidest</span></label>
</div>
<input id="submit1" type="button"><br>
</form>
</body>
I'm trying to do a separate formulary for individuals and corporations
If the visitor check the "Individual" radio button, it would display a form
If the visitor check the "Corporation" radio button, it would display a different form
<fieldset>
<input type="radio" name="tipo_cadastro" value="individual_form" id="individual_form" style="margin:0px !important">
<strong>Individual Form</strong><br/>
<input type="radio" name="tipo_cadastro" value="corporation_form" id="corporation_form" style="margin:0px !important">
<strong>Corporation Form</strong>
<!-- If Individual Form is checked -->
<legend>Personal Data</legend>
<label for="Name">Full Name</label>
<input id="Name" type="text" />
<label for="City">City</label>
<input id="City" type="text" />
<label for="Email">Email</label>
<input id="Email" type="text" />
<!-- If Corporation Form is checked -->
<legend>Corporation Data</legend>
<label for="Name">Name</label>
<input id="Name" type="text" />
<label for="City">City</label>
<input id="City" type="text" />
<label for="Email">Email</label>
<input id="Email" type="text" />
</fieldset>
Ps: Because of my other javascript, I can't use other <fieldset> than the existing one
You'd need to wrap something around the fields to show/hide, even just a <div> tag with an ID.
Then for your radio buttons, you'd want to add onchange & onmouseup event handlers (to account for people either clicking to change the value, or using their keyboard).
eg.
<script type="text/javascript">
function onchange_handler(obj, id) {
var other_id = (id == 'personal')? 'corporate' : 'personal';
if(obj.checked) {
document.getElementById(id + '_form_fields').style.display = 'block';
document.getElementById(other_id + '_form_fields').style.display = 'none';
} else {
document.getElementById(id + '_form_fields').style.display = 'none';
document.getElementById(other_id + '_form_fields').style.display = 'block';
}
}
</script>
<fieldset>
<input type="radio" name="tipo_cadastro" value="individual_form" id="individual_form" style="margin:0px !important" onchange="onchange_handler(this, 'personal');" onmouseup="onchange_handler(this, 'personal');">
<strong>Individual Form</strong><br/>
<input type="radio" name="tipo_cadastro" value="corporation_form" id="corporation_form" style="margin:0px !important" onchange="onchange_handler(this, 'corporate');" onmouseup="onchange_handler(this, 'corporate');">
<strong>Corporation Form</strong>
<!-- If Individual Form is checked -->
<div id="personal_form_fields">
<legend>Personal Data</legend>
<label for="Name">Full Name</label>
<input id="Name" type="text" />
<label for="City">City</label>
<input id="City" type="text" />
<label for="Email">Email</label>
<input id="Email" type="text" />
</div>
<!-- If Corporation Form is checked -->
<div id="corporate_form_fields" style="display: none;">
<legend>Corporation Data</legend>
<label for="Name">Name</label>
<input id="Name" type="text" />
<label for="City">City</label>
<input id="City" type="text" />
<label for="Email">Email</label>
<input id="Email" type="text" />
</div>
</fieldset>