How to validate checkbox and if validated copy one textbox into another - javascript

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>

Related

Add new created label and input-text to form using dom Javascript?

I have three fields that will be filled by the user.
one for the question, and the two others for the proposed answers. I want to give the user the possibility to add the third or as much as he wants propositions whenever he clicks at add proposition. I started coding the function but it's still missed
<head>
<script>
function myFunction(){
var x = document.createElement("LABEL");
var t = document.createTextNode("Titre");
x.appendChild(t);
}
</script>
</head>
<body>
<form id="myForm" method="POST" action="./exam_coordinates">
<label for="question"> Question </label> <br>
<input class="champ" type="textarea" name="question" id="question" value=""><br><br>
<label for="ans"> Answers </label> <br>
<input type="checkbox" name="ans1" id="ans1" values="" />
<input type="text" name="ans1" id="ans1" value=""><br>
<input type="checkbox" name="ans2" id="ans2" />
<input type="text" name="ans2" id="ans2" value=""><br>
<br>
<button onclick="myFunction()">Add proposition</button> <br><br><br>
<input type="submit" value="submit">
</form>
</body>
If I'm getting your question right, you need to add inputs to get more answers from user as he wants. If so, see the following -
var addButton = $('#add_button');
var wrapper = $('#more_answers');
$(addButton).click(function(e) {
e.preventDefault();
var lastID = $("#myForm input[type=text]:last").attr("id");
var nextId = parseInt(lastID.replace( /^\D+/g, '')) + 1;
$(wrapper).append(`<div><input type="checkbox" name="ans${nextId}" id="ans${nextId}" values="" /> <input type="text" name="ans${nextId}" id="ans${nextId}" value=""/>Delete<div>`);
});
$(wrapper).on("click", ".delete", function(e) {
e.preventDefault();
$(this).parent('div').remove();
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<body>
<form id="myForm" method="POST" action="./exam_coordinates">
<label for="question"> Question </label> <br>
<input class="champ" type="textarea" name="question" id="question" value=""><br><br>
<label for="ans"> Answers </label> <br>
<input type="checkbox" name="ans1" id="ans1" values="" />
<input type="text" name="ans1" id="ans1" value=""><br>
<input type="checkbox" name="ans2" id="ans2" />
<input type="text" name="ans2" id="ans2" value=""><br>
<div id="more_answers"></div>
<br>
<button id="add_button">Add proposition</button> <br><br><br>
<input type="submit" value="submit">
</form>
</body>
In your function, you have to append your label as well in its parent. Like below -
function myFunction() {
var form = document.getElementById("myForm");
var input = document.createElement("input");
form.appendChild(input)
}
<form id="myForm" method="POST" action="./exam_coordinates">
<label for="question"> Question </label> <br>
<input class="champ" type="textarea" name="question" id="question" value=""><br><br>
<label for="ans"> Answers </label> <br>
<input type="checkbox" name="ans1" id="ans1" values="" />
<input type="text" name="ans1" id="ans1" value=""><br>
<input type="checkbox" name="ans2" id="ans2" />
<input type="text" name="ans2" id="ans2" value=""><br>
<br>
<button type="button" onclick="myFunction()">Add proposition</button> <br><br>
<input type="submit" value="submit">
</form>
If you want to put your elements at any specific place, you should create a wrapper in your form element just like below -
function myFunction() {
let wrapper = document.getElementById("dynamic-fields");
var input = document.createElement("input");
wrapper.appendChild(input)
}
<form>
<!-- ...input fields... -->
<div id="dynamic-fields"></div> <br>
<!-- ...buttons.... -->
<button type="button" onclick="myFunction()">Add proposition</button>
</form>
This way it will put those dynamically generated elements on specific place in your form page.
Try this - https://jsitor.com/IO08f-WBx

Submitting Form in a popup window

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();
}

HTML form with JavaScript Function

I have a script
<html>
<head>
<title> FORM REGISTRASI </title>
<link rel="stylesheet" type="text/css" href="css/coba.css">
</head>
<body>
<script type="text/javascript" src="js/default.js"></script>
<!--Input-->
<form name="fform" class="daftar">
<h1>REGISTRASI AKUN</h1>
<fieldset class="row1">
<legend>Emal</legend>
<p>
<label>Email</label><input type="text" placeholder="Email" name="email">
<label>Password</label><input type="password" placeholder="Password">
</p>
<p>
<label>Konfirmasi Email</label><input type="text" placeholder="Konfirmasi Email">
<label>Konfirmasi Password</label><input type="password" placeholder="Konfirmasi Password">
</p>
</fieldset>
<fieldset class="row2">
<legend>Biodata Pengguna</legend>
<p>
<label>Nama Lengkap</label><input type="text" class="panjang" placeholder="Nama Lengkap" name="nama">
</p>
<p>
<label>Nomor Telepon</label><input type="text" maxlength="12" name="telepon">
</p>
<p>
<label> Alamat </label>
<textarea cols="32" rows="5" placeholder="Alamat" name="alamat"></textarea>
</p>
</fieldset>
<fieldset class="row3">
<legend>Biodata Lain</legend>
<p>
<label>Jenis Kelamin</label>
<input type="radio" value="Pria" name="Pria">
<label class="JK">Pria</label>
<input type="radio" value="Wanita" name="Wanita">
<label class="JK">Wanita</label>
</p>
<p>
<label>Tempat Lahir</label>
<input class="panjangkota" type="text" maxlength="20" name="tempatlahir" />
</p>
<p>
<label>Tanggal Lahir</label>
<input type="date" size="2" maxlength="2" name="tanggal" />
</p>
<p>
<label>Hobby</label>
<input type="checkbox" value="Browsing" name="Browsing">
<label class="hobby">Browsing</label>
<input type="checkbox" value="Membaca" name="Membaca">
<label class="hobby">Membaca</label>
</p>
<p>
<label> </label>
<input type="checkbox" value="Sepakbola" name="Sepakbola">
<label class="hobby">Sepakbola</label>
<input type="checkbox" value="Galau" name="Galau">
<label class="hobby">Galau</label>
</p>
</fieldset>
<div><input type="button" value="kirim" onclick="daftar()"></div>
<tr>
<div><input type="reset" value="ulang"></div>
</form>
<!--Output-->
<hr>
<form class="daftar2">
<h1>OUTPUT</h1>
<fieldset class="row4">
<legend>Pendaftaran Akun</legend>
<p>
<label>Nama Depan :</label><input type="text" name="znama">
</p>
<p>
<label>Nomor Telepon :</label><input type="text" name="ztelepon">
</p>
<p>
<label>Email :</label><input type="text" name="zemail">
</p>
<p>
<label>Jenis Kelamin :</label><input type="text" name="zJK">
</p>
<p>
<label>Tempat Lahir :</label><input type="text" name="ztempatlahir">
</p>
<p>
<label>Tanggal Lahir :</label><input type="text">
</p>
<p>
<label>Hobby :</label><input type="text" name="zHobby">
</p>
<p>
<label>Alamat :</label><textarea cols="32" rows="5" zalamat></textarea>
</p>
</fieldset>
</form>
</body>
</html>
and I have a JavaScript code link this:
function daftar()
{
var emailstr = (document.fform.email.value);
var namastr = (document.fform.nama.value);
var teleponstr = (document.fform.telepon.value);
var alamatstr = (document.fform.alamat.value);
var tempatlahirstr = (document.fform.tempatlahir.value);
//obejek teks
(document.fform.zemail.value) = emailstr;
(document.fform.znama.value) = namastr;
(document.fform.ztelepon.value) = teleponstr;
(document.fform.ztempatlahir.value) = tempatlahirstr;
//textarea
(document.fform.zalamat.value) = alamatstr;
//radio button
if (fform.Pria.checked)
{
Pria = (document.fform.Pria.value);
(document.fform.zJK.value) = Pria;
} else
if (fform.Wanita.checked)
{
Wanita = (document.fform.Wanita.value);
(document.fform.zJK.value) = Wanita;
}
//checkbox
if (fform.Browsing.checked)
{
Browsing = (document.fform.Browsing.value);
(document.fform.zHobby.value) = Browsing;
} else
if (fform.Membaca.checked)
{
Membaca = (document.fform.Membaca.value);
(document.fform.zHobby.value) = Membaca;
} else
if (fform.Sepakbola.checked)
{
Sepakbola = (document.fform.Sepakbola.value);
(document.fform.zHobby.value) = Sepakbola;
} else
if (fform.Galau.checked)
{
Galau = (document.fform.Galau.value);
(document.fform.zHobby.value) = Galau;
}
I want to print all item (specially for text and radio/checkbox object, don't see date object) in the input form to output form with one javascript function, when i try to submit all item, it didn't shown on output form. What wrong with that code and how to print all of them to the output form? Please help me, this is my collage assignment. (If you want, you can copy and paste that code to test that code).
For this pupose why dont you use angular js?
its simple and easy bro.
<!DOCTYPE html>
<html>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<body>
<div ng-app="">
<p>Input something in the input box:</p>
Name:<input type="text" name="name" ng-model="name"><br>
<p>Gender: <input type="radio" ng-model="gen" value="male" name="gen">Male
<input type="radio" ng-model="gen" value="female" name="gen">Female</p>
<p ng-bind="name"></p>
<p ng-bind="gen"></p>
</div>
</body>
</html>
Learn more Angularjs from W3schools :)

form validation in JS for checkboxes

I'm trying to do a homework assignment and having some issues. I'm supposed to validate a form with Javascript. Right now I'm trying to make sure that a user has checked at least one checkbox (out of four options) in order for the form to submit. (I've gotten other segments of validation to work, so the issue seems to be local to this part of code.)
This is what the html for the checkbox form looks like:
<fieldset>
<input type="checkbox" name="boxes" id="member" value="member" />
<label for="member">I'm a member.</label>
<p><input type="checkbox" name="boxes" id="newsletter" value="newsletter" />
<label for="newsletter">Please send me your monthly newsletter.</label></p>
<p><input type="checkbox" name="boxes" id="preshow" value="preshow" />
<label for="preshow">I'm interested in hearing about pre-show events.</label></p>
<p><input type="checkbox" name="boxes" id ="none" value="none" />
<label for="none">None of the above.</label></p>
And this is what I've written to try to validate it using Javascript:
function validateForm() {
var checkBoxes = document.getElementsByName("boxes");
for (var i=0; i < checkBoxes.length; i++) {
if (checkBoxes[i].checked === true) {
return true;
break;
} else {
alert("At least one checkbox must be selected.");
return false;
}
}
}
This isn't working; the form submits whether boxes have been checked or not.
I would really love to get some help here because I don't have any idea what I'm doing wrong. Like I said, the problem seems to exist somewhere in this specific code, because other validation in separate blocks of code does work.
This is the complete HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8"/>
<title> hw5 </title>
<link rel ="stylesheet" href="form.css"/>
<script src="form.js"></script>
<script src="states.js"></script>
<!--<script src="browser.js"></script>-->
</head>
<body>
<div>
<h1><b>Buy your tickets online</b></h1>
<form name="theForm" method="post" action="https://cs101.cs.uchicago.edu/~sterner/show-data.php" onsubmit="return validateForm(this)">
<section id="name-and-address">
<fieldset>
<h2 class="name">Full name</h2>
<label for="firstname">First name:</label> <input type="text" name ="firstname" id="firstname" autofocus="autofocus" />
<p><label for="lastname">Last name:</label> <input type="text" name ="lastname" id="lastname" /></p>
</fieldset>
<fieldset>
<h2 class="Billing Address">Billing Address</h2>
<label for="street">Street name and number:</label>
<input type="text" name ="street" id="street" />
<p><label for="city">City:</label>
<input type="text" name="city" id="city" /></p>
<p><label for="state">State:</label>
<select id="state" name="state">
</select></p>
<p><label for="zip">Zip code:</label>
<input type="text" name="zip" id="zip" /></p>
</fieldset>
</section>
<section>
<aside>
<fieldset>
<h2 class="payMethod">Method of Payment</h2>
<p class="row">
<input type="radio" id="pay-pal" name="payment" value="pay-pal" />
<label for="pay-pal">PayPal</label>
</p>
<p class="row">
<input type="radio" id="credit" name="payment" value="credit" />
<label for="credit">Credit Card</label>
</p>
</fieldset>
<fieldset>
<input type="checkbox" name="boxes" id="member" value="member" />
<label for="member">I'm a member.</label>
<p><input type="checkbox" name="boxes" id="newsletter" value="newsletter" />
<label for="newsletter">Please send me your monthly newsletter.</label></p>
<p><input type="checkbox" name="boxes" id="preshow" value="preshow" />
<label for="preshow">I'm interested in hearing about pre-show events.</label></p>
<p><input type="checkbox" name="boxes" id ="none" value="none" />
<label for="none">None of the above.</label></p>
</fieldset>
<fieldset>
<p><label for="email">Email address:</label>
<input type="email" name="email" id="email" /></p>
</fieldset>
</aside>
</section>
<section id="submit">
<fieldset>
<input type="submit" value="Buy my tickets."/>
</fieldset>
</section>
</div>
</body>
</html>

how to get the values from fieldset using javascript?

<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")

Categories

Resources