I was trying to write my code here but for whatever reason the site prohibited me to. My code is essentially two texts with a button in the middle. Whatever you write in the first text it will be copied to the other text once you hit the button. I want to edit the code so that it does what it does and ALSO accepts values from the second text and copies to the first one. Thanks.
<html>
<head> <meta charset="utf-8"> </head>
<body>
<input type="text" value="" id="from" />
<button onclick="document.getElementById('to').value = document.getElementById('from').value">copy</button>
<input type="text" value="" id="to" />
</body> </html>
Use an on change for each of the text boxes. I'm a jQuery user but if you did it with standard JS you could do something like ... this is not full code ...
<textarea id='t1' name='t1' onChange="document.getElementbyId('t2').value=document.getElementbyId('t2').value"></textarea>
<textarea id='t2' name='t2' onChange="document.getElementbyId('t1').value=document.getElementbyId('t2').value">
</textarea>
Clicking the button would also trigger the change event. If you want it to copy the contents ONLY when the button is clicked, you could set a variable that stores the textarea id last changed and use that to determine which way to do the copy when the button is clicked.
Related
I have a form and an input outside of the form. The input is linked to the form.
I have tested this on Chrome and it works but on IE it does not.
Is this a known bug? Is there a link to the bug? PS: I don't need a solution I just need a confirmation that only IE behaves like this and perhaps a page where the bug is described or maybe a page where it says that it is function as design.
UPDATE
The bug that I am referring is this: When you enter some text on this input and press enter key I would expect for the form to submit. (as state previously on chrome it works as expected while on IE it does not)
Here is a code: go to the second input and press enter: In Chrome/Firefox/Opera the message submit called is displayed while in IE/Edge it does not.
function submitForm(e) {
alert('Submit called');
e.stopPropagation();
e.preventDefault();
return false;
}
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>
<form onsubmit="submitForm()" id="bugForm">
<input type="text" name="name" />
<input id="submitButton" type="submit" value="submit" />
</form>
<hr>
<input type="text" name="another" id="another" form="bugForm" />
</body>
</html>
You did not posted your sample code, So we cannot accurately say what you are doing in your code and why it is not working in IE.
If we assume like you have any input tag outside your form and you want to submit a form by pressing enter key on that input control than it should not submit the form because it is not inside the form tag. In that way IE is working correctly and it should not consider as a bug.
If you have a requirement to do that than you can try to refer an example below will work with IE.
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>
<form action="something.php">
<input type="text" name="name" />
<input id="submitButton" type="submit" value="submit" />
</form>
<hr>
You can click this ->
<label for="submitButton">Submit</label><br>
Or You can click ->
<input type="submit" onclick="document.forms[0].submit();" />
</body>
</html>
For Reference, You can refer links below.
(1) Form not working in Internet Explorer
(2) Submit form using a button outside the tag
I found a page where indeed an input outside of a form is not supported (HTML5).
http://html5test.com/
I am using HTML form validation and have discovered a strange issue within IE11. The problem does not appear in Chrome, Firefox, Opera or Edge.
Basically, IE11 does not appear to perform a form reset correctly. I would expect a form reset to clear all validation errors and reset the form values back to their initial values. On the next submit, I would expect the form to re-validate.
What appears to happen during a form reset is only values are reset - validation error states (or even a successful validation) seem to remain unless a user changes the field.
The only workaround I can see for my web app is to reload the page rather than perform a form reset. Any other ideas?
The workflow is as follows:
Using IE11, remove the text from a required input field.
Click Submit, get validation error.
Click Reset, input field value returns to initial value.
Click Submit, get validation error yet the field has been filled in using the initial value.
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
</head>
<body>
<form id="theForm" name="theForm">
<input type="text" name="textBox" value="test" required>
<input type="submit">
<input type="reset">
</form>
</body>
</html>
I am able to produce the issue but unfortunately no any solution is available for this specific issue.
You can try to use work around like first setting the textbox value to empty and then reset the form using JS.
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript">
function resetfrm()
{
document.getElementById("txt1").value='';
document.getElementById("theForm").reset();
alert("clear");
}
</script>
</head>
<body>
<form id="theForm" name="theForm">
<input type="text" name="textBox" id="txt1" value="test" required>
<input type="submit">
<input type="button" onclick="resetfrm()" value="Reset">
</form>
</body>
</html>
I was having this problem with a more complex chunk of code, so I started messing with a html "joke" with the movie The Seven, and realized it was the same problem. Why doesn't it do anything when I click the button? I've tried it adding a function and script as well, get same problem. I want it to show the text inside the (formerly blank) input box when you click the button.
<html>
<body>
The Box:<input type="text" id="thebox" value="" size=10>
<br><input type="button" value="What's in the booooox?" onclick="document.getElementById('thebox').innerHTML='head of gwyneth paltrow';">
</body>
</html>
innerHTML, as the name suggests, refers to the HTML content of an element. You need to use value
The Box:<input type="text" id="thebox" value="" size=10>
<br><input type="button" value="What's in the booooox?" onclick="document.getElementById('thebox').value='head of gwyneth paltrow';">
See it in action
I have several sections in my page that I need to include under the same form tag, but doing so breaks the HTML. For example:
<div>
<form name="firstform">
<input type="text" name="input1" />
<input type="text" name="input2" />
<input type="text" name="input3" />
</div>
<p>bla bla</p>
<div>
<form name="secondform">
<input type="text" name="one" />
</form>
<input type="text" name="input4">
</form>
So basically I want to submit the form firstform but in a way that will include input4 but without submitting secondform?
EDIT:
I have a pretty long page with a lot of inputs, in the middle of the page I have a different form that is used to allow file upload which I want to keep where it is in the page, however, after that section I have a continuation of the first form. so I have the first form, then another form with the file upload and then the rest of the first form.
If you want to have multiple forms, use one form tag with multiple submit buttons. Give to the buttons name and value and its time a user submit the form, chech in the back end which button has been pushed.
You could simply add an html button with an onClick event that calls a function to mimic a nested form. If the second form's onSubmit function is pure javaScript this could be a quick cut/paste. If your second form is communicating with a server you'll have to jump into some AJAX.
I have a textbox that has a piece of text in it already so users know what is supposed to go in it. I've already set it up so clicking on it selects all the text. What I want to know if how I can make it so clicking on the textbox will clear all the text. Likewise, if the user deletes everything they wrote, how can I make the original text appear?
A perfect example of what I want to do is the textbox for the title when asking a question here on Stack Overflow.
With the code below you can simply add the class "clear" to any input element or textarea and it will clear the initial value!!!
<!DOCTYPE html>
<html>
<head>
<title>Sample</title>
<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.5.min.js" type="text/javascript"></script>
<script>
$(function() {
$('.clear').one('focus', function() {
this.value = '';
});
});
</script>
</head>
<body>
<input type="text" value="Full Name" class="clear"/> <br />
<input type="text" value="Email" class="clear"/> <br />
<textarea value="About you..." class="clear"></textarea>
</body>
</html>
Fast and dirty, but does the job:
<input type="text" value="init..." onfocus="this.value=''; this.onfocus=null;" />
Update:
Since my answer in 2011 input placeholder became a common thing, so the proper solution is:
<input type="text" placeholder="init..." />
The textarea you created should have an id associated with it in the tag. The text area id would look something like this:
<textarea id="someId"...>
Where "someId" would be whatever name you give to it. Then when you use the following code
document.getElementById('someId').value = '';
it will replace the text in the box with the text specified by the function above. In this case, it will replace it with no text. Just make sure it only does this once, otherwise, when you click outside of the box, and then click inside of it again, the user's input will still be erased as well.