passing input details from one page to another page textarea - javascript

Myself I am beginner and at learning stage. I would like to pass input details from one page (test1.html) to next page textarea (test2.html). attaching both html files.
test1.html(first page)
<html>
<body>
<form method="post" action="test2.html">
<label><b>Customer Name</b></label>
<input type="text" placeholder="Enter Customer Name" name="cname" id="cname" required>
<script>
function () {
localStorage.setItem('mySharedData1', document.getElementById('cname').value);
}
</script>
<button type="submit" name='submit' id='submit'>Submit</button>
<input type="checkbox" checked="checked"> Remember me
</body>
</html>
test2.html(second page)
<html>
<body>
<form method="get" action="test1.html">
<fieldset class="fieldset-auto-width">
<legend><b><font color="#0000FF">Your Bookings Are..!</font color></b></legend>
<textarea cols="35" rows="19" id="Requirement1" ></textarea>
<script type="text/javascript">
var mySharedData = localStorage.getItem('mySharedData1');
function(){
Requirement1.value =Requirement1.value+document.getElementById('mySharedData1').innerHTML+this.value+", ";
}
</script>
</fieldset>
</form>
</body>
</html>

function(){
Requirement1.value =Requirement1.value+document.getElementById('mySharedData1').innerHTML+this.value+", ";
}
This should be:
function getValue() {
var value = localStorage.getItem('mySharedData1');
document.getElementById('Requirement1').innerHTML = value;
}

You have to give a name to the function in both html pages, and actually use the onclick attribute of your button Submit. I wrote on one page only
<html>
<body>
<form method="post" action="test2.html">
<label><b>Customer Name</b></label>
<input type="text" placeholder="Enter Customer Name" name="cname" id="cname" required>
<script>
function giveMeOneName() {
localStorage.setItem('mySharedData1', document.getElementById('cname').value);
}
</script>
<button type="submit" name='submit' id='submit' onclick="giveMeOneName()">
Submit
</button>
<input type="checkbox" checked="checked"> Remember me
</body>
</html>

You need to create a function and invoke that function on click submit.
<form>
<label>
<b>Customer Name</b>
</label>
<input type="text" placeholder="Enter Customer Name" name="cname" id="cname" required>
<script>
function setValue() {
localStorage.setItem('mySharedData1', document.getElementById('cname').value);
}
</script>
<button type="submit" name='submit' id='submit' onClick="setValue()">Submit</button>
<input type="checkbox" checked="checked"> Remember me

Related

send data with form 2 html js

<form>
First Name:
<INPUT type="text" ><br>
<input type="radio"><br>
<input type="checkbox"><br>
<input type="textarea">
</FORM>
<FORM action="file.php" method="post" name=form1>
<INPUT type="submit" value="Submit">
</FORM>
https://jsfiddle.net/674brq05/
Not sure I understand your question, but you can get the form information from JS:
<form onsubmit="myFunc()">
Enter name: <input type="text" id="name">
<input type="submit">
</form>
The above does so the function "myFunc()" runs on submit.
And then the JS:
function myFunc() {
var name = document.getElementById('name');
alert(name.value);
return false; // Return false to cancel the submit
}
Way to take two form tag for submitting one form:
Try this:
HTML:
<form id="myForm" action="action_page.php">
First name: <input type="text" name="fname"><br>
Last name: <input type="text" name="lname"><br><br>
<input type="button" onclick="myFunction()" value="Submit form">
</form>
JAVASCRIPT:
<script>
function myFunction() {
document.getElementById("myForm").submit();
}
</script>

How can I stop this HTML form opening a new tab?

I have created a HTML form to send a message to HipChat, however, it keeps opening a new tab saying it's sent from HipChat when I click the submit button. How can I prevent that? I want it to stay on the same page, possibly with a JavaScript popup telling them it's sent, without a redirect.
Code:
<html>
<body>
<form id="myForm" action="https://api.hipchat.com/v1/rooms/message" method="post">
<input type="hidden" name="room_id" value="example">
<input type="hidden" name="message_format" value="text">
<input type="hidden" name="from" value="example">
<input type="hidden" name="color" value="red">
<input type="hidden" name="notify" value="1">
<input type="hidden" name="auth_token" value="example">
What is your name?
<br>
<br>
<input type="text" name="message" id="myMessage">
<br>
<br>
<input type="submit" value="Submit">
</form>
<script type="text/javascript">
window.onload = function() {
document.getElementById("myForm").onsubmit = function() {
var msgElement = document.getElementById("myMessage");
var textToSend = '#example' + msgElement.value;
msgElement.value = textToSend;
alert("Alert");
return true;
}
};
</script>
</body>
</html>

Form does not shows on clicking using JS

