I am looking for a simple way to pre-fill a field in my contact form when ever a user clicks on a link that is given in some other page.
This is my contact form in html :
<form method="post" action="submit.php" >
<p>Your name:
<br /><input name="name" /></p>
<p>Your email:
<br /><input name="email" /></p>
<p>Your message:
<br /><textarea name="message" id="message" rows="10" cols="50"></textarea></p>
<p><input type="submit" value="Send" /></p>
</form>
I want to fill the "message" field with "some text" when a user clicks on a url like www.xyz.com/contact.html?setmessagefield=some_text
A more modern way would be to use the URL() constructor and the searchParams property. Let the browser engine do the work!
(new URL(window.location.href)).searchParams.forEach((x, y) =>
document.getElementById(y).value = x)
Try it online! or on Stack Overflow:
const hash = '?name=some_text&email=more%20text';
const example = "http://example.com/" + hash;
(new URL(example)).searchParams.forEach((x, y) =>
document.getElementById(y).value = x);
<p>Your name:
<br /><input name="name" id="name" /></p>
<p>Your email:
<br /><input name="email" id="email" /></p>
JavaScript has no built-in functions to parse url parameters like that (Since those GET parameters are usually used to send data to the server).
I'd suggest using a hash instead (A hash is purely client-side):
www.xyz.com/contact.html#name=some_text&email=more%20text
Now, add some id's to your fields:
<p>Your name:
<br /><input name="name" id="name" /></p>
<p>Your email:
<br /><input name="email" id="email" /></p>
Then set the values like this, on load:
var hashParams = window.location.hash.substr(1).split('&'); // substr(1) to remove the `#`
for(var i = 0; i < hashParams.length; i++){
var p = hashParams[i].split('=');
document.getElementById(p[0]).value = decodeURIComponent(p[1]);;
}
Working example
The big advantage of this is that it's flexible. If you want to set the values of 2 fields, you supply those 2 fields' id's in the hash:
www.xyz.com/contact.html#name=some_text&email=more%20text
4 fields? 4 id's:
www.xyz.com/contact.html#name=some_text&email=more%20text&username=john&age=23
No need to edit the code, then.
Don't bother with JavaScript if you're using PHP.
Just add a little something to the HTML:
<form method="post" action="submit.php" >
<p>Your name:<br />
<input name="name" value="<?php echo htmlspecialchars($_GET['name']) ?>" /></p>
<p>Your email:<br />
<input name="email" value="<?php echo htmlspecialchars($_GET['email']) ?>"/></p>
<p>Your message:<br />
<textarea name="message" id="message" rows="10" cols="50">
<?php echo htmlspecialchars($_GET['message']) ?>
</textarea></p>
<p><input type="submit" value="Send" /></p>
</form>
You can retrieve your current url with window.location.href and then get the default message via a regular expression :
var msg = window.location.href.match(/\?setmessagefield=(.*)/);
document.getElementById("message").value = msg[1];
Related
This is my html register page for entering the details:
<form id = "tform" onsubmit="return false;">
<h1>Register</h1>
<p><label>Name</label>
<br><input type="text" id="fname" name="fname">
</p>
<p><label>Username</label>
<br><input type="text" id="uname" name="uname">
</p>
<p><label>Create Password</label>
<br><input type="password" id="psw" name="psw">
</p>
<p><label>Confirm Password</label>
<br><input type="password" id = "pswc" name=psw>
</p><input type ="submit" value="Submit" onclick="validform()">
</form>
The validation code works but I would also like to implement json function so I can store the user data when I enter all the details correctly, it works separately but I don't know how to combine the two. Here is my code for json:
function StoreUser(){
var userObj = {};
userObj.name = document.getElementById("fname").value;
userObj.username = document.getElementById("uname").value;
userObj.password = document.getElementById("psw").value;
//Store user
localStorage[userObj.name] = JSON.stringify(userObj);
//Inform user of result
document.getElementById("tform").innerHTML = "<b> Register Done";
}
I have some HTML and Javascript code that sends a form using method=post to an action="www.randomaction.com/randomaction.php".
Now I want to see exactly how it sends it to the action by also sending it to my mail (the same post), however I don't want to have the site open the users mail client to do this, I want it to send from my gmail account to my other gmail account.
my code looks like this:
<form action="http://www.randomaction.com/shared/AddClient/index.php" class="form hod-hasharon" data-name="Email Form Hod Hasharon" data-redirect="http://www.kbanim.com/landing-pages/thank-you" id="wf-form-Email-Form-Hod-Hasharon-2" method="post" name="wf-form-Email-Form-Hod-Hasharon" redirect="http://www.kbanim.com/landing-pages/thank-you">
<div class="w-embed w-script">
<script type="text/javascript" language="JavaScript">
<!--
var MediaTitle= document.URL;
if(MediaTitle.includes("facebook"))
{
MediaTitle= "facebook";
}
if(MediaTitle.includes("googles"))
{
MediaTitle= "google search";
}
if(MediaTitle.includes("googlem"))
{
MediaTitle= "google media";
}
if(MediaTitle.includes("googler"))
{
MediaTitle= "google remraketing";
}
document.write('<input type=hidden data-name="MetaTitle" id="MetaTitle" name="MetaTitle" required="required" ');
document.write(' value="' + document.URL + '">');
document.write('<input type=hidden data-name="Password" id="Password" name="Password" required="required" value="jkq0105">');
document.write('<input type=hidden data-name="ProjectID" id="ProjectID" name="ProjectID" required="required" value="6661">');
//-->
</script>
</div>
<input class="_3 hod-hasharon text-field w-input" data-name="Fname" id="Fname" maxlength="256" name="Fname" placeholder="שם מלא:" required="required" type="text">
<input class="_2 hod-hasharon text-field w-input" data-name="Phone" id="Phone" maxlength="256" name="Phone" placeholder="טלפון:" required="required" type="text">
<input class="hod-hasharon text-field w-input" data-name="Email" id="Email" maxlength="256" name="Email" placeholder="מייל:" required="required" type="email">
<input class="submit-button w-button" data-wait="שולח..." type="submit" value=" שליחה >>">
</form>
Any suggestions?
Thank you in advance!
The method POST doesn't send anything visible to the page.
Your POST information will be available in a PHP array in your PHP file :
$_POST
If you want to access a single value from your form :
$_POST['yourInputID']
I have a 2-step registration process which consists of 2 different HTML pages.
The second (and final) step collects all the data and sends it to the server for evaluation. For simplicity, let's say I collect user's name in the first form and user's age in the second:
formA.html:
<form action="formb.html" method="get">
Name: <input id="age" type="text" name="age">
<input id="submit_button" type="submit" value="CONTINUE">
</form>
formB.html:
<form action="serverscript.py" method="post">
Age: <input id="name" type="text" name="name">
<input id="submit_button" type="submit" value="SUBMIT">
</form>
How can I "propagate" the "name" that user has entered in formA.html to formB.html so that I can send name,age to the server?
p.s. The only way I can thinkg is doing it with and then parsing the URL in formB , but that seems very ugly...
formA.html:
<form action="formb.html" method="get">
Name: <input id="Name" type="text" name="Name">
<input id="submit_button" type="submit" value="CONTINUE">
</form>
In form B make This Changes...
formB.html:
<form action="serverscript.py" method="post">
Age: <input id="age" type="text" name="age">
<input id="Name" type="hidden" value="">
<input id="submit_button" type="submit" value="SUBMIT">
</form>
<script type="text/javascript">
var query = window.location.search.substring(1);
var Field=query.split("=");
document.getElementById("Name").value = Field[1];
</script>
Hope it will help ;)
I can think of 3 ways :
1) cookie. store the information in a cookie and read it in the second form
2) Query string.You can chain the the data to query string and read it on form B
3) You can use the action attribute of a form which can take a url. (recommended)
You can build the data you get from form A as html hidden input fields within form B on load, since you are sending your data through 'GET' method, then when you submit form B, the data will be sent to the server.
Edit
Assuming am using PHP as server side :
forma.php
<form action="formb.php" method="get">
Name: <input id="name" type="text" name="name">
<input id="submit_button" type="submit" value="CONTINUE">
</form>
formb.php
<form action="postPage.php" method="post">
Age: <input id="age" type="text" name="age">
<?php
if(isset($_GET['name'])
{
?>
<input id="name" type="hidden" name="name" value="<?php echo $_GET['name']?>"/>
<?php } ?>
<input id="submit_button" type="submit" value="SUBMIT">
</form>
Try using HTML5 sessionStorage to store data in browser session. During the session, a user could visit other pages of the domain, or other sites entirely, then return to the original domain. Any data saved in sessionStorage during that session will remain available, but only to pages in the original domain, until the tab or window is closed.
Chrome's "Save Password" feature apparently makes a simple choice when offering to remember passwords: It looks at the value of the previous input field in the DOM and offers to key the password to that value. So if you have this username/password combo:
<form>
<input value="myname" />
<input value="mypassword" />
</form>
the browser will offer to save the password "mypassword" under the key "myname".
This presents a problem when using Dojo ValidationTextBox however, because the Dojo parser inserts an invisible INPUT control that contains a character "X" used as a validation icon (simplified HTML view):
<form>
<div>
<input value="X" />
<input value="myname" />
</div>
<div>
<input value="X" />
<input value="mypassword" />
</div>
</form>
Under this circumstance Chrome offers to remember "mypassword" under the name of "X", which is awkward.
Is it possible to override this behavior in Chrome? Or do we need to rewrite this functionality in Dojo?
Add name properties to the validation widgets:
this.username = new ValidationTextBox({ name: 'username' });
this.password = new ValidationTextBox({ name: 'password' });
Or declaratively:
<input type="text" name="username" data-dojo-type="dijit/form/ValidationTextBox" />
<input type="text" name="password" data-dojo-type="dijit/form/ValidationTextBox" />
This will produce nodes with name attributes which Chrome will be able to use to associate the value with a key. Your simplified HTML view would then look like this:
<form>
<div>
<input value="X" />
<input name="username" value="myname" />
</div>
<div>
<input value="X" />
<input name="password" value="mypassword" />
</div>
</form>
I've figured out how you can make this to work. When you use the name attribute with the appropiate values(username, password) the username value will be the input value above the password input.
1. Surround your fields with a form
<form method="post">
<input type="text" autocomplete="username" data-dojo-props="selectOnClick: true, uppercase: true" data-dojo-type="dijit/form/ValidationTextBox" required="required" />
</form>
2. Add an autocomplete to your input field with the value 'username' and 'password'
<input type="text" autocomplete="username" data-dojo-props="selectOnClick: true, uppercase: true" data-dojo-type="dijit/form/ValidationTextBox" required="required" />
<input type="password" autocomplete="password" data-dojo-props="selectOnClick: true, uppercase: true" data-dojo-type="dijit/form/ValidationTextBox" required="required" />
3. Add a button to submit or just a regular button
<input type="submit" value="send" />
See the fiddle
I am trying to get value of input using js but it doesn't work. Where is my mistake?
Alert doesn't work.
<body>
<form name="inputform" id="form1" action="html_form_action.asp" method="get" style="visibility:hidden">
Email: <input type="text" name="email" ></input>
<input type="button" value="Gönder" onclick="CreateU()"></input>
</form>
</body>
js file:
var xmail="";
CreateU = function(){
var xx = "";
xmail=document.getElementById('email').value;
alert(xmail);
xx= myAddress + xmail + ans + tf;
window.location.assign(xx);
}
Your email input doesn't have an ID:
<input type="text" name="email" id="email" />
Add id to your "Email" input: <input type="text" name="email" id="email" ></input>
Have a look: http://jsfiddle.net/K8kp9/
Note that now you possibly see nothing because of style="visibility:hidden" at your form tag..
Have some reading: Difference between id and name attributes in HTML
email is a name, just change 'name' to 'id' ^^
please set the id in email
<body>
<form name="inputform" id="form1" action="html_form_action.asp" method="get" style="visibility:hidden">
Email: <input type="text" name="email" id="email" ></input>
<input type="button" value="Gönder" onclick="CreateU()"></input>
use id attribute in the input to get the value by using document.getElementById().
<input type="text" name="email" id="email" ></input>
you forgot to mention id='email' in your input element.