Develop Reference

HTML - Create multiple forms out of one form template

I currently have multiple forms that are similar but have small changes. First, the user choses the form from a drop-down menu and then the form is shown below.
My forms looks like this.
Form 1
Customer Name
Phone Number
Address
Form 2
Customer Name
Is married?
Form 3
Customer Name
Social Security Number
Address
My code looks something like this.
<select onchange="changeOptions(this)">
<option value="" selected="selected"></option>
<option value="form1">f1</option>
<option value="form2">f2</option>
<option value="form3">f3</option>
</select>
<form class="className" name="form1" id="form1" style="display:none">
---form---
<form class="className" name="form2" id="form2" style="display:none">
---form---
<form class="className" name="form3" id="form3" style="display:none">
---form---
<script>
function changeOptions(selectEl) {
let selectedValue = selectEl.options[selectEl.selectedIndex].value;
let subForms = document.getElementsByClassName('className')
for (let i = 0; i < subForms.length; i += 1) {
if (selectedValue === subForms[i].name) {
subForms[i].setAttribute('style', 'display:block')
} else {
subForms[i].setAttribute('style', 'display:none')
}
}
}
</script>
Is there any way to create a 'main' form that has all the form elements and then specify which element to use in each form? The method I'm using right now works fine but there is too much repeated code and probably won't scale correctly if I try to make a change in one of the elements (since I would have to change each one of them and it will be easy to make mistakes)

You don't need three different forms, just have one form with all of the fields set as hidden. Then give each field a class matching which form that field should be shown. Then simply show the matching fields based on the selected value.
select_form = document.querySelector(".select_form");
fields = document.querySelectorAll(".field");
select_form.addEventListener("change", function() {
fields.forEach(function(el) {
el.style.display = "none";
});
show = document.querySelectorAll("." + this.value);
show.forEach(function(el) {
el.style.display = "block";
});
});
.field {
display: none;
}
<select class="select_form">
<option value="" selected="selected"></option>
<option value="form1">f1</option>
<option value="form2">f2</option>
<option value="form3">f3</option>
</select>
<form>
<div class="field form1 form2">ONLY form1 and 2</div>
<div class="field form3">ONLY form3</div>
</form>

Why The Validation is not working for the provided html/ js code

I want the to get the required in the html page if none is selected.
function validation() {
var country = getElementById("country");
if (country.value = "") {
documnet.getElementById("countryy").innerHTML = "Required";
return false;
} else
return true;
}
<form onsubmit="return validation();">
<select id="country"><span id="countryy"></span>
</select><br>
<input type="submit" name="Submit" value="Submit">
</form>
Why The Validation is not working for the provided html/ js code. I want the to get the required in the html page if none is selected. I am new to js learning.

Several issues
Spelling mistake in the document.getElementById
missing document on the other document.getElementById
No preventDefault which will submit the form if any JS errors
= is assignment - you need == or === to compare
span needs to be outside the select
You did not use value="Default" in the "NONE" options
It is not recommended to have inline event handlers. Here is a better version
Note I added a class to toggle the required in case the user changes the select to conform
window.addEventListener("load", function() {
const errorSpan = document.getElementById("countryy"); // cache the elements
const country = document.getElementById("country");
document.getElementById("myForm").addEventListener("submit", function(e) {
const val = country.value; // get the value
if (val === "") {
e.preventDefault(); // stop submit
}
errorSpan.classList.toggle("hide",val); // hide if value
})
country.addEventListener("change",function() { // if user changes the select
errorSpan.classList.toggle("hide",this.val); // hide if value
})
})
.hide { display : none; }
<form id="myForm">
<select id="country">
<option value="">NONE</option>
<option value="ABDUL">ABDUL</option>
<option value="SULE">SULE</option>
</select> <span id="countryy" class="hide">Required</span><br>
<input type="submit" name="Submit" value="Submit">
</form>
HOWEVER you could remove all the script and just add required attribute to the select and keep the empty default
<form id="myForm">
<select id="country" required>
<option value="">NONE</option>
<option value="ABDUL">ABDUL</option>
<option value="SULE">SULE</option>
</select><span id="countryy"></span><br>
<input type="submit" name="Submit" value="Submit">
</form>

Use required attribute in the select tag. It will considered in html 5 validation.
https://www.w3schools.com/tags/tryit.asp?filename=tryhtml5_select_required

Leaving page javascript/jquery

My question is a continuation of this post https://stackoverflow.com/questions/22438863/javascript-jquery-for-before-leaving-the-page?noredirect=1#comment34138272_22438863, it's a new function.
Am looking for below function:
In stackoverflow, if you type some answers and if you try to close that tab it will ask for confirmation message..
Below is my Html part:
<form id="demo">
<input type="text" id="name" name=""/>
<input type="email" id="emails" name=""/>
<input type="number" id="ph" name=""/>
<select name="" id="sample">
<option>Select</option>
<option value="1">Chennai</option>
<option value="2">Hyderabad</option>
</select>
</form>
If user enters something and he clicks on logo to navigate away it asks for confirm message..its natural right???Even stackoerflow has this function..I tried this code but didn't worked
var changesMade = false;
function onDataChanged() {
changesMade = true;
}
$('input:text, textarea, select').change(onDataChanged);
$('input:checkbox, input:radio').click(onDataChanged);
$("#homeicon").click(function() {
if (changesMade) {
return 'Changes have been made. Are you sure you want to leave the page?';
location.href = "home.html";
} else {
return null;
}
});

