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>
Related
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");
}
I want to change THISVALUE using a textbox and submit button, which then refreshes the data on the page:
<form id="newssearch" action="#">
<input type="text" size="30" maxlength="155" name="search" id="search" />
<input type="button" name="submit" value="Search" onclick="showElements();" />
</form>
<div class="sm" data-type="static" data-symbol="THISVALUE" data-size="medium" data-logscale="on" data-chart-type="ca" data-timeframe="1y"></div>
<div class="sm" data-type="news" data-symbol="THISVALUE"></div>
Also: you press the button and it refreshes the page with the new data-symbol value. That value stays for the next visit to the page or until another search is performed.
Perhaps it would be better to do this in php?
You can also use the setAttribute() function
function showElements(){
document.getElementsByClassName('blah')[0].setAttribute("data-symbol",document.getElementById('search').value);
}
First off - data-symbol is not an element. It is an attribute and to be more specific - a data attribute.
Learn more about data attributes here: Using data attributes | MDN
I assume you want the data submitted in the form to get into the data-symbol attribute.
Checkout the working code snippet below:
function showElements(){
// just copy over the search text into the data attribute
document.getElementsByClassName('blah')[0].dataset.symbol = document.getElementById('search').value;
}
<div class="blah" data-type="cur" data-symbol="THISVALUE"></div>
<form id="newssearch" action="#">
<input type="text" size="30" maxlength="155" name="search" id="search" />
<input type="button" name="submit" value="Search" onclick="showElements();" /> <!-- no need to pass any arguments to this function, we can get data using element ID -->
</form>
Check the result using Developer Tools (I have used Chrome here):
I have this html sample code
<html>
<head>
<title>Form Test</title>
<script src="./testScript.js"></script>
</head>
<body>
<form>
<input id="textField" type="text" placeholder="Type in your name">
</form>
</body>
</html>
The testScript.js file contains only one line: alert("hello");
When I write something inside the input element and I press on enter button, the javascript file is reloaded and the alert is triggered. I noticed that when I remove the form, the reloading will not be triggered.
Why this happens? and How to prevent the reloading of javascript files when pressing enter button inside a form?
Without specific attributes, the method of the form will be get, so pressing enter in an input field will submit the form through the GET method. The page will thus reload and the javascript file loaded, and the alert triggered.
I think your code exists an error.
You didn't close the input element. Just modify the html like this:
<input id="textField" type="text" placeholder="Type in your name"/>
When my JSP page gets loaded, the button (actually an image button with onfocus property) gets focused. So, on pressing enter it gets clicked. It is a small, part of a bigger problem. How can I make the button lose focus when page is loaded?
<html>
<head>
</head>
<body>
<div onkeypress =handleEnter()>
name <input type="text" src='Create.gif' >
</br>
<input type="image" src='Create.gif' onclick="alert('not done')">
<input type="image" src='Create.gif' onclick="alert('done')">
</div>
</body>
<script>
function handleEnter()
{
if(window.event.keyCode==13)
{
alert('nothing');
event.cancelBubble=true;
}
}
</script>
</html>
Both the alert box for nothing and not done has been shown.
You can use the autofocus HTML attribute (specification reference) to automatically focus a different element on page load. I'm not sure how this would get applied with JSP, however in pure HTML this would be something along the lines of:
<button>My Button</button>
<button autofocus>My Other Button</button>
Here's a JSFiddle demo.
I would modify this line :
<input type="text" src='Create.gif' >
to
<input type="text" id="textbox" src='Create.gif' >
<script>
//$('#textbox').focus() //If your using jQuery
document.getElementById('textbox').focus()
</script>
This would shift the focus to the text box rather than the image button
Give your textbox an id and use that id to set the focus to that element.
document.getElementById('textbox').focus()
I have a website where we use Javascript to submit the login form. On Firefox it prompts the user to remember their password, when they login, but on IE7 it doesn't.
After doing some research it looks like the user is only prompted in IE7 when the form is submitted via a Submit control. I've created some sample html to prove this is the case.
<html>
<head>
<title>test autocomplete</title>
<script type="text/javascript">
function submitForm()
{
return document.forms[0].submit();
}
</script>
</head>
<body>
<form method="GET" action="test_autocomplete.html">
<input type="text" id="username" name="username">
<br>
<input type="password" id="password" name="password"/>
<br>
Submit
<br>
<input type="submit"/>
</form>
</body>
</html>
The href link doesn't get the prompt but the submit button will in IE7. Both work in Firefox.
I can't get the style of my site to look the same with a submit button, Does anyone know how to get the remember password prompt to show up when submitting via Javascript?
Why not try hooking the form submission this way?
<html>
<head>
<title>test autocomplete</title>
<script type="text/javascript">
function submitForm()
{
return true;
}
</script>
</head>
<body>
<form method="GET" action="test_autocomplete.html" onsubmit="return submitForm();">
<input type="text" id="username" name="username">
<br>
<input type="password" id="password" name="password"/>
<br>
Submit
<br>
<input id="FORMBUTTON" type="submit"/>
</form>
</body>
</html>
That way your function will be called whether the link is clicked or the submit button is pushed (or the enter key is pressed) and you can cancel the submission by returning false. This may affect the way IE7 interprets the form's submission.
Edit: I would recommend always hooking form submission this way rather than calling submit() on the form object. If you call submit() then it will not trigger the form object's onsubmit.
Did you try putting in url in the href and attaching a click event handler to submit the form and returning false from the click handler so that the url does not get navigates to.
Alternatively hidden submit button triggered via javascript?
You could try using the HTML <button> tag instead of a link or a submit button.
For example,
<button type="submit">Submit</button>
The <button> tag is much easier to style than the standard <input type="submit">. There are some cross-browser quirks but they are not insurmountable.
A really great article about the use of <button> can be found at particletree: Rediscovering the button element