I really need help... :-) I have two html pages and forms on both of them. I need solution to show field value from first form (on first page) in field on second form, after click on SEND button. But, I need both pages to stay open, on first I need to insert values and on second page that values should be shown. Also, I need a solution without PHP because this app will be running on local devices, without server. I don't have any solution and please, I need some tips how I can do that.
I found here some solutions with localStorage and it looks interested but I need to stay on First page and send field value to Second page, in live. There is code which I found here, this is example what I need, just I need both pages to be open and after I insert some value in field on first page and click on button, that value should be shown in field on second page. Thank you in advance!
<html>
<head>
<title>First Page</title>
<script type="text/javascript">
function saveVal() {
var inputFirst = document.getElementById("name").value;
localStorage.setItem("name", inputFirst);
inputFirst = localStorage.getItem("name");
}
</script>
</head>
<body>
<form action="secondPage.html" method="get">
<label>
First Name:
<input name="name" size="20" maxlength="25" type="text" id="name" />
</label>
<input type="submit" value="submit" onclick="saveVal()"/>
</form>
</body>
</html>
<html>
<head>
<title>Second Page</title>
</head>
<body>
<form action="#">
<label>
First Name:
<input name="name" size="20" maxlength="25" type="text" id="name"
readonly="readonly" />
</label>
<script type="text/javascript">
var storedVal = document.getElementById("name");
storedVal.value = localStorage.getItem("name");
</script>
</form>
</body>
</html>
You can use setInterval to constantly check and set the value:
//this will run storeCheck function every 250 miliseconds and update values from localStorage.
setInterval(storeCheck, 250);
function storeCheck() {
var storedVal = document.getElementById("name");
storedVal.value = localStorage.getItem("name");
}
Related
I am trying to correct an HTML form that works in IE11 compatibility view but behaves differently if not in compatibility.
The user can change the values in the form input elements and then click Save.
The Save button grabs the innerhtml of the entire page and stores it into a hidden input element, then proceeds to submit the form. In CV mode, the innerhtml contains the edits the user made. When NOT in CV mode, the innerhtml is the original rendering.
How can I collect the new values in the fields?
<html>
<head>
<script type="text/javascript">
function saveit() {
var markup = document.documentElement.innerHTML;
document.getElementById("html1").setAttribute("value", markup);
document.htmlform.submit();
}
</script>
</head>
<body>
<form name="htmlform" id="htmlform" method="post">
<input type="hidden" name="html1" id="html1"><br>
<input type="text" name="batch_num" id="batch_num" value="100"><br>
<input type="text" name="batch_name" id="batch_name" value="Start"><br>
</form>
<input type="button" name="savebutton" value="Save" onclick="saveit();">
</body>
</html>
Ive read through a bunch of similar issues with autocomplete but none of the solutions presented have helped me with this. I have a form that is searching for usernames in a database. The autocomplete list is populating with the appropriate names, and from the looks of the code being returned for the autocomplete, the names are coming back with the appropriate IDs and VALUEs.
Why am I unable to submit the form with any data being passed along?
The screen is refreshing as if the form was submitted but no information comes back with the GET. Just a "?" at the end of the url. If I use the keyboard or use the mouse to select an option in the autocomplete dropdown, no information is passed with the GET. Even if I type in something and use a submit button and disregard the autocomplete dropdown there is still no information being passed along.
Here is the current HTML.
<title>TEST</title>
<link href="jquery-ui.min.css" rel="stylesheet" />
<link href="autocomplete.css" rel="stylesheet" />
<script src="jquery-1.11.2.js"></script>
<script src="jquery-ui.min.js"></script>
<script src="jquery.ui.autocomplete.html.js"></script>
<script type="text/javascript" src="../test.php"></script>
</head>
<body>
<form id="searchform" method="GET">
<input type="text" id="searchterm" placeholder="Search For Client">
<input type="submit" value="Submit">
<script type="text/javascript" src="../js/watchdog.js"></script>
</form>
</body>
</html>
and the JS named "watchdog" that is watching that form field. What am I missing?
$(function() {
$("#topic_title").autocomplete({
source: "ajax.php",
minLength: 2,
select: function(event, ui) {
var item = ui.item;
console.log(item,ui);
if(item) {
$(this).val(item.value);
$(this.form).submit();
return false;
}
}
});
});
I should also add, this is the seventh or either variation of this script with the same empty results.
Thanks in advance for any help with this.
the autocomplete code looks fine for me. the only problem I can see in your code is you didn't provide the name attribute in the <input> so your browser didn't append it to the url.just replace this
<input type="text" id="searchterm" placeholder="Search For Client">
with this
<input type="text" id="searchterm" name="clientId" placeholder="Search For Client">
(remember to change clientId to the name that your server expects)
Hi I'm kind of a beginner in coding I've been doing it for a couple of months doing basic things. I'd like to know how to make a basic account sign in type of thing, where you type in your username and password that you want press submit then it saves those to the html file and remember it when I exit and that the next time you type in your username and password it will recognize the username and password. Any thoughts? The code I have so far...
<!DOCTYPE HTML>
<html>
<head>
<title>Sign Up!!!</title>
</head>
<body>
<form>
<input type="text" name="UserName" value="Username">
<br>
<input type="text" name="Password" value=Password">
<br>
<input type="submit" name="SU" value="Sign Up" onclick="su()"
</form>
<script>
function su(){
var su = document.getElementsByName("Username")[0].value;
var su2 = document.getElementsByName("Password")[0].value;
}
</script>
</body>
</html>
I have the var su to get what's in the text boxes, but I'm not sure on how to save those two things. What do I do?
There are some ways to do that, but there are very simple way in HTML5, just put <input type="text"> for the user name and <input type="password"> and the web browser will automatically cache it.
There are many youtube tutorials for your answers. However, you will mainly need php. Here is a link to a tutorial about register and login.
I am trying to get a fairly simple bit of code to work. The essence of it is just to take user input, append it on to a source URL, and then use a script to display the appropriate tumblr feed.
I have spent some time on this, and I can't get my head around how javascript works enough to do something like this.
This is what I have so far:
<html>
<body>
<form>
Tumblr Username:<br>
<input type="text" name="username">
<br>
<br>
<input type="submit" value="Submit">
</form>
<script type="text/javascript" src= username + ".tumblr.com/js"></script>
</body>
</html>
Thanks in advance.
The way that JavaScript works, is you need an event to attach the running of your code. In your case, the form's submit event. Additionally, you cannot compute values within the HTML as you're attempting; you'll need code to manipulate the HTML (the DOM). Here's a sample of how you can do it:
<html>
<body>
<form onSubmit="handleSubmit(event)">
Tumblr Username:<br>
<input type="text" name="username">
<br>
<br>
<input type="submit" value="Submit">
</form>
<script id="theScript" type="text/javascript"></script>
<script>
function handleSubmit(e) {
e.preventDefault(); // Keep the form from actually submitting
var username = document.querySelector('[name="username"]').value;
document.getElementById('theScript').src = username + '.tumblr.com/js';
}
</script>
</body>
</html>
Because the JS file that is on username.tumblr.com uses document.write, I think it'd be better to just load the actual url of the user in an iframe, as this wouldn't require you to refresh the page, while creating a mini page inside your page.
This won't work on the snippet tool here or on JSFiddle, but I've tested it on a web server:
<html>
<body>
<script>
function getUN() {
var username = document.getElementsByName("username")[0].value;
document.getElementById("tumblrframe").src = "http://" + username + ".tumblr.com";
}
</script>
Tumblr Username:
<br>
<input type="text" name="username">
<br>
<br>
<button onclick="getUN()">Submit</button>
<br/>
<br/>
<iframe id="tumblrframe" width="80%" height="600px"></iframe>
</body>
</html>
I have this piece of simple code.
<html>
<head>
<script type="text/javascript">
function changeText()
{
var form = document.forms['detail'];
form.desc.value="success";
}
</script>
</head>
<body>
<form name="detail">
<input type="text" name="desc" id="desc" >
<input type="submit" value="changetext" onClick=changeText()>
</form>
</body>
</html>
When i run this in Mozilla browser the value of the textbox named "desc" changes but disappears immediately...i.e it is not shown forever and becomes empty.
How can I fix it.
Regards,
Vijay
Try using:
<input type="submit" value="changetext" onClick="changeText(); return false;">
It looks like your page is refreshing, and that is probably why your field text disappears. If your onClick listener returns false, it will prevent this default behaviour.
you can give that textbox an id
and then run document.getElementById("textboxid").value ="success";
that will work in all browsers
<input type="text" name="txt" id="txt" value="Name" onblur="if(this.value.length == 0) this.value='Name';" onclick="if(this.value == 'Name') this.value='';" />
guy schaller
document.getElementById("textboxid").value ="success";
is good idea!
vijayakumar-n
try to save var form = document.forms['detail']; in a hidden input! then you will always be able to reach the form data..
The form gets submitted upon clicking the button that is typed as "submit" - the page gets reloaded.
Return false from the changeText() method and change onClick=changeText() to onClick="return changeText();" to prevent the form from getting submitted.
Alternatively, you can change the type of the button from "submit"to "button" to prevent submission. Then you'd have to add another submit button (even returning false will need you to find another way to submit the form).