How do I extract form data in html with js - javascript

I'm trying to create a web app, and I need to know the user input from form.
<form action="" method="get" class="settings">
<div class="settings">
<label for="length">length of character(s): </label>
<input type="number" name="length" id="length" placeholder="5" required>
<input type="submit" value="Change">
</div>
</form>
I need the form to run a js func foo()
so I assume that I need to put it
<form action="" method="get" class="settings">
↑
how do I get the value of id="length" and use it in form action"foo()"?

You can get the value of length with document.getElementById("id").value;
In order to run a js from form, you need to use onsubmit="" instead of action=""
onsubmit="" allows you to execute a js function upon submission of the form,
while action="" allows you to be redirected to another page/site upon submission.
Read more about action="" in this site
onsubmit="" is here
Here is a workable code based on your example
function foo(){
var lgt = document.getElementById("length").value;
alert(lgt);
}
<form class="settings" onsubmit="foo()">
<div class="settings">
<label for="length">length of character(s): </label>
<input type="number" name="length" id="length" placeholder="5" required>
<input type="submit" value="Change">
</div>
</form>

Related

Creating multiple JavaScript error messages contact form?

I am new to JavaScript. I know how to create an alert box and now create an error message if a field was left empty in an HTML form, but can someone please show me how to display multiple error messages if more than one field is empty? Below is my HTML code for the form and JavaScript:
<form action="form.php" method="post" name="contactform"
onsubmit="return validateForm()">
<fieldset>
<legend>Your Details:</legend>
<label for="name">Name:</label><br>
<input type="text" name="name" id="name" onblur="validateForm()"><br>
<span id="error"></span>
<label for="email">Email:</label><br>
<input type="text" name="email" id="email"><br>
<label for="telephone">Telephone:</label><br>
<input type="text" name="telephone" id="telephone">
</fieldset>
<br>
<fieldset>
<legend>Your Information:</legend>
<p>
<label for="service">What service are you inquiring about?</label>
<select name="service" id="service">
<option value="Collision">Collision</option>
<option value="Mechanical">Mechanical</option>
<option value="Custom">Custom</option>
<option value="Other">Other</option>
</select>
</p>
<label for="comments">Comments:</label>
<br>
<textarea name="comments" id="comments" rows="4" cols="40">
</textarea><br>
<input type="submit" value="Submit"/>
</fieldset>
<script src="validate.test.js"></script>
</form>
function validateForm()
{
var name = document.forms["contactform"]["name"].value;
if (name == "")
{
document.getElementById('error').innerHTML="Please enter your name";
return false;
}
}
You need to surround your JavaScript code by script tag.
<script type="text/javascript">
function validateForm()
{
var name = document.forms["contactform"]["name"].value;
if (name == "")
{
document.getElementById('error').innerHTML="Please enter your
name";
return false;
}
}
</script>
One easy way is to use the required attribute on the input HTML elements.
it specifies that an input field must be filled out before submitting the form.
<form action="form.php" method="post" name="contactform"
onsubmit="return validateForm()">
<fieldset>
<legend>Your Details:</legend>
<label for="name">Name:</label><br>
<input type="text" name="name" id="name" required><br>
<span id="error"></span>
<label for="email">Email:</label><br>
<input type="text" name="email" id="email" required><br>
<label for="telephone" required>Telephone:</label><br>
<input type="text" name="telephone" id="telephone" required>
<input type="submit">
</fieldset>
Another approach is to use the javascript as you have described in your code snippet. That is useful if you need to customize the Error message for each field.
If what #alpeshpandya and #Agalo have answered solves your problem (even if not):
I think you are trying to validate only name input even if the user forgets to fill it. The onblur event fires when the input loses focus. You have some choices here: 1. you can validate when the user clicks to submit your form, 2. or putting your validateForm in the others input onblur, 3. or something else.
Validating when submitting form: a good way to validate the whole thing and set all error messages at once.
Validating using onfocus: in each input, you have to validate the other ones above it when user clicks on it (using onfocus or another event), e.g., when the user tries to go to another input, your error messages will pop.

Hijacking from submit to redirect page (Javascript)

