0

I would like my function to execute while pressing the submit button (that already exists) or on pressing the enter key in either of any of the 3 inputs (Id's: taskInfo, dueDate, dueTime).

I've tried separating the function and doing it that way but it did not work at all..

     function init() {

         window.notes = getLocalStorage('notes') || [];
         setNotesUi();

         // make note with form inputs by using button +reset notes+ set localStorage

         var submitElement = document.getElementById('submit');
         submitElement.addEventListener('click', function ()

Gonna need the following function to execute while pressing enter either anywhere or while specifically on 3 inputs called (taskInfo, dueDate, dueTime) just like here it works with a mouse click only on the submit button

 {
             var taskInfoElement = document.getElementById('taskInfo');
             var dueDateElement = document.getElementById('dueDate');
             var dueTimeElement = document.getElementById('dueTime');

             var note = {
                 taskInfo: taskInfoElement.value,
                 dueDate: dueDateElement.value,
                 dueTime: dueTimeElement.value
             };

             notes.push(note);
             setNotesUi();
             setLocalStorage('notes', notes);
         });
     }

Gonna need the following function to execute while pressing enter either anywhere or while specifically on 3 inputs called (taskInfo, dueDate, dueTime) just like here it works with a mouse click only on the submit button

dllhell
  • 1,987
  • 3
  • 34
  • 51
Nash Steiner
  • 5
  • 2
  • have you tried this - https://stackoverflow.com/questions/8894226/javascript-submit-textbox-on-enter? – Piyush Khanna Jan 08 '19 at 16:45
  • Instead of an anonymous function, create a regular function and bind this function to submit button click event and textbox keydown events – Piyush Khanna Jan 08 '19 at 16:48

2 Answers2

2

Forms already handle this. Just add a submit handler. Enter on any of the textboxes will trigger it. No extra JavaScript is needed.

document.querySelector("#myForm").addEventListener("submit", evt => {
console.log("Submit called");
evt.preventDefault();
});
<form id="myForm">
  <label for="a">A</label><input id="a"/>
  <label for="b">B</label><input id="b"/>
  <label for="c">C</label><input id="c"/>
  <button>d</button>
</form>
epascarello
  • 204,599
  • 20
  • 195
  • 236
0

Define your function

function submitForm ()
{
        var taskInfoElement = document.getElementById('taskInfo');
        var dueDateElement = document.getElementById('dueDate');
        var dueTimeElement = document.getElementById('dueTime');

        var note = {
            taskInfo: taskInfoElement.value,
            dueDate: dueDateElement.value,
            dueTime: dueTimeElement.value
        };

        notes.push(note);
        setNotesUi();
        setLocalStorage('notes', notes);
 }

Define a function that will be called on textbox keydown event, which will track if the enter key is pressed on the textboxes.

function keyPressed(e){  
  if (!e) { var e = window.event; }
  e.preventDefault(); // sometimes useful

  // Enter is pressed
  if (e.keyCode == 13) { submitForm(); }
}

Finally, your init function to initialize everything and bind these functions appropriately. 

function init() {

    window.notes = getLocalStorage('notes') || [];
    setNotesUi();

    document.getElementById('submit').addEventListener('click',submitForm);
    document.getElementById('taskInfo').addEventListener("keydown",keyPressed);  
    document.getElementById('dueDate').addEventListener("keydown",keyPressed);
    document.getElementById('dueTime').addEventListener("keydown",keyPressed);

}
Piyush Khanna
  • 296
  • 2
  • 13