HTML Script capturing text and performing events with its own value

Question

I'm trying to capture the value of 2 text inputs and performs functions when the user press enter key.

I'm using Internet Explorer 11.

<script type="text/javascript">
  function myFuncion(arg1, arg2) {
    window.alert("arg1:" + arg1 + ", arg2:" + arg2);
  }
</script>

Now, the text inputs code

<input type="text" size="6" name="nameAnotherText" id="idAnotherText" value=""
    onkeydown = "if (event.keyCode == 13) {
      myFuncion('" + document.getElementById("idText").textContent + "', '" 
        + document.getElementById('idAnotherText').value + "');
      }"
/>


<input type="text" size="6" name="nameText" id="idText" value=""
    onkeydown = "if (event.keyCode == 13) {
      myFuncion('" + document.getElementById("idText").textContent + "', '" 
        + document.getElementById('idAnotherText').value + "');
      }"
/>

Is it not working.

Unfortunately this not works:

<button onclick="myFuncion('" +
            document.getElementById(\"idAnotherText\").textContent + "', '" +
            document.getElementById(\"idText\").textContent + "')" >Press Me</button>
<button onclick="myFuncion(" +
            document.getElementById(\"idAnotherText\").textContent + ", " +
            document.getElementById(\"idText\").textContent + ")" >Press Me</button>
<button onclick="myFuncion(" +
            document.getElementById('idAnotherText').textContent + ", " +
            document.getElementById('idText').textContent + ")" >Press Me</button>

How solve this?

Or something https://stackoverflow.com/a/155272/811293 but is not working:

score 0 · Answer 1 · answered Jun 08 '18 at 22:40

If you are in a form with a submit button you need to return false from your event handler or your form will auto submit when return is pressed while in an input.

As a general rule you should avoid trying to handle Return presses in inputs in a form. This breaks the expected behavior of forms on the internet which is that they submit when return is pressed. Instead register a callback on the submit event of the form and do it (validations, ajax, etc.) there instead.

With button, like my edit is not working. Is a simple window.alert. — , Jun 08 '18 at 22:57

Mamun · Accepted Answer · 2018-06-08T23:28:31.677

Remove quotes from the function arguments. You also have to use value instead of textContent to grab the values from input fields in both cases. Try the following:

function myFuncion(arg1, arg2) {
  window.alert("arg1:" + arg1 + ", arg2:" + arg2);
}

<input type="text" size="6" name="nameAnotherText" id="idAnotherText" value=""
    onkeydown = "if (event.keyCode == 13) {
      myFuncion(document.getElementById('idText').value, document.getElementById('idAnotherText').value);
      }"
/>

<input type="text" size="6" name="nameText" id="idText" value=""
    onkeydown = "if (event.keyCode == 13) {
      myFuncion(document.getElementById('idText').value, document.getElementById('idAnotherText').value);
      }"
/>

Writing JavaScript in HTML is not a good idea. You might do the following which is more cleaner:

function myFuncion(event) {
  if (event.keyCode == 13) {
    var txt1 = document.getElementById('idText').value;
    var txt2 = document.getElementById('idAnotherText').value;
    window.alert("txt1:" + txt1 + ", txt2:" + txt2);
  }
}

<input type="text" size="6" name="nameAnotherText" id="idAnotherText" value="" onkeydown = "myFuncion(event);"/>

<input type="text" size="6" name="nameText" id="idText" value="" onkeydown = "myFuncion(event);"/>

score 0 · Answer 3 · answered Jun 08 '18 at 23:04

Rewriting the javascript makes it work. In general avoid putting actual code into the code

With this as the javascript

function myOnKeyDown(event) {
  if (event.keyCode == 13) {
    var text_value = document.getElementById("idText").value
    var another_text_value = document.getElementById("idAnotherText").value
    myFunction(text_value, another_text_value);
  }
}

function myFunction(arg1, arg2) {
  window.alert("arg1:" + arg1 + ", arg2:" + arg2);
}

You can have this in your html

<input type="text" size="6" name="nameAnotherText" id="idAnotherText" value="" onkeydown="myOnKeyDown(event)"/>
<input type="text" size="6" name="nameText" id="idText" value="" onkeydown="myOnKeyDown(event)"/>

This should allow your code to run.

score 0 · Answer 4 · answered Jun 08 '18 at 23:33

I usually try to go as native as possible. The way you can go about is to wrap the input fields with form tag and add event listener to the submit event.

Try the following.

const form = document.getElementById('myform');

form.addEventListener('submit', onSubmit, false);
form.submit = onSubmit;

function onSubmit(event) {
  if (event) {
    event.preventDefault();
  }
  console.log('submitted');
  const input1 = document.getElementById('input1').value;
  const input2 = document.getElementById('input2').value;
  console.log({
    input1,
    input2
  });
}

<form id="myform">
  <input type="text" id="input1">
  <input type="text" id="input2">
  <button type="submit" style="display: none"></button>
</form>

HTML Script capturing text and performing events with its own value

4 Answers4