So we're using an online service to handle webinars on our site.
I have full control of the HTML for the registration page but don't have control of the PHP file used in the registration. Currently, the registration form looks like this:
<form accept-charset="UTF-8" name="regform" id="regform" action="http://www.onlinemeetingnow.com/register/notify.php" class="infusion-form" method="POST">
<div class="infusion-field">
<label for="inf_field_FirstName">First Name *</label>
<input class="infusion-field-input-container" id="name" name="name" type="text" value="Your First Name" onfocus="if(this.value==this.defaultValue)this.value='';" onblur="if(this.value=='')this.value=this.defaultValue;"/>
</div>
<div class="infusion-field">
<label for="inf_field_Email">Best Email *</label>
<input class="infusion-field-input-container" id="email" name="email" type="text" value="Your Best Email" onfocus="if(this.value==this.defaultValue)this.value='';" onblur="if(this.value=='')this.value=this.defaultValue;"/>
</div>
<div class="infusion-submit">
<input type="submit" name="go" value="Sign Up for Webinar!" />
</div>
</form>
This submits the values from the form to "notify.php". notify.php apparently has code to force the iframe this code is hosted inside of, to redirect to another page. I don't want this to happen.
I want the form to submit, but then I want to send the user to my own ThankYou page. I'm thinking that the best way to do this is by "hijacking" the submission and sending them to the page I want.
I thought that maybe calling a custom javascript function using onsubmit might work. Here's what I have right now:
<form accept-charset="UTF-8" name="regform" id="regform" action="http://www.onlinemeetingnow.com/register/notify.php" class="infusion-form" method="POST" onsubmit="return doRedirect();">
<div class="infusion-field">
<label for="inf_field_FirstName">First Name *</label>
<input class="infusion-field-input-container" id="name" name="name" type="text" value="Your First Name" onfocus="if(this.value==this.defaultValue)this.value='';" onblur="if(this.value=='')this.value=this.defaultValue;"/>
</div>
<div class="infusion-field">
<label for="inf_field_Email">Best Email *</label>
<input class="infusion-field-input-container" id="email" name="email" type="text" value="Your Best Email" onfocus="if(this.value==this.defaultValue)this.value='';" onblur="if(this.value=='')this.value=this.defaultValue;"/>
</div>
<div class="infusion-submit">
<input type="submit" name="go" value="Sign Up for Webinar!" />
</div>
</form>
<script language="javascript" type="text/javascript">
function doRedirect()
{
window.location.replace("http://stackoverflow.com");
return true;
}
</script>
For some reason it's not working though. The iframe continues to redirect to the page I don't want, and the window itself isn't being redirected.
Am I doing this right or is there a better way of achieving this?
Thank you in advance for your help!
Jason
UPDATE: I've confirmed that the javascript is never executing. I added: window.alert("JAVASCRIPT EXECUTED"); and the pop-up never happens so this appears to be an issue with onSubmit rather than the javascript itself. Why won't the javascript execute in onSubmit? I tried changing it to onSubmit="JavaScript:doRedirect();" and that didn't work either.
This should do the trick:
<input type="submit" name="go" onclick="doRedirect();" value="Sign Up for Webinar!" />
If you are looking to completely remove the interaction with the php form, remove the action from the <form> tag
<form accept-charset="UTF-8" name="regform" id="regform" class="infusion-form" method="POST">
If you are willing to try AJAX:
<script src="http://code.jquery.com/jquery-2.0.0.min.js"></script>
<script>
jQuery(function($) {
$('#regform').submit( function(e){
$.ajax({
type: 'post',
data: $(this).serialize(),
url: $(this).attr("action")
})
.done(function (data){
$(location).attr('href', 'http://stackoverflow.com');
});
e.preventDefault();
});
});
</script>
<form accept-charset="UTF-8" name="regform" id="regform" action="http://www.onlinemeetingnow.com/register/notify.php" class="infusion-form" method="POST">
<div class="infusion-field">
<label for="inf_field_FirstName">First Name *</label>
<input class="infusion-field-input-container" id="name" name="name" type="text" value="Your First Name" onfocus="if(this.value==this.defaultValue)this.value='';" onblur="if(this.value=='')this.value=this.defaultValue;"/>
</div>
<div class="infusion-field">
<label for="inf_field_Email">Best Email *</label>
<input class="infusion-field-input-container" id="email" name="email" type="text" value="Your Best Email" onfocus="if(this.value==this.defaultValue)this.value='';" onblur="if(this.value=='')this.value=this.defaultValue;"/>
</div>
<div class="infusion-submit">
<input type="submit" name="go" value="Sign Up for Webinar!" />
</div>
</form>

take HTML inputs and build a query string

I need to build a form takes the user inputs and builds a query string, and then loads that URL
For example
<form id="form1" name="form1" method="post" action="">
<p>
<label>INPUT1
<input type="text" name="INPUT1" id="INPUT1" />
</label>
</p>
<p>
<label>INPUT2
<input type="text" name="INPUT2" id="INPUT2" />
</label>
</p>
<p>
<label>
<input type="submit" name="loadURL" id="loadURL" value="Submit" />
</label>
<br />
</p>
</form>
http://website.com&model=<INPUT1>&cathegory=<INPUT2>
Is there a way to do this using just HTML, or does this need javascript? Any pointers on the easiest way to do this is appreciated.
Just set the action="/some/form/processor" and the method="get" (instead of post) and the fields in the form will be sent as the query string.
To get your example of http://website.com&model=<INPUT1>&cathegory=<INPUT2> you would have
<form id="form1" name="form1" method="get" action="http://website.com">
<!-- or, more simply, since the website _is_ website.com -->
<form id="form1" name="form1" method="get" action="/">
The input names are used as the parameters, so your complete form would be
<form id="form1" name="form1" method="get" action="/">
<p>
<label>INPUT1
<input type="text" name="model" id="INPUT1" />
</label>
</p>
<p>
<label>INPUT2
<input type="text" name="cathegory" id="INPUT2" />
</label>
</p>
<p>
<label>
<input type="submit" name="loadURL" id="loadURL" value="Submit" />
</label>
<br />
</p>
</form>

