Results page in other window - javascript

I have this simple form:
<form method="post" action".">
<input type="text" name="title">
<input type="submit" name"send">
</form>
I want that when a user click on submit, then will be open another window of browser with the results. Is it possible?

If you just need to open a new window:
<form method="post" action="..." target="_blank">
...
If you want a popup or lightbox or anything scripty:
<form method="post" action="..." onsubmit="yourFunction()">

Use this
<form method="post" action"thepagetodisplay.php">
<input type="text" name="title" id="title">
<input type="submit" name"send">
</form>
on thepagetodisplay.php
extract($_POST);
echo $title;

Related

How do I extract form data in html with js

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>

Select form data in multiple forms

i have a php loop like this:
<?php foreach($result as $row) { ?>
<form action="" method="post" name="my-form" id="my-form">
<input type="hidden" name="user-id" id="user-id" value="<?php $row['user_id']; ?>">
<input type="submit" name="submit" id="submit" value="Submit">
</form>
<?php } ?>
It will output a form on each loop.
Here is my javascript code:
document.getElementById("appointment-single-form").onsubmit = function (e) {
ev.preventDefault();
var queryString = $('#appointment-single-form').serialize();
console.log(queryString); // output to console: user-id={user's id from the specific form that was clicked/submitted}
}
Depending on the form clicked/submitted, I need to get the form values using javascript.
Question: Only the first form is working because getElementById only workes for one id. how can i make it so that I can click on any form? thanks
Use the following code. Idea is use a common class for each form and attach submit event on that class.
// Attach submit event on class, that is common for each form
$('.my-forms').on('submit',function(ev){
ev.preventDefault();
var curObj = $(this),queryString = curObj.serialize();
console.log(queryString);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<form action="" method="post" name="my-form1" id="my-form" class="my-forms">
<input type="hidden" name="user-id" id="user-id" value="1">
<input type="submit" name="submit" id="submit" value="Submit Form 1">
</form>
<form action="" method="post" name="my-form2" id="my-form" class="my-forms">
<input type="hidden" name="user-id" id="user-id" value="2">
<input type="submit" name="submit" id="submit" value="Submit Form 1">
</form>
<form action="" method="post" name="my-form3" id="my-form" class="my-forms">
<input type="hidden" name="user-id" id="user-id" value="3">
<input type="submit" name="submit" id="submit" value="Submit Form 1">
</form>
using jquery like this .Better use tagname or classname instead of ID of the form .Because Id is a unique
$(document).on('submit' ,'form',function(e){
e.preventDefault();
var query = $(this).serialize()
console.log(query)
})
Example
$(document).on('submit', 'form', function(e) {
e.preventDefault();
var query = $(this).serialize()
console.log(query)
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form action="" method="post" name="my-form" id="my-form">
<input type="hidden" name="user-id" id="user-id" value="<?php $row['user_id']; ?>">
<input type="submit" name="submit" id="submit" value="Submit">
</form>
<form action="" method="post" name="my-form" id="my-form">
<input type="hidden" name="user-id" id="user-id" value="<?php $row['user_id']; ?>">
<input type="submit" name="submit" id="submit" value="Submit">
</form>
<form action="" method="post" name="my-form" id="my-form">
<input type="hidden" name="user-id" id="user-id" value="<?php $row['user_id']; ?>">
<input type="submit" name="submit" id="submit" value="Submit">
</form>

Javascript do not submit form TRUE

<script type="text/javascript">
function myFunction(){
document.getElementById("form1").submit();
document.getElementById("form2").submit();}
</script>
<form id="form1" action="php/create.php">
Name </br><input type="text" name="inputName" value="" id=""> </input>
Hemsida </br><input type="text" name="inputPage" value="http://" id=""> </input>
<input type="button" onclick="return myFunction()" value="Submit"/>
</form>
<form id="form2" action="php/createhemerb.php">
<input type="text" name="inputFon" value="" id="fnid" hidden/>
<input type="text" name="inputJob" value="" id="fnid" hidden/>
</form>
I reach out to the php files but the both come out "please fill out the form 1" and "please fill out the form 2"
if(!$_POST['submit']) {
echo "please fill out the form";
header ('Location: please fill out the form 1');}
I have tried things back and fourth for hours i can not get it to work.
Please do the following to fix your issue:
Add method='post' to your forms
If you intend to check the value of $_POST['submit'], you need to name your button 'submit'.
You can't use echo and then header(''), it will set a 'header already sent exception'.
header('Location: some text') has no meaning, header('Location: file.html') is the correct syntax.
Full code:
<script type="text/javascript">
function myFunction(){
document.getElementById("form1").submit();
document.getElementById("form2").submit();
}
</script>
<form id="form1" action="php/create.php" method="post">
Name </br><input type="text" name="inputName" value="" id=""> </input>
Hemsida </br><input type="text" name="inputPage" value="http://" id=""> </input>
<input type="button" onclick="return myFunction()" value="Submit" name="submit"/>
</form>
<form id="form2" action="php/createhemerb.php" method="post">
<input type="text" name="inputFon" value="" id="fnid" hidden/>
<input type="text" name="inputJob" value="" id="fnid" hidden/>
</form>
PHP:
if(empty($_POST) || !$_POST['submit']) {
echo "please fill out the form";
//you can't set the header after echoing
//header ('Location: please fill out the form 1');//use header('Location: error.html') instead.
//or output a Javascript redirect echo "<script>window.location = 'error.html';</script>";
}
Hope this helps!

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