Get HTML form data into JavaScript - javascript

I need some help with my HTML, I'm attempting to pass my form data to a script called send.js, However nothing happens. I have a feeling my error lies input type however im not very good at html
<form method="post" name="myform">
<label for="msg">Message</label>
<textarea id="msg" name="msg" rows="5" cols="50"> </textarea> <br>
<label for="your_name">Your Name:</label>
<input type="text" name="your_name" id="your_name" /> <br>
<label for="customer_number">Customers Number:</label>
<input type="text" name="customer_number" id="customer_number" /> <br>
<input type="submit" value = "Send Message" onsubmit="f1">
</form>
<script> src="send.js"</script>
The send.js scripot is as follows
function f1()
{
var msg = document.getElementById("msg").value;
var your_name = document.getElementById("your_name").value;
var customer_number = document.getElementById("customer_number").value;
alert("value 1 = " + msg "value 2 = " + your_name "value 3 = " + customer_number );
}
Any input would be greatly apperciated

<form id="myForm" method="post" name="myform">
<label for="msg">Message</label>
<textarea id="msg" name="msg" rows="5" cols="50"> </textarea> <br>
<label for="your_name">Your Name:</label>
<input type="text" name="your_name" id="your_name" /> <br>
<label for="customer_number">Customers Number:</label>
<input type="text" name="customer_number" id="customer_number" /> <br>
<input type="submit" value = "Send Message" onsubmit="f1">
</form>
<script src="send.js"></script>
send.js
document.getElementById('myForm').onsubmit = f1();
OR
<form method="post" name="myform" onsumbit="f1()">

Related

Why does it only show the first input?

function showInput() {
document.getElementById('display').innerHTML =
document.getElementById("user_input").value;
document.getElementById("user_input1").value;
document.getElementById("user_input12").value;
document.getElementById("user_input123").value;
document.getElementById("user_input1234").value;
}
<form>
<label><b>Enter a Message</b></label>
<input type="text" name="message" id="user_input">
<input type="text" name="message" id="user_input1">
<input type="text" name="message" id="user_input12">
<input type="text" name="message" id="user_input123">
<input type="text" name="message" id="user_input1234">
</form>
<input type="submit" onclick="showInput();"><br/>
<label>Your input: </label>
<p><textarea id='display'></textarea></p>
I wanted this code to show all the inputs but it only shows the first one. What can i do to fix that.
You need to use + instead of ;
function showInput() {
document.getElementById('display').innerHTML =
document.getElementById("user_input").value +
document.getElementById("user_input1").value +
document.getElementById("user_input12").value +
document.getElementById("user_input123").value +
document.getElementById("user_input1234").value;
}

javascript onsubmit is not correctly working

All responses and help is greatly appreciated!
HTML:
<h1>CONTACT US</h1>
<form action="submit.html" target="_blank" method="post" onsubmit="return validate();">
<label for="name">NAME</label>
<input id="contact-name" name="name" placeholder="Please enter your name..." type="text">
<label for="email">EMAIL</label>
<input id="contact-email" name="email" placeholder="Please enter your contact email..." type="text">
<label for="email">MESSAGE</label>
<textarea id="contact-message" name="message" placeholder="Please enter your message.."></textarea>
<p></p>
<input type="submit" id="submit" value="SUBMIT MESSAGE">
</form>
JAVASCRIPT:
function validate() {
var username = document.getElementById("contact-name").value;
var email = document.getElementById("contact-email").value;
if (username==="" || email==="") {
alert("Please can you fill in all fields");
return false;
} else {
return true;
}
};
Are you sure you imported the file containing your Javascript into the HTML? See below:
function validate() {
var username = document.getElementById("contact-name").value;
var email = document.getElementById("contact-email").value;
if (username==="" || email==="") {
alert("Please can you fill in all fields");
return false;
} else {
return true;
}
}
<html>
<head>
</head>
<body>
<h1>CONTACT US</h1>
<form action="submit.html" target="_blank" method="post" onsubmit="return validate();">
<label for="name">NAME</label>
<input id="contact-name" name="name" placeholder="Please enter your name..." type="text">
<label for="email">EMAIL</label>
<input id="contact-email" name="email" placeholder="Please enter your contact email..." type="text">
<label for="email">MESSAGE</label>
<textarea id="contact-message" name="message" placeholder="Please enter your message.."></textarea>
<p></p>
<input type="submit" id="submit" value="SUBMIT MESSAGE">
</form>
<script src="script.js"></script>
</body>
</html>

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

How do I make my JavaScript email a form?

I am currently working on a 'contact form', I have been working on this for quite a while but, I just can't figure out how to make JavaScript email the form to my email adress.
This is my code :
<form id="myform" action="mailto:contact#anika.nl">
<label for="FirstName">Name:</label>
<input id="FirstName" name="FirstName" type="text" />
<label for="EMail">Email:</label>
<input id="EMail" name="EMail" type="text" />
<label for="Message">Message:</label>
<textarea id="Message" cols="20" name="Address" rows="5"></textarea>
<input name="submit" type="submit" value="Submit" />
</form>
<script type="text/javascript">// <![CDATA[
var frmvalidator = new Validator("myform");
frmvalidator.addValidation("FirstName","req","Please enter your First Name");
frmvalidator.addValidation("FirstName","maxlen=20", "Max length for FirstName is 20");
frmvalidator.addValidation("Email","maxlen=50");
frmvalidator.addValidation("Email","req");
frmvalidator.addValidation("Email","email");
// ]]></script>
Does someone see what I'm doing wrong/what's missing?

Categories

Resources