<form action="welcome.php" method="post" onsubmit="return validate();">
<fieldset>
<legend> <b>Personal Info</b> </legend>
<pre>
<b>First Name</b> <input type="text" id="fname" size="30">
<b>Last Name</b> <input type="text" id="lname" size="30">
<b>Phone Number</b> <input type="number" id="fn" size="30">
<fieldset>
<legend> <b>Gender</b> </legend>
<input type="radio" id="male" name="gender" value="Male">Male
<input type="radio" id="female" name="gender" value="Female">Female
</fieldset>
</pre>
</fieldset>
<input type="button" value="submit">
</form>
JavaScript function is validate(). If First name or Last name or Gender is empty, user will see a message and form will not submit. By using JavaScript function what will be the solution?
Note: Use id to get the component value rather than depending on fieldset.
Here html code goes...
<form name="myForm" action="demo_form.asp" onsubmit="return validateForm()" method="post">
First name: <input type="text" name="fname">
<input type="submit" value="Submit">
</form>
Here validation goes... return false will avoid sending request to backend.
If you won't use form name, then use document.getElementById(<id name>).value to get the value
function validateForm()
{
var x=document.forms["myForm"]["fname"].value;
if (x==null || x=="")
{
alert("First name must be filled out");
return false;
}
}
By using jquery you can get all the input values
Example:
var fname= $('#fname').val();
var lname= $('#lname').val();
Adding Required Attr to Input fields makes validation
<form action="welcome.php" method="post" onsubmit="return validate();">
<fieldset>
<legend> <b>Personal Info</b> </legend>
<pre>
<b>First Name</b> <input type="text" id="fname" required size="30">
<b>Last Name</b> <input type="text" id="lname" required size="30">
<b>Phone Number</b> <input type="number" id="fn" required size="30">
<fieldset>
<legend> <b>Gender</b> </legend>
<input type="radio" id="male" name="gender" value="Male">Male
<input type="radio" id="female" name="gender" value="Female">Female
</fieldset>
</pre>
</fieldset>
<input type="button" value="submit">
</form>
Why are you worrying about the field set, every element is having an id, so you can directly go for getting element with id.
document.getElementById("id-here")
Related
Im trying to learn form validation and I cannot figure out what is going on here. I am following a W3Schools tutorial and the validate form function is giving an error but it is not doing that on their example.
I tried copy and pasting the example into my project and just changing the property name and it still gives an error.
function validateForm() {
var x = document.forms["contact"]["yourName"].value;
if (x == "") {
alert("Please Enter Your Name");
return false;
}
}
<form name="contact" onsubmit="validateForm()">
<label for="cakeName">Cake name:</label>
<select required name="cakes" id="cakes">
<option value="placeholder">--- Select cake ---</option>
<option value="cakeOne">Coconut Bundt Cake</option>
<option value="cakeTwo">Cream Cheese Pound Cake</option>
<option value="cakeThree">German Chocolate Cake</option>
<option value="cakeFour">Classic Yellow Cake</option>
</select>
<br>
<label for="yourName">Your name:</label>
<input name="name" type="text">
<br>
<label for="message">Message</label>
<input name="message" type="text" placeholder="type your text you want written on the cake">
<br>
<label for="includes">Includes:</label>
<input type="checkbox" id="candle" name="candle" value="Candle">
<label for="candle">Candle</label>
<input type="checkbox" id="candle" name="candle" value="Candle">
<label for="candle">Firework</label>
<input type="checkbox" id="candle" name="candle" value="Candle">
<label for="candle">Toys</label>
<br>
<label for="deliveryDate">Deliver Date:</label>
<input type="date" id="date" name="date">
<br>
<label for='deliverTo'>Deliver to:</label>
<textarea name='deliverTo' id="deliverTo" cols="30" rows="10"></textarea>
<br>
<label for="callBefore">Call before deliver?</label>
<input type='radio' id="yes" name="callBefore" value="Yes">
<label for="yes">Yes</label>
<input type='radio' id="no" name="callBefore" value="No">
<label for="no">No</label>
<br>
<button type="submit" id="submit" class="submit" name="submit" value="bar">Order Now</button>
</form>
Issues with your code:
The field name was wrong.
You need to prevent your from default behavior which is reload or redirect to process it's data before submiting.
function validateForm(event) {
event.preventDefault(); // You didn't stop the subminssion default behavior
let x = document.forms["contact"]["yourName"].value;
if (x == "") {
alert("Please Enter Your Name");
return false;
}
}
<form name="contact" onsubmit="validateForm(event)">
<label for="yourName">Your name:</label>
<!-- You used a wrong name -->
<input name="yourName" type="text">
<button type="submit" id="submit" name="submit" value="bar">Order Now</button>
</form>
How we handle forms these days
const form = document.querySelector('#contact-form');
form.addEventListener('submit', (ev)=>{
// Stop the form submission from reloading or redirecting
ev.preventDefault();
let yourName = document.querySelector('#your-name').value;
if(yourName === ""){
alert("Please Enter Your Name");
return;
}
// Post the form with Fetch API or Axios ...
});
<form id="contact-form">
<label for="yourName">Your name:</label>
<input name="yourName" id="your-name" type="text">
<button type="submit" id="submit" name="submit" value="bar">Order Now</button>
</form>
I don't know if this will solve your problem (what was the error?) but the following line:
<input name="name" type="text">
Should be:
<input name="yourName" type="text">
I want to remake my payment form. I'm using GET method, and want to return link below form instead of redirect, after clicking submit. Someone have any idea?
<script type="text/javascript">
function formatMoney(e) {
document.getElementById('z24_kwota').value = (!isNaN(e.target.value) ? e.target.value : 0) * 100
}
</script>
<form method="get" id="myform" action="https://sklep.przelewy24.pl/zakup.php">
<input type="hidden" name="z24_id_sprzedawcy" value="000000">
<input type="hidden" name="z24_crc" value="000000">
<input type="hidden" name="z24_return_url" value="https://google.com">
<input type="hidden" name="z24_language" value="pl">
Tytuł wpłaty
<input type="text" name="z24_nazwa" id="pole" maxlength="30" value="" placeholder="Wprowadź tytuł wpłaty" required>
<br>
<input type="hidden" name="z24_kwota" id="z24_kwota">
Kwota wpłaty
<input type="text" id="pole" placeholder="Wprowadź kwotę wpłaty (PLN)" pattern="^([1-9])((\.\d{1,2})?)$|^((?!0)(\d){1,5})((\.\d{1,2})?)$|^(1(\d{5})(.\d{1,2})?)$|^(200000(.[0]{1,2})?)$" onkeyup="formatMoney(event)" required>
<br>
<BR>
<input type="submit" class="przycisk" value="zapłać teraz">
</form>
I checked all Internet, and can't find any solution
I'm making a web app and I'm struggling with replacing the page.
In the function myPage(), when I put the location.replace("file.html"); in the start, it works if I don't insert inputs on the web app, but when I put the location.replace("file.html"); in the if statement then doesn't work at all, and is there where I need to put the location.replace.
Please help me.
js code:
var submit = document.getElementById("submit");
submit.addEventListener("click",myPage);
function myPage(){
//location.replace("file.html"); // here this is working
var name=document.formId.nameRadio.value;//name="abc"
if (name=="abc"){
location.replace("file.html");//but here not
}
}
html code:
<form id="formId" name="formId" >
<label>sth </label><br><br>
<label for="name"> name </label>
<input type="text" id="name" name="name" required>
<fieldset>
<legend>sth</legend>
<ul class="class-radio" >
<li> <input type="radio" name="nameRadio" id="abc" value="abc" required><label for="abc">abc</label></li>
<li> <input type="radio" name="nameRadio" id="cdf" value="cdf"><label for="cdf">cdf</label></li>
</ul>
</fieldset>
<input id="submit" type="submit" value="next" >
</form>
change your button type to button. your browser submits first.
var submit = document.getElementById("submit");
submit.addEventListener("click",myPage);
function myPage(){
//location.replace("file.html"); // here this is working
var name=document.formId.nameRadio.value;//name="abc"
alert(name);
if (name=="abc"){
location.replace("file.html");//but here not
}
}
<form id="formId" name="formId" >
<label>sth </label><br><br>
<label for="name"> name </label>
<input type="text" id="name" name="name" required>
<fieldset>
<legend>sth</legend>
<ul class="class-radio" >
<li> <input type="radio" name="nameRadio" id="abc" value="abc" required><label for="abc">abc</label></li>
<li> <input type="radio" name="nameRadio" id="cdf" value="cdf"><label for="cdf">cdf</label></li>
</ul>
</fieldset>
<input id="submit" type="button" value="next" >
</form>
You can stop the usual form submission by adding preventDefault() to your onClick function.
var submit = document.getElementById("submit");
submit.addEventListener("click", myPage);
function myPage(e) {
//prevent form submission
e.preventDefault();
var name = document.getElementById('formId').nameRadio.value;
if (name == "abc") {
location.replace("file.html");
}
}
<form id="formId" name="formId">
<label>sth </label><br><br>
<label for="name"> name </label>
<input type="text" id="name" name="name" required>
<fieldset>
<legend>sth</legend>
<ul class="class-radio">
<li> <input type="radio" name="nameRadio" id="abc" value="abc" required><label for="abc">abc</label></li>
<li> <input type="radio" name="nameRadio" id="cdf" value="cdf"><label for="cdf">cdf</label></li>
</ul>
</fieldset>
<input id="submit" type="submit" value="next">
</form>
It seems that you want more control over the form submit.
You can change the input type from submit to button; Also rename that button to avoid confusion with submit method of the form.
You can also simplify the code, by using the click event directly on the input.
Here is something you can try:
<html>
<body>
<form id="formId" name="formId">
<label>sth</label><br><br>
<label for="name">name</label>
<input type="text" id="name" name="name" required>
<fieldset>
<legend>sth</legend>
<ul class="class-radio">
<li><input type="radio" name="nameRadio" id="abc" value="abc" required><label for="abc">abc</label></li>
<li><input type="radio" name="nameRadio" id="cdf" value="cdf"><label for="cdf">cdf</label></li>
</ul>
</fieldset>
<input id="btnSubmit" type="button" value="next" onclick="mySubmit()">
</form>
<script>
function mySubmit()
{
var name = document.formId.nameRadio.value;
if (name == "abc"){
location.replace("file.html");
} else {
// Submit a form
document.formId.submit();
}
}
</script>
</body>
</html>
Hi i have a form containing postal address and billing information. I want to copy postal address to billing information if information is same. I don't understand how i validate if checkbox is checked then copy postal address to billing information textbox.
My code is as follows:
!DOCTYPE html>
<title>My Example</title>
</head>
<body>
<form class="Form1" method="post">
<fieldset>
<legend>Personal Information</legend>
<label>Name
<input type="text" name="customer_name" required>
</label>
<label>Postal Adress
<input type="text" name="PostalAdress">
</label>
<label>Age
<input type="text" name="Age">
</label>
</fieldset>
</form>
<form class="Form2" method="get">
<fieldset>
<legend>Billing Information</legend>
<p>
<label>Billing Information is Same as the Postal Adress?</label></br>
<input type="checkbox" name="choice1">
<p>
<input type="submit" name="submit" value="Submit" onclick="validate()">
</p>
</p>
<p>
<label>Billing Information</label>
<input type="text" name="BillingInformation">
</p>
</fieldset>
</form>
<form class="Form3">
<fieldset>
<legend>Newsletter Subscription</legend>
<input type="radio" name="yes"><label>Yes</label>
<input type="radio" name="No"><label>No</label>
</fieldset>
</form>
<script>
function validate() {
var remember = document.getElementById("choice1");
if (choice1.checked) {
var src = document.getElementById("PostalAdress"),
dst = document.getElementById("BillingInformation");
src.addEventListener('input', function() {
dst.value = src.value;
});
};
</script>
</body>
</html>
Kindly help me what is wrong with my script and how do i do it.
The same with correct HTML syntax and proper JS
const myForm = document.getElementById('my-Form');
myForm.oninput = () =>
{
if (myForm.choice1.checked)
{
myForm.BillingInformation.value = myForm.PostalAdress.value
}
}
myForm.onsubmit = e =>
{
e.preventDefault() // to test the form without real submit
// get response
Array.from(new FormData(myForm),elm=>console.log(elm[0],'->',elm[1]))
}
label {white-space: nowrap;}
.as-console-wrapper {
max-height: 100% !important;
width: 50% !important;
top: 0; left: 50% !important;
}
<form id="my-Form" method="post" >
<fieldset>
<legend>Personal Information</legend>
<label>
Name
<input type="text" name="customer_name" required>
</label>
<label>
Postal Adress
<input type="text" name="PostalAdress">
</label>
<label>
Age
<input type="text" name="Age">
</label>
</fieldset>
<fieldset>
<legend>Billing Information</legend>
<p>
<label>
Billing Information is Same as the Postal Adress?
<input type="checkbox" name="choice1">
</label>
</p>
<p>
<label>Billing Information</label>
<input type="text" name="BillingInformation" />
</p>
</fieldset>
<fieldset>
<legend>Newsletter Subscription</legend>
<label><input type="radio" name="newsLetter" value="yes" checked > Yes </label>
<label><input type="radio" name="newsLetter" value="No" > No </label>
</fieldset>
<p>
<button type="submit" >Submit</button>
<button type="reset" >reset</button>
</p>
</form>
You can do it like this
$(document).ready(function(){
$(("input[name='choice1']").click(function(){
if($(this).is(":checked")){
var postal_address = $("input[name='PostalAdress']")
$("input[name='BillingInformation']").val(postal_address)
}
})
});
jQuery cdn
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
I know that this might seem like a duplicate, but i can't seem to figure this out. I am wanting to submit a form in HTML to a Popup window. when i hit the submit button, it returns a blank page. I want the pop up to display all of the input that one filled out one the form. I want to do it in JavaScript. This is my code here. I want it to output all of the information entered in the form, from the Personal Information fieldset and the personal choices fieldset. I want it to display as an unordered list.
Heres the Javascript that i have so far:
<head>
<title>My Form</title>
<script type="text/javascript">
function display() {
dispWin = window.open('','NewWin',
'toolbar=no,status=no,width=300,height=200')
message = "<ul><li>First Name:" +
document.mdForm.first_name.value;
message += "<li>Last Name:" +
document.mdForm.the_lastname.value;
message += "<li>Address:" +
document.mdForm.the_address.value;
message += "</ul>";
dispWin.document.write(message);
}
</script>
Heres the HTML:
<body>
<h1>My Form</h1>
<form name="mdForm" method="post" action="">
<fieldset>
<legend>Personal Information</legend>
<p><label class="question" for="first_name">What is your First name?
</label>
<input type="text" id="first_name" name="first_name"
placeholder="Enter your First name."
size="50" required autofocus /></p>
<p><label class="question" for="the_lastname">What is your Last name?
</label>
<input type="text" id="the_lastname" name="the_lastname"
placeholder="Enter your Last name."
size="50" required /></p>
<p><label class="question" for="the_address">What is you address?
</label>
<input type="text" id="the_address" name="the_address"
placeholder="Enter your address."
size="50" required /></p>
<p><label class="question" for="the_email">What is your e-mail address?
</label>
<input type="email" id="the_email" name="the_email"
placeholder="Please use a real one!"
size="50" required /></p>
</fieldset>
<fieldset>
<legend>Personal Choices</legend>
<p><span class="question">Please check all your favorite foods:</span>
</br>
<input type="checkbox" id="food_one" name="some_statements[]"
value="Buffalo Wings" />
<label for="food_one">Buffalo Wings</label><br/>
<input type="checkbox" id="food_two" name="some_statements[]"
value="Enchiladas" />
<label for="food_two">Enchiladas</label><br/>
<input type="checkbox" id="food_three" name="some_statements[]"
value="Hamburgers" />
<label for="food_three">Hamburgers</label><br/>
<input type="checkbox" id="food_four" name="some_statements[]"
value="Spaghetti" />
<label for="food_four">Spaghetti</label></p>
<p><span class="question">Select your favorite online store:</span><br/>
<input type="radio" id="the_amazon" name="online_store"
value="amazon" />
<label for="the_amazon">Amazon</label><br/>
<input type="radio" id="bestbuy_electronics" name="online_store"
value="bestbuy" />
<label for="bestbuy_electronics">BestBuy</label><br/>
<input type="radio" id="frys_electronics" name="online_store"
value="frys" />
<label for="frys_electronics">Frys Electronics</label><br/>
</p>
<p><label for="my_band"><span class="question">Who's your favorite band/ artist?</span></label><br/>
<select id="my_band" name="my_band" size="4" multiple>
<option value="The Chi-Lites">The Chi-Lites</option>
<option value="Michael Buble">Michael Buble</option>
<option value="Frank Ocean">Frank Ocean</option>
<option value="Labrinth">Labrinth</option>
</select>
</p>
</fieldset>
<div id="buttons">
<input type="submit" value="Click Here to Submit" onclick="display();" />
or
<input type="reset" value="Erase and Start Over" />
</div>
</form>
</body>
Have you prevented the default submit functionality?
Try:
function display(e) {
//To stop the submit
e.preventDefault();
...
Do your Stuff
...
//Continue the submit
FORM.submit();
}