why the page refresh a time?

<form method="get" action="/" onsubmit="SubmitForm()">
<input type="text" title="" value="" name="q" class="search-input" id="gsearch" />
<input type="submit" value="" name="sa" id="search-button"/>
</form>
<script type="text/javascript">
function SubmitForm(){
window.open("http://test.com/gsearch.php?cx=015214977:8tebxhu0mrk&cof=FORID:11&ie=GB2312&as_q="+document.getElementById('gsearch').value);
return false;
}
</script>
when i submit the button, the original page refresh a time. how to prevent it? thank you.
change your form onsubmit attribute and insert a return like this:
<form method="get" action="/" onsubmit="return SubmitForm();">
You correctly return false from your SubmitForm method, but you're not capturing that response in the onsubmit handler of the form. Change it to this:
<form method="get" action="/" onsubmit="return SubmitForm()">
Note the addition of the return keyword in the above.
You don't need to use JavaScript for this. This will work same way:
<form method="get" target="_blank" action="http://test.com/gsearch.php">
<input type="hidden" name="cx" value="015214977:8tebxhu0mrk" />
<input type="hidden" name="cof" value="FORID:11" />
<input type="hidden" name="ie" value="GB2312" />
<input type="text" title="" value="" name="as_q" class="search-input" id="gsearch" />
<input type="submit" value="Submit" id="search-button"/>
</form>
JavaScript is all nice and good, but really no need to use it when plain HTML can do the same thing exactly.

Sending Dual Forms with one submit, while pulling the email field from first Form into the second

I have two forms I need to send - the first form is a PHP mailer that takes the info from a bunch of fields and mails it to a recipent. That form has a checkbox and if checked I need the email from that for to be sent via ANOTHER form to a list server adding them to mailing list. I need all this to happen when clicking the submit button from the first form. Can anyone help me with a solution. Thanks.
Form
<form class="form_1" method="post" enctype="multipart/form-data" onSubmit="return validate()">
<div class="field">
<div class="text2">
<input type="text" id="name" value="<?php echo $_POST['name'];?>" name="name" title="Name" />
</div>
<!--text2-->
<div class="req">*</div>
<!--req-->
</div>
<!--field-->
<div class="field field_right">
<div class="text2">
<input type="text" id="email" name="email" value="<?php echo $_POST['email'];?>" title="Email" />
</div>
<!--text2-->
<div class="req">*</div>
<!--req-->
</div>
Sign-up for newsletter
Upload Resume:
<div class="clearer"></div>
<br />
<div class="field">
<input type="submit" value="Send" class="btn3" />
</div>
<!--field-->
</form>
Form 2
<form action="http://www.example.com/mailing_list.html" method="post" name="xxxxxxx" onSubmit="return (!(UPTvalidateform(document.UPTmxxxxxx)));">
<input type="hidden" name="submitaction" value="3">
<input type="hidden" name="mlid" value="xxxxxx">
<input type="hidden" name="siteid" value="xxxxxx">
<input type="hidden" name="tagtype" value="q2">
<input type="hidden" name="demographics" value="-1">
<input type="hidden" name="redirection" value="http://www.xxxx.com/thankyou.php">
<input type="hidden" name="uredirection" value="http://">
<input type="hidden" name="welcome" value="">
<input type="hidden" name="double_optin" value="">
<input type="hidden" name="append" value="">
<input type="hidden" name="update" value="on">
<input type="hidden" name="activity" value="submit">
<tr><td colspan="2"></td></tr><tr><td> </td><td> <div class="text1"><input type="text" name="email" id="email" />
</div></td></tr><tr><td colspan="2"><button type="submit" name="send" value="send" class="button1"></button></td></tr>
On your form, have the button tie back to a javascript event
<input type = 'button' value='Submit!' onclick='submitForms()' />
Then have that javascript function, submitForms, actually submit both of your forms.
document.forms["form1"].submit();
document.forms["form2"].submit();
You will probably need to do the second submission using PHPs curl wrapper so that you only have one form for the user to fill in. Is there any reason you must have two forms?
So it would work like this:
User submits form
Code sends first email
If checkbox checked then submit curl request to second form
Complete
A recent SO answers contains a simple intro to the curl post request process: How to issue HTTP POST request?

Categories

Resources