I need to fire a function I wrote after a form has been filled in.
I tried using a keypress function but that wasn't good because it could bypass the form having to be filled in. I'm not allowed to add a button.
I tried using onsubmit but that isn't good either.
The idea is to show an image after the form has been filled in, then enabling the next form and taking the opacity of the next form from 0.5 to 1.0. This is the function I wrote in JavaScript but I can't get to fire it:
function validate1(){
$("#check").show();
$("#fieldset2").css("opacity", "1.0");
$("#fieldset2").attr("disabled", false);
}
This is my html:
<form name="form1" onsubmit="return validate1()" method="post">
<fieldset id="fieldset1">
<legend>Step 1</legend>
How many people will be attending?
<select name = step1 id="step1" onchange="showField()">
<option value="0">Please Choose</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
</select>
<br>
<div id="divName"></div>
<img id="check" src="Images/check.png">
</fieldset>
</form>
<form name="form2" onsubmit="return validateForm()" method="post">
<fieldset id="fieldset2" disabled>
<legend>Step 2</legend>
Would you like your company name on your badges?<br>
<input type="radio" id="companyYes" name="company">Yes<input type="radio" id="companyNo" name="company">No<br>
<input type="text" id="companyText">
<br>
<div id="company"></div>
Will anyone in your group require special accommodations?<br>
(if yes) Please explain below:<br>
<input type="radio" name="special" id="specialYes" value="Yes">Yes<input type="radio" id="specialNo" name="special" value="No">No<br>
<input type="text" id="specialText"><br>
<img id="check2" src="Images/check.png">
</fieldset>
</form>
PS: I can only use JS, JQuery and HTML, no Ajax(have zero experience with it).
Add another button that call your function and enable the next step :
<button onclick='nextStep()'>Next Step</button>
Hope this helps.
function nextStep(){
$("#check").show();
$("#fieldset2").css("opacity", "1");
$("#fieldset2").attr("disabled", false);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form name="form1" method="post">
<fieldset id="fieldset1">
<legend>Step 1</legend>
How many people will be attending?
<select name = step1 id="step1" onchange="">
<option value="0">Please Choose</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
</select>
<br>
<div id="divName"></div>
<img id="check" src="http://fotokaste.lv/images/05651826220882852674.png" style='display:none'>
</fieldset>
</form>
<button onclick='nextStep()'>Next Step</button>
<form name="form2" onsubmit="return validateForm()" method="post">
<fieldset id="fieldset2" disabled>
<legend>Step 2</legend>
Would you like your company name on your badges?<br>
<input type="radio" id="companyYes" name="company">Yes<input type="radio" id="companyNo" name="company">No<br>
<input type="text" id="companyText">
<br>
<div id="company"></div>
Will anyone in your group require special accommodations?<br>
(if yes) Please explain below:<br>
<input type="radio" name="special" id="specialYes" value="Yes">Yes<input type="radio" id="specialNo" name="special" value="No">No<br>
<input type="text" id="specialText"><br>
<img id="check2" src="Images/check.png">
</fieldset>
</form>
"use the jQuery .change method to fire when a user chooses an option from the select named "step1".
$("#step1").change(function() {
if ($("#step1").val() > 0) {
validate1();
}
});
You can probably try placing an onchange function on every element inside the first form.
Use this for every element.
<input id = 'nameInputFormElem' type='text' placeholder="Full Name" onchange="testFunction(event);">
<select name = step1 id="step1" onchange="testFunction(event);">
<option value="0">Please Choose</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
</select>
This can be a generic implementation of the function to catch the change
function testFunction(event){
var temp = $(event.target).parents("form").find("select, input");
var isFormFilled = true;
$(temp).each(function (key,value){
if($(value).val() == '')
isFormFilled= false;
});
if(isFormFilled == true)
console.log("success");
}
Replace success console with a call to your function.
Related
I'm new to utilizing radio buttons and conditional statements is JavaScript/HTML, I would love to slide up fro two different div based on which radio button is selected.
This is my HTML:
<!DOCTYPE html>
<html>
<head>
<!--This is jQuery via Google CDN-->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<!--Script to JavaScript-->
<script src="select.js"></script>
</head>
<body>
<!--This divide is for the creating/modifying a guestlist-->
<div id="inviteType">
<p>What Type of Invitations Will You be Sending?</p>
<input type="radio" value="paperInvite" name="InviteType" id="paperInvite">
<label for="paperInvite">Paper + Electronic Invitations</label>
<br>
<input type="radio" value="elecInvite" name="InviteType" id="elecInvite">
<label for="elecInvite">Electronic Invitations</label>
<br>
<button id="submitInvite">Submit</button>
</div>
<div id="paper">
<form id="paperGuest">
<input type="text" placeholder="First Name" required>
<input type="text" placeholder="Last Name" required>
<label for="guestPhone">Guest Phonenumber</label>
<input type="tel" placeholder="+0(123)345-6789" id="guestPhone">
<!--This section of code is for the address lines-->
<label for="guestAddress">Please Enter Guest Address</label>
<textarea id="guestAddress" required></textarea>
<div id="#guestAddPopUp">
You can either copy and paste from your contacts, or you may enter the address within this format. <br>
1234 S. Buttermore Ave. Apt. 16 <br>
Plainsville, AL 70832 
 <br>
(Country, if if applicable)
</div>
<label for="additionalGuest">Additional Guests</label>
<select class="additionalGuest" name="additionalGuests">
<option value="none">None</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
</select>
<button id="paperSubmit">Submit</button>
</form>
</div>
<div id="electronic">
<form id="elecGuest">
<input type="text" placeholder="First Name" required>
<input type="text" placeholder="Last Name" required>
<label for="guestPhone">Guest Phonenumber</label>
<input type="tel" placeholder="+0(123)345-6789" id="guestPhone">
<label for="guestEmail">Guest Email</label>
<input type="email" placeholder="person123#mail.com">
<label for="additionalGuest">Additional Guests</label>
<select class="additionalGuest" name="additionalGuests">
<option value="none">None</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
</select>
<button id="elecSubmit">Submit</button>
</form>
</div>
</body>
</html>
This is my JavaScript
window.addEventListener("load", (event) => {
$("#paper").hide();
$("#electronic").hide();
var inviteType = document.getElementById("submitInvite");
inviteType.addEventListener("click", function() {
let InviteType = $('input[name="InviteType"]:checked').val();
document.body.style.color = "#214010";
document.body.style.backgroundColor = "#CAE6AC";
if (InviteType = "paperInvite") {
$("#ModCreGuest").slideUp(2700);
$("#paper").slideDown(3300);
/*this section of code helps to add the different guests with paper invitations to the index*/
var paperSubmit = document.getElementById("paperSubmit");
paperSubmit.addEventListener("click", function(){
});
}
else {
$("#ModCreGuest").slideUp(2700);
$("#electronic").slideDown(3300);
}
});
});
Is there a problem with my conditional statement or is there a problem with selecting my radio button? Thank you.
I am trying to create a form which has a select input at the top, and when 2 of 3 options are selected the rest of the form appears to be filled in. This works, however the back and submit buttons don't work now. I can't figure out why this is, I am thinking that it might have something to do with not being allowed to have DIVs within a form, but I always thought you could?
My Code is below, any advice on how to get the submit and back button to work??
<div class="form">
Does the Claimant have a PAB/CAB? <br><br>
<select id="PABandCAB" required onchange="showDiv(this)">
<option value="select" disabled selected>Please Select</option>
<option value="Confirmed">Confirmed</option>
<option value="Confirmed">Potential</option>
<option value="NotRequired">Not Required</option>
</select> <br><br><br>
<form action="InternalRef4.html">
<div id="hidden_div">
<hr> <br>
Title:
<select name="title"required>
<option value="Miss">Miss</option>
<option value="Ms">Ms</option>
<option value="Mrs">Mrs</option>
<option value="Mr">Mr</option>
<option value="Dr">Dr</option>
</select> <br><br>
First Name:
<input type="text" name="fname"required><br> <br>
Surname:
<input type="text" name="sname"required><br> <br>
Address:
<select name="Address"required>
<option value="Same">Same As Claimant</option>
<option value="other">Other</option>
</select><br> <br>
Representative Address Line 1:
<input type="text" name="HALine1"><br> <br>
Representative Address Line 2:
<input type="text" name="HALine2"><br> <br>
Representative Address Town/City:
<input type="text" name="HATownorCity"><br> <br>
Representative Address County:
<input type="text" name="HACounty"><br> <br>
Representative Address Post Code:
<input type="text" name="HAPostCode"><br> <br>
National Insurance Number:
<input type="text" name="NINO"><br><br>
Date of Birth:
<input type="date" name="DOB"><br><br>
Contact Number - Home:
<input type="text" name="ContactNumHome"><br> <br>
Contact Number - Mobile:
<input type="text" name="ContactNumMobile"><br> <br>
Contact Number - Other:
<input type="text" name="ContactNumOther"><br> <br>
Unacceptable Customer Behaviour (UCB): <br>
No <input type="radio" name="UCBNO" value="No" checked><br>
Yes <input type="radio" name="UCBYes" value="Yes"><br> <br>
</div>
<input type="button" value="Back"/>
<input type="submit">
</form>
</div>
<script>
var select = document.getElementById('PABandCAB'),
onChange = function(event) {
var shown = this.options[this.selectedIndex].value == "Confirmed";
document.getElementById('hidden_div').style.display = shown ? 'block' : 'none';
};
if (window.addEventListener) {
select.addEventListener('change', onChange, false);
} else {
select.attachEvent('onchange', function() {
onChange.apply(select, arguments);
});
}
</script>
Goal:
When I clickon the clear all button and the data inside of the input box should be empthy and the dropdownlist should go back to default settings that is year 2009.
Problem:
I don't know how to do in order to make the dropdownlist to go back to default when you have pressed the button?
Info:
Please remember that I do not want to make any big changes in the current javascript/jquery sourcecode because it is used in production phase.
I would like to make a complementary to the current source code.
I tried using <input type="reset" value="Clear alll" name="clear_all"> but it doesn't work in long term with the current source code.
Thanks!
http://jsbin.com/qezesohake/edit?html,js,console,output
function df(data) {
$(data).find(':input').each(function () {
switch (this.type) {
case 'text':
case 'textarea':
$(this).val('');
break;
}
});
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<form action=""" method="post">
<fieldset>
<input id="aaa" type="text" value="" />
<input id="bbb" type="text" value="" />
<select id="year">
<option value="2010">2010</option>
<option value="2009" selected="selected">2009</option>
<option value="2008">2008</option>
</select>
</fieldset>
<input type="button" value="Clear alll" name="clear_all" onclick="df(this.form)" />
</form>
<form action="#" method="post">
<fieldset>
<input id="aaa" type="text" value="" />
<input id="bbb" type="text" value="" />
<select id="year">
<option value="2010">2010</option>
<option value="2009" selected="selected">2009</option>
<option value="2008">2008</option>
</select>
</fieldset>
<input type="reset" value="Clear alll" name="clear_all" onclick="doSomething()">
</form>
<script>
function doSomething(){
alert('Do something!');
}
</script>
You don't need any javascript to clear form instead just replace your input type to reset button
<input type="reset" value="Clear all" name="clear_all"/>
Reset button does not require any onClick event to be passed. It works automatically.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<form action=""" method="post">
<fieldset>
<input id="aaa" type="text" value="" />
<input id="bbb" type="text" value="" />
<select id="year">
<option value="2010">2010</option>
<option value="2009" selected="selected">2009</option>
<option value="2008">2008</option>
</select>
</fieldset>
<input type="reset" value="Clear alll" name="clear_all" />
</form>
I am trying to set a radio button based on selecting an option in a select box.
For example, There are 5 select options available, If I select the first option, first radio button should be checked. Likewise for the rest of the things. I am working only with Javascript.
I have tried the below code.
<html>
<head>
<title>JS Test</title>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
<meta charset="utf-8">
</head>
<body>
<div></div>
<div>
<form name="myform" action="">
<label for="name">Name</label>
<input type="text" name="name"></input>
<br>
<label for="select_value" onchange="myFunction()">Select Number</label>
<select name="select_value">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
</select>
<br>
<label for="radio_value">Select Position</label>
<input type="radio" name="radio_value" value="First">First</input>
<input type="radio" name="radio_value" value="Second">Second</input>
<input type="radio" name="radio_value" value="Third">Third</input>
<input type="radio" name="radio_value" value="Fourth">Fourth</input>
<input type="radio" name="radio_value" value="Fifth">Fifth</input>
<br>
<input type="submit" name="form_submit" value="Submit"></input>
</form>
</div>
<script type="text/javascript">
function myFunction() {
var x = document.getElementsByName("select_value").value;
document.getElementsByName('radio_value')[x].checked=true;
}
</script>
</body>
</html>
JSFIDDLE
You can add this code to your javascript
var select = document.getElementsByTagName('select')[0];
select.onchange = function(event) {
var btns = document.querySelectorAll('[name^="radio_value"]');
btns[event.target.value].checked = true
}
working example
Documentation
Events
Selectors
Following changes makes your example work :
1.
<select name="select_value" onchange="myFunction()">
2.
document.getElementsByName("select_value")[0].value;
3.
document.getElementsByName('radio_value')[x].checked=true;
4.
function should be in head section
Working Fiddle
Try this. It is working for me. Use parseInt when getting the value of the select box. I have given an id to the select box and have used x-1 while selecting the radio buttons as their index starts from 0.
<form name="myform" action="">
<label for="name">Name</label>
<input type="text" name="name"></input>
<br>
<label for="select_value" >Select Number</label>
<select name="select_value" onchange="myFunction()">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
</select>
<br>
<label for="radio_value">Select Position</label>
<input type="radio" name="radio_value" value="First">First</input>
<input type="radio" name="radio_value" value="Second">Second</input>
<input type="radio" name="radio_value" value="Third">Third</input>
<input type="radio" name="radio_value" value="Fourth">Fourth</input>
<input type="radio" name="radio_value" value="Fifth">Fifth</input>
<br>
<input type="submit" name="form_submit" value="Submit"></input>
</form>
</div>
<script type="text/javascript">
function myFunction() {
var x = parseInt(document.getElementsByName("select_value")[0].value);
alert((x));
document.getElementsByName('radio_value')[x-1].checked=true;
}
Try this out its working fine
<html>
<head>
<script src="http://code.jquery.com/jquery-latest.min.js"
type="text/javascript"></script>
<title>JS Test</title>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
<meta charset="utf-8">
</head>
<body>
<div></div>
<div>
<form name="myform" action="">
<label for="name">Name</label>
<input type="text" name="name"></input>
<br>
<label for="select_value">Select Number</label>
<select name="select_value" id = "select_value">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
</select>
<br>
<label for="radio_value">Select Position</label>
<input type="radio" name="radio_value" id = "First" value="First">First</input>
<input type="radio" name="radio_value" id="Second" value="Second">Second</input>
<input type="radio" name="radio_value" id="Third" value="Third">Third</input>
<input type="radio" name="radio_value" id="Fourth" value="Fourth">Fourth</input>
<input type="radio" name="radio_value" id="Fifth" value="Fifth">Fifth</input>
<br>
<input type="submit" name="form_submit" value="Submit"></input>
</form>
</div>
</body>
<script type="text/javascript">
$( "#select_value" ).change(function() {
var conceptName = $('#select_value').find(":selected").text();
if(conceptName=="1"){
$('#First').prop('checked',true);
}
else if(conceptName=="2"){
$('#Second').prop('checked',true);
}
else if(conceptName=="3"){
$('#Third').prop('checked',true);
}
else if(conceptName=="4"){
$('#Fourth').prop('checked',true);
}
else{
$('#Fifth').prop('checked',true);
}
});
</script>
</html>
How can I pass these two variables val_1 & val_2 through a form submission to the function initComparison()?
Here is my code:
<form action="" onsubmit="">
<select name="val_1">
<option value="x">X</option>
<option value="y">Y</option>
<input type="text" value="Enter the product id" name="val_2">
</form>
<script type="text/javascript"> $(document).ready(function(){
initComparison('val_1','val_2','abc','def');
});</script>
Use something like this
<form action="" onsubmit="">
<select name="val_1" id="val_1">
<option value="x">X</option>
<option value="y">Y</option>
</select>
<input type="text" value="Enter the product id" name="val_2" id="val_2">
<input type="button" name="submit" value="submit" id="send">
</form>
<script type="text/javascript">
$("#send").click(function(){
var var1=$("#val_1").val();
var var2=$("#val_2").val();
initComparison(val_1,val_2,'abc','def');
});
</script>