Question: Is it possible to include some type of character (like \r or \n, or some character generated by an encoding function) at the end of a line of characters set as the value of a text input element, in order to induce the form to submit that content – much like hitting the Return key in a text input box can cause a form to submit? I have come across some non-browser clients which submit data when copied text including carriage return characters are pasted – so I wonder if this might somehow be possible in Javascript? So far, in this page/script’s environment, I have tried appending \r, \n, and \r\n\r with no success – but am wondering if some special character might work, or possibly if I’m somehow missing something.
Background:
I’m working on a Firefox extension which needs to fill an input box and then submit a form inside a frameset. The form itself has its own script-defined (i.e., not part of the extension code) onsubmit function. I have read that executing a form.submit() prevents a form’s onsubmit attribute from executing; and using onsubmit() to submit the form fails to provide the page’s proper function, which indicates to me that it’s the script-defined function in the onsubmit code which needs to be executed – meaning that simply filling the box via Javascript and then submitting the form with Javascript will not work. I could try to somehow call the site’s function by triggering an on-page event, but this creates a klugey situation where we are working around a work-around solution (which isn’t so uncommon in Javascript) – but things would be much more elegant if it’s possible to simply append a return-type character to the end of the string which is being inserted into the input element’s value attribute.
Progress:
John, Jon, and Frog, thanks all for your contributions here. It looks like I’m going to need to be doing a create-init-dispatch of either a keydown or keyup event. I’ll inform further as further progress is made; new insights still very much welcome – especially in the category: “Is this likely to actually work and cause the form to be submitted?”
I tried fiddling with the extension itself but came across some problems. In order to test dispatching of keyboard events in general, I’ve created a simple HTML test document – it seems, however, that something is wrong here. When clicking the button, I do receive the “dispatched” alert, but nothing is added to the input box when myKeyCode is 65 (the value for “A”). It also isn’t submitting when the value is 13 (or RETURN). Perhaps someone can find something wrong in this code. Code is testable & editable at http://jsbin.com/orudu4/1/edit
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>Tester for Extension</title>
<script type="text/javascript">
var myKeyCode = 65; // should be "A"
// var myKeyCode = 13; // should be RETURN
function fireIt(){
var el = document.getElementById("inputId");
el.focus();
var e = document.createEvent('KeyboardEvent');
e.initKeyEvent('keydown', true, true, window, false, false, false, false, myKeyCode, 0);
el.dispatchEvent(e);
alert("dispatched");
}
</script>
</head>
<body>
<form action="nowhere.html" onsubmit="alert('submited');">
<input type="button" value="button" onclick="fireIt()" />
<input type="text" id="inputId" value="value" />
</form>
</body>
</html>
Notice:
I see from some commenters (who nonetheless provided great answers) that some when reading the above are assuming that I’m having the user hit a key. This isn’t the case. The events triggering the necessary action here are: 1) a user clicking on a button on the toolbar, and 2) a change in the html
The answer here appears to be “NO” – return characters programatically inserted into input elements in forms do not trigger form submission.
I had noted already that this could not be done by simply appending \n or \r\n to the end of a string which is set as the value attribute of the input element; and after much trial and error I finally succeeded in adding a standard, visible character (“A”) to an input field using a keyboard event. I then tried using carriage return, line feed, and form feed characters to the input field, and none of these induced form submission.
Regarding getting this working – I would not have figured this out were it not for the advice of jonshariat, John Hartstock, and MatrixFrog. I also did some more research. It turns out: we need a keypress event, not a keydown event; the type of event created was KeyEvents and not KeyboardEvent; and hexidecimal code was used to designate the character instead of standard decimal notation.
Here’s the test script: http://jsbin.com/eyiko5/1/edit