You are looking for onbeforeunload or beforeunload in jQuery.
check here as well as googling for other places with that term.

Validate a form without submitting

I have the following code that checks to see that two select fields are identical. The code works alright when called with onsubmit. However after doing this validation the form is still submitted. How can i prevent the script or my form from submitting the incorrect data.
Please see code below:
var fieldalias="Email address field"
function verify(element1, element2) {
var passed=false
if (element1.value=='') {
alert("Please fill out the "+fieldalias+"!")
element1.focus()
}
else if (element2.value=='') {
alert("Please verify the "+fieldalias+"!")
element2.focus()
}
else if (element1.value!=element2.value) {
alert("The two "+fieldalias+"s do not match")
element1.select()
}
else
passed=true
return passed
}

You didn't include your HTML, so I'm going to assume you've added onsubmit() to your form element.
If so, make sure your call looks like this:
onsubmit="return verify(element1, element2)"
(replace element1 and element2 accordingly)
If this assumption is not correct, please include some additional detail so we can better assist.

Try calling stopImmediatePropagation() on the event to prevent any further processing of the submit event by any other handlers in the form element or higher level elements.

Call that code with different event, like i.e: onchange, or onfocusout. This way the validation will be performed every time user enter some values to your fields, certainly before submitting.
EDIT:
I'm not sure if I understand you correctly but I would have attached your JS code this way:
First assign your select box to the variable:
var object_input = document.getElementById("selectId");
And then:
if(object_input.addEventListener)
{
object_input.addEventListener('blur', focus_lost);
object_input.addEventListener('keypress', checkForEnter);
}
else
{
object_input.attachEvent('onblur', focus_lost);
object_input.attachEvent('onkeypress', checkForEnter);
}
and then perform your validation ith focus_lost or checkForEnter.

Assuming that in the html code you have something like this:
<form action="test2.html" method="post" onsubmit="return verify(e1, e2);">
<input type="text" name="e1" /><br/>
<input type="text" name="e2" /><br/>
<input type="submit" value="Validate" />
</form>
You have to put in onsubmit event:
return verify(e1, e2);
so you will not go to the submiting page if the data is not valida
EDIT:
I think the problem is the
element1.select()
in the 3rd if, that this select method does not exist for a select object.
You can use a
element1.focus()
The code that will work is:
var fieldalias="Email address field"
function verify(element1, element2){
var passed=false;
if (element1.value==''){
alert("Please fill out the "+fieldalias+"!");
element1.focus();
}
else if (element2.value==''){
alert("Please verify the "+fieldalias+"!");
element2.focus();
}
else if (element1.value!=element2.value){
alert("The two "+fieldalias+"s do not match");
element1.focus();
}
else
passed=true;
return passed;
}
And
<form action="test2.html" method="post" onsubmit="return verify(document.getElementById('e1'), document.getElementById('e2'));">
<select id="e1">
<option value="One">One</option>
<option value="two">two</option>
<option value="Three">Three</option>
<option value="four">four</option>
</select><br/>
<select id="e2">
<option value="One">One</option>
<option value="two">two</option>
<option value="Three">Three</option>
<option value="four">four</option>
</select><br/>
<input type="submit" value="Validate" />
</form>

javascript myform.action doesn't

I'm trying to use javascript in JSP with a form. The form has a dropdownlist with an onchange event to call a function to sumbit the selected value to a servlet. I'm getting an error "Object doesn't support this action". What is the syntax error in my code?
Here is my code:
<form id="input" method="post" action="ResultServlet">
<input id=year type=text value="george">
<input id=year type=text value="mary">
<input id=year type=text value="fred">
<select id=casesId onchange = "sendCases();">
<option value="1">Test 1</option>
<option value="2">Test 2</option>
<option value="3">Test 3 </option>
</form>
<script typ=text/javascript>
function sendCases(){
var id = document.forms[0].caseId.options[document.forms[0].caseId.selectedIndex.value;
if (id !='' || id == null{
document.forms[0].action('CaseServlet').submit();
}
}
</script>
Any help you could give would be great. Thanks!

Change:
if (id !='' || id == null{
document.forms[0].action('CaseServlet').submit();
}
For:
if (id!='' || id == null) {
document.forms[0].action = 'CaseServlet';
document.forms[0].submit();
}
You have a syntax error where you forget to close the if. It might be a typo though.
action is not a method, it's a property. You don't execute it, you assign a value to it.
The submit() method only works on the form object, not something else :)