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>
Related
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>
So I have a basic form that takes in Name, Email, Date of Arrival, Date of Departure and Comment with a big "Send" button. Here is the code for that:
<form class="form" id="form1" action="mailto:myemail#email.com" method="post">
<p class="name">
<input name="Name" type="text" class="validate[required,custom[onlyLetter],length[0,100]] feedback-input" placeholder="Name" id="name" />
</p>
<p class="email">
<input name="Email" type="text" class="validate[required,custom[email]] feedback-input" id="email" placeholder="Email" />
</p>
<p class="email">
<input name="Date Of Arrival" type="date" class="validate feedback-input" id="date" placeholder="Date Of Arrival" />
</p>
<p class="email">
<input name="Date Of Departure" type="date2" class="validate feedback-input" id="date2" placeholder="Date Of Departure" />
</p>
<p class="text">
<textarea name="Text" class="validate[required,length[6,300]] feedback-input" id="comment" placeholder="Comment"></textarea>
</p>
<div class="submit">
<input type="submit" value="SEND" id="button-blue"/>
<div class="ease"></div>
</div>
</form>
It successfully opens up my mail client with an email. The issue is that this is what is in the body of the email:
Name+%250D%250A+=Name+Test&Email+%250D%250A=test%40email.com&Date+Of+Arrival+%250D%250A=09%2F04%2F2015&Date+Of+Departure+%250D%250A=24%2F04%2F2015&Text=This+is+a+test+comment
How can I style this? I have looked online and can't figure it out.
For this example, this is how I would like the email body to look:
Name: Name Test
Email: test#email.com
Date of Arrival: 09/04/2015
Date of Departure: 24/04/2015
Message Body: This is a test comment.
I wouldn't mind having the subject field repopulated too with "booking request" or something.
Thanks!
It's quite easy. All you have to do is specify your Content Type (MIME). Change your form to:
<form class="form" id="form1" action="mailto:myemail#email.com" method="post" enctype="text/plain">
Define enctype in form tag:
<form class="form" id="form1" action="mailto:myemail#email.com" method="post" ENCTYPE="text/plain">
Unfortunately what you can do here in terms of formatting is very limited. I would suggest to have a look at this answer:
Mailto on submit button
<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")
I am trying to find away to select all inputs within a form using jquery, where the trigger was initiated from. so for example if the button was clicked in form 1 only the inputs from form 1 would be selected, and nothing from form 2 would be selected.
<form action="" method="POST"> <!--form 1-->
<input type="text" />
<input type="text" />
<input type="hidden" value="87678" />
<input type="button" onclick="doit()" />
</form>
<form action="" method="POST"> <!--form 2-->
<input type="text" />
<input type="text" />
<input type="hidden" value="87678" />
<input type="button" onclick="doit()" />
</form>
Try this...
$(':button').on('click', function(){
var form = $(this).parents('form:first');
$(form).children().each(function(evt){
if($(this).attr('type') == 'text'){
alert(this.value);
}
});
});
See this Example jsFiddle
Greetings.
$('input[type=button]').click(function(){
console.log( $('input',$(this).closest('form')) )
});
http://jsfiddle.net/kR3ws/1/
Use the event target to get to the parent form and the find all inputs in that form
function doit(event){
$(event.target).parent("form").find("input")
}
for this to work you will have change your html of the anchor tag to
<input type="button" onclick="doit(event)" />
Add id fields to your buttons and forms.
<form id="form1" action="" method="POST"> <!--form 1-->
<input type="text" />
<input type="text" />
<input type="hidden" value="87678" />
<input id="btn1" type="button" onclick="doit()" />
</form>
<form id="form2" action="" method="POST"> <!--form 2-->
<input type="text" />
<input type="text" />
<input type="hidden" value="87678" />
<input id="btn2" type="button" onclick="doit()" />
</form>
Then declare event like this :
$('#btn1').click(function(){
var data = $('#form1').serialize();
alert('form1 : '+data);
});
$('#btn2').click(function(){
var data = $('#form2').serialize();
alert('form2 : '+data);
});
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?