I have made form and it is hidden using CSS display property. I have button. I want to show the form when I click that button. I have done everything from my end but still form does not show up.
<input type="button" value="Popup" onclick="showLoginForm();"/>
<form id="loginForm" action="" method="post" style="display:none;">
<p><strong>ID:</strong> </p>
<strong>Name: *</strong> <input type="text" id="Name" name="Name" /><br/>
<strong>Number: *</strong> <input type="text" id="Number" name="Number" /><br/>
<strong>Email: *</strong> <input type="text" id=""="Email" name="Email" /><br/>
<input type="submit" id = "submit" name="submit" value="Submit">
</form>
Below is my JS function which is not trigerring.
$("button").click(function(e) {
$("#loginForm").show();
e.preventDefault();
});
The function showLoginForm() is not defined. Your jquery was listening for a button click, when your button is of type input.
$("input[type=button]").click(function(e) {
$("#loginForm").show();
e.preventDefault();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<input type="button" value="Popup" />
<form id="loginForm" action="" method="post" style="display:none;">
<p><strong>ID:</strong> </p>
<strong>Name: *</strong> <input type="text" id="Name" name="Name" /><br/>
<strong>Number: *</strong> <input type="text" id="Number" name="Number" /><br/>
<strong>Email: *</strong> <input type="text" id=""="Email" name="Email" /><br/>
<input type="submit" id = "submit" name="submit" value="Submit">
</form>
Or with the function defined:
function showLoginForm(){
$("#loginForm").show();
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<input type="button" value="Popup" onclick="showLoginForm();"/>
<form id="loginForm" action="" method="post" style="display:none;">
<p><strong>ID:</strong> </p>
<strong>Name: *</strong> <input type="text" id="Name" name="Name" /><br/>
<strong>Number: *</strong> <input type="text" id="Number" name="Number" /><br/>
<strong>Email: *</strong> <input type="text" id=""="Email" name="Email" /><br/>
<input type="submit" id = "submit" name="submit" value="Submit">
</form>
Your issue is that your input is type button, not a button element itself.
so either changing your input to a button or changing your jquery binding to $('input[type=button]') ought to work
http://jsfiddle.net/4Lz5rsq3/

jquery on submit form search for its corresponding div and hide form

I have multiple forms in same page with submit , i want to hide the form after form submit and display a link for the respective forms
Below is the html i have the same class name for all the forms
and for the submit class also.
<div id="wpcf7-f63-p1-o1">
<form name="" class="wpcf7-form" action="" method = "post">
<input type="text" name="your-name" value="" size="40" />
<input type="text" name="email" value="" size="40" />
<input type="submit" value="Send" class="but" />
</form>
</div>
<div id="wpcf7-f63-p1-o2">
<form name="" class="" action="" method = "post">
<input type="text" name="your-name" value="" size="40" />
<input type="text" name="email" value="" size="40" />
<input type="submit" value="Send" class="but" />
</form>
</div>
i tried the below code
<script>
jQuery(".wpcf7-form").submit(function()
{
jQuery("^wpcf7-f63-p1-").hide();
});
</script>';
In your example typed:
jQuery("^wpcf7-f63-p1-").hide();
i think should be:
jQuery("#wpcf7-f63-p1-o1").hide();
Use this on form submit
$('input[type="submit"]').click(function() {
$form = $(this).parent();
$('<p>link to form</p>').insertBefore($form);
$form.hide();
});
Are you looking for jquery .find() ?
you could do something like this:
$('form').submit(function(){
$(this).find('.myForm').hide();
$(this).find('.link').show();
}
.link {
display:none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<form name="" class="" action="" method = "post">
<div class="myForm">
<input type="text" name="your-name" value="" size="40" />
<input type="text" name="email" value="" size="40" />
<input type="submit" value="Send" class="but" />
</div>
<a class="link" href="#">Link</a>
</form>
ah error on your jquery selector, change your js to:
jQuery(".wpcf7-form").submit(function()
{
jQuery("[id^='wpcf7-f63-p1-']").hide()
return false;
});
working jsfiddle code
NB. you may need to delete the return false, I added it to see the elements getting disappeared after submit.

form getting submitted even if validation fails

I have a page where i am disabling the button after submit for 10 seconds and if validation succeeds form is submitted. However, the form is getting submitted even though validation is returning false.
I tried using
<input type="submit">
instead of image still same issue.
Below is the code:
<html>
<head>
<script>
function enableMe(myBtn) {
myBtn.disabled = false;
}
function doValidation() {
document.getElementById('hidden1').value = 'true';
return false;
}
</script>
</head>
<body>
<form id="loginForm" method="post" action="https://www.mySite.com/authService">
<label for="userid">Username</label><br/>
<input type="text" value="" id="userid" name="userid"/>
<br/>
<label for="password">Password</label>
<br/>
<input type="password" value="" id="password" name="password"/>
<br/>
<br/>
<input type="image" id="submitBtn" src="btn_login.gif"
onsubmit="this.disabled=true; setTimeout(enableMe,10000,this); return doValidation();">
<input type="hidden" id="hidden1" name="hidden1" value="false"/>
</form>
</body>
</html>
Validation should be attached to form, not input element...
<form id="whatever" ... onsubmit="return doValidation();">

Categories

Resources