3

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

Brian Tompsett - 汤莱恩
  • 5,753
  • 72
  • 57
  • 129
James
  • 661
  • 7
  • 16
  • @MatrixFrog, @John Hartstock, @jonshariat - thanks so much for your contributions and getting me to where I am now. Perhaps you can find what's wrong with the code above. – James Mar 27 '11 at 14:15

4 Answers4

2

Edit: Didn't see you needed javascript only.

Perhaps you can POST to the forms URL?

What if you simulate the key press of the enter key?

function simulateKeyPress(character) {
  jQuery.event.trigger({ type : 'keypress', which : character.charCodeAt(0) });
}

$(function() {
  $('body').keypress(function(e) {
alert(e.which);
  });

  simulateKeyPress("e");
});

Taken from HERE

Community
  • 1
  • 1
jonshariat
  • 176
  • 2
  • 16
  • OP did not ask for a jQuery Solution – John Hartsock Mar 24 '11 at 17:06
  • @John Hartsock - indeed, I'd like to avoid jQuery since this is a FF extension - it looks like getting jQuery in without messing other things up could be a nightmare. @jonshariat: this is a BRILLIANT idea, if it's possible to simulate a key press without the user actually having to hit a key, and I'm able to do it without jQuery. Maybe someone can tell us how this could be done. – James Mar 24 '11 at 18:03
1

Using the keydown event:

   document.getElementById("YourInputID").onkeydown = function(evt) {
     evt = evt || window.event;
     if (evt.keyCode == 13) {
        // submit your form
     }
   }

or if your attaching the event in your HTML like this

<script>
   function enterKeyPressed(evt) {
     evt = evt || window.event;
     if (evt.keyCode == 13) {
       // submit your form
     }
   }
</script>

<body>
   <input type="text" onkeydown="enterKeyPressed(event)" />
</body>
John Hartsock
  • 85,422
  • 23
  • 131
  • 146
  • One extra stipulation here is: I can't require the user to hit a key to do this; the event will be triggered by clicking on the extension toolbar button. I'm guessing that hitting a key is a rather sensitive thing - i.e., something that javascript wouldn't be allowed to emulate - but I may be wrong! Any other was of doing this without needing to require the user to hit a key? – James Mar 24 '11 at 18:10
1

Based on your comment to John's answer, it sounds like the problem is not that you want the form to be submitted automatically when the user presses enter. The form already IS submitted automatically when the user presses enter, and you want to simulate the user pressing enter from your extension. If I've understood this correctly, I think you want dispatchEvent. If you browse through the jQuery source, you'll probably find that is what jonshariat's suggestion does.

Tyler
  • 21,762
  • 11
  • 61
  • 90
  • MatrixFrog, Bingo. Yes, and yes. No pressing keys, and dispatchEvent does look like what's going to be needed to provide the answer here. Thanks for submitting your input. _(my apologies for being so corny, and the thanks is sincere)_ – James Mar 24 '11 at 21:29
0

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

James
  • 661
  • 7
  • 16