How to get the other form details using javascript? - javascript

I have two forms namely form1 and form2 .
First I submit form1. It goes to the form2 page. Here I need form1 details. How do I do this?


try this code
the first way with php
form1:
<html>
<head>
<title>form1</title>
</head>
<body>
<form action="form2.php" method="post">
<input type="text" name="input1">
<input type="submit">
</form>
</body>
</html>
here this form now submit to form2.php:
<?php
if(isset($_POST)){
?>
<html>
<head>
<title>form2</title>
</head>
<body>
<form action="" method="post">
<input type="text" name="input2" value="<?php echo $_POST['input1'];?>">
<input type="submit">
</form>
</body>
</html>
<?php
}
?>
so now the value of input in the form1
will be in the input value of form2
and if form1 is not submitted form2 wouldn't appear
the second way with jquery
$('#submit').click(function() {
var input1 = $('#input1').val();
$("#form1").hide();
$("#input2").val(input1);
$("#form2").show();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<html>
<head>
<title>title</title>
</head>
<body>
<form id='form1' action="form2.php" method="post">
<div>form1</div>
<input id='input1' type="text" name="input1">
<input id='submit' type="button" value="submit">
</form>
<form id='form2' action="" method="post" style='display:none'>
<div>form2</div>
<input id='input2' type="text" name="input2" value="">
<input type="submit">
</form>
</body>
</html>

Related

How to login website https://www.travelportroomsandmore.com/ automatically using html and javascript

I tried to login using the following source code. However, I can not login that website. Please help me. Thanks.
<!doctype html>
<!-- saved from url=(0014)about:internet -->
<html>
<title>Autologin</title>
</head>
<body>
<form id="login_form" name="login_form" method="post" action="https://www.travelportroomsandmore.com/login">
<input id="sign_in_login" name="sign_in_login" type="text" value="Name" class="" />
<input id="sign_in_password” name="sign_in_password" type="password" value="examplepassword"/>
<input type="hidden" id="loginid" name="loginid"/>
</form>
<script>document.login_form.submit();</script>
</body></html>

<!doctype html>
<!-- saved from url=(0014)about:internet -->
<html>
<title>Autologin</title>
</head>
<body>
<form id="login_form" name="login_form" method="post" action="https://www.travelportroomsandmore.com/login">
<input id="sign_in_password" name="sign_in_login" type="text" value="Name" class="" />
<input id="sign_in_password" name="sign_in_password" type="password" value="examplepassword"/>
<input type="hidden" id="loginid" name="loginid"/>
</form>
<script>document.login_form.submit();</script>
</body></html>

Submit a POST Form that is in iframe in other domain name

Assuming that website1.com/page_1.php has a form like this :
<form action="http://www.website1.com/action" method="post" id="myForm">
<input type="hidden" name="_token" value="sdfddgfg">
<input type="hidden" name="category_id" value="1">
<input type="submit" class="btn send" value="Send">
</form>
And website2.com/page_2.php has iframe like that :
<iframe src="http://www.website1.com/page_1.php"></iframe>
Using JQuery or JS ,How can I submit the form with id myForm without click when visiting website2.com/page_2.php?.

You could do something like this just in the HTML of your iframe (you don't need to do anything on the "parent" window:
<html>
<head>
</head>
<body>
<form action="https://www.yoursite.com/" method="post" id="myForm">
<input type="hidden" name="_token" value="sdfddgfg">
<input type="hidden" name="category_id" value="1">
<input type="submit" class="btn send" value="Send">
</form>
<script>
(function() {
document.getElementById('myForm').submit()
})();
</script>
</body>
</html>

Why I'm not able to change id demo's inner html here?

<p id="demo"></p>
<form name="names" action="" method="POST" onsubmit="getinputs(document.getElementByName(firstname),document.getElementByName(secondname))">
Your name:<br>
<input type="text" name="firstname"><br>
Your crush's name:<br>
<input type="text" name="secondname">
<input type="submit" value="Submit">
<br>
</form>
<script>
function getinputs(one, two)
{
document.getElementById('demo').innerHTML=one+two;
}
</script>
How should I change this to make it work as intuitive?
I want to pass both the values through the form.

Get your elements by id and prevent form submission. See below:
function getinputs(one, two) {
event.preventDefault();
document.getElementById('demo').innerHTML=one+two;
}
<p id="demo"></p>
<form name="names" action="" method="POST" onsubmit="getinputs(document.getElementById('firstname').value,document.getElementById('secondname').value)">
Your name:<br>
<input type="text" name="firstname" id="firstname"><br>
Your crush's name:<br>
<input type="text" name="secondname" id="secondname">
<input type="submit" value="Submit">
<br>
</form>
https://jsfiddle.net/qL0m7px2/

this approach will not wait for the script to be executed on form submit, and the form will be submitted. If you want to execute js code on submit of the form, you need to make the foll. changes
<form name="names" action="" method="POST" onsubmit="return getinputs(document.getElementByName(firstname),document.getElementByName(secondname))">
----
----
</form>
And then the script:
<script>
function getinputs(one, two)
{
document.getElementById('demo').innerHTML=one+two;
return false;
}
</script>

I'd replace your code with
function getinputs() {
var form = document.querySelector('#form-id');
document.querySelector('#demo').innerHTML =
form.firstname.value + form.secondname.value;
}

Try this, Hope it will help.
<html>
<body>
<form name="names" action="" method="POST" onsubmit="return getinputs()">
Your name:<br>
<input type="text" id="firstname"><br>
Your crush's name:<br>
<input type="text" id="secondname">
<input type="submit" value="Submit">
<br>
</form>
<script>
function getinputs()
{
var one=document.getElementById("firstname");
var two=document.getElementById("secondname");
document.getElementById("demo").innerHTML=one.value+two.value;
return false;
}
</script>
<p id="demo" ></p>
</body>
</html>

You need to make following changes
getElementByName should be getElementsByName
document.getElementsByName('firstname')[0].value
<script>
function getinputs(one, two)
{
event.preventDefault();
document.getElementById('demo').innerHTML=one+ " " + two;
}
</script>
<p id="demo"></p>
<form name="names" action="" method="POST" onSubmit="getinputs(document.getElementsByName('firstname')[0].value, document.getElementsByName('secondname')[0].value)">
Your name:<br>
<input type="text" name="firstname"><br>
Your crush's name:<br>
<input type="text" name="secondname">
<input type="submit" value="Submit">
<br>
</form>

html onclick javascript function call to show something

I want to call gettotal function to get value from textbox and * 3 and show the result in other textbox , code does not work
where is the problem!?
<html>
<head>
<script type="text/javascript" language="javascript">
function gettotal()
{
var x=0;
x=document.getElementById("pop").value*3;
document.getElementById("pop1").innerHTML="<b>"+x+"</b>";
}
</script>
<title>hello</title>
</head>
<body>
<form name="form1">
<input type="button" id="btn" name="btn" value="get" OnClick="gettotal()"/>
<input type="text" id="pop" name="pop" size="3"/>
<br/>
<br/>
<input type="text" id="pop1" name="pop1" size="5" value="val"/>
</form>
</body>
</html>

<html>
<head>
<script type="text/javascript" language="javascript">
function gettotal()
{
var x=0;
x=document.getElementById("pop").value*3;
document.getElementById("pop1").value=x;
}
</script>
<title>hello</title>
</head>
<body>
<form name="form1">
<input type="button" id="btn" name="btn" value="get" OnClick="gettotal()"/>
<input type="text" id="pop" name="pop" size="3"/>
<br/>
<br/>
<input type="text" id="pop1" name="pop1" size="5" value="val"/>
</form>
</body>
</html>

Instead of .innerHTML() (used to asign HTML tags to element) use .value to assign value to an input field like #Azzi mentioned in his answer :
function gettotal()
{
var x=0;
x=document.getElementById("pop").value*3;
document.getElementById("pop1").value=x;
}
<form name="form1">
<input type="button" id="btn" name="btn" value="get" onClick="gettotal()"/>
<input type="text" id="pop" name="pop" size="3"/>
<input type="text" id="pop1" name="pop1" size="5" value="val"/>
</form>
Hope this helps.

Contact form doesn't send data

I have a simple contact form on contact.php, but submitting it there is no any data into corresponding php file (mail.php).
form inside contact.php
<form id="contact" action="" method="post">
<input id="name" type="text" name="name" width="250" size="35" placeholder="Your name">
<br><br>
<input id="email" type="text" name="email" width="250" size="35" placeholder="Your mail">
<br><br>
<textarea id="message" name="message" rows="6" cols="40" placeholder="Your message"></textarea>
<br><br>
<input type="button" value=" SEND " id="submit" />
<input type="reset" value="Reset" name="reset">
</form>
js inside contact.php
$('#submit').click(function(){
$.post("mail.php", $("#contact").serialize(), function(response) {
$('#success').html(response);
});
return false;
});
mail.php
print_r( $_POST );
if((empty($_POST['name'])) || (empty($_POST['email'])) || (empty($_POST['message']))){
die("All fields must be filled !");
}
result:
Array ( ) All fields must be filled !

Working Example:
<html>
<head>
<title>Example</title>
<style type="text/css">
div { color:blue; margin:3px; cursor:pointer; }
</style>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('#submit').click(function(e){
$.post("mail.php", $("#contact").serialize(), function(response) {
$('#success').html(response);
});
return false;
});
});
</script>
</head>
<body>
<div id="success"></div>
<form name="contact" id="contact" method="post">
<?php
for($i=1;$i<=10;$i++)
{?>
Text Box <?php echo $i; ?> <input type="text" name="in<?php echo $i; ?>"/><br/><br/>
<?php
}
?>
<input type="submit" name="submit" id="submit"/>
</form>
</body>
</html>
mail.php
<?php
print_r( $_POST );
if((empty($_POST['name'])) || (empty($_POST['email'])) || (empty($_POST['message']))){
die("All fields must be filled !");
}
?>

It's work for me.
This is a.html file
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<script type="text/javascript" src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
<script type="text/javascript">
$(function(){
$('#submit').click(function(){
$.post("x.php", $("#contact").serialize(), function(response) {
$('#success').html(response);
});
});
});
</script>
</head>
<body>
<form id="contact" action="" method="post">
<input id="name" type="text" name="name" width="250" size="35" placeholder="Your name">
<br><br>
<input id="email" type="text" name="email" width="250" size="35" placeholder="Your mail">
<br><br>
<textarea id="message" name="message" rows="6" cols="40" placeholder="Your message"></textarea>
<br><br>
<input type="button" value=" SEND " id="submit" />
<input type="reset" value="Reset" name="reset">
</form>
</body>
</html>
This is x.php file
<?php
print_r( $_POST );
if((empty($_POST['name'])) || (empty($_POST['email'])) || (empty($_POST['message']))){
die("All fields must be filled !");
}
?>

Try it, will prevent your form to submit naturally:
$('#submit').click(function(e){
e.preventDefault();
});
One other change you may try is:
$("#contact").serializeArray()

Categories