How do I execute a JS function on form submit based on commands entered in text input?

Question

How do I take this form and execute certain functions when a specific text is entered to trigger the event?

<form id="form">
    <input type="text" placeholder="Enter Command" id="text" />
    <input type="button" value="Submit" id="submit" />
</form>

function RUN() {
    // when run is entered in text field this function is exe

}

function CLOSE() {
    // when close is entered in text field this function is exe

}

example commands: RUN and CLOSE

EDIT something i got kinda working:

How do I make multiple commands exe different functions? This works without the second or third command added. Once I add multiple the only one that works is the one at the bottom.

            function readCommand() {
                let readInput = document.querySelector('#SearchBar').value
                //           ↓ no .value, it's already here -----------↑
                if (readInput === 'RUN') {
                    //             ↑ === vs =
                    CMDRUN()
                } else {
                    alert(`Not a command`);
                }
            }

            function readCommand() {
                let readInput = document.querySelector('#SearchBar').value
                //           ↓ no .value, it's already here -----------↑
                if (readInput === 'CLOSE') {
                    //             ↑ === vs =
                    CMDCLOSE()
                } else {
                    alert(`Not a command`);
                }
            }

            function CMDRUN() {
                alert ("This is an alert dialog box 1");  
            }

            function CMDCLOSE() {
                alert ("This is an alert dialog box 2");  
            }

U should create a function that does exactly that (check the input and call appropriate function) and then call it on submit — user16942962
– user16942962, Commented Aug 4, 2022 at 22:15
Try looking for your answer on this site. There are a TON of questions with answers pertaining to how to call a JavaScript function on form submit. If you encounter a problem with your attempt, update your question and 1) show us what you have tried and 2) explain at what point you aren't getting the result you expect. — devlin carnate
– devlin carnate, Commented Aug 4, 2022 at 22:27
Does this answer your question? Form Submit Execute JavaScript Best Practice? — devlin carnate
– devlin carnate, Commented Aug 4, 2022 at 22:29
You keep redefining the “readCommand” function. You likely want multiple if/else, or a switch statement. — Dave Newton
– Dave Newton, Commented Aug 4, 2022 at 22:54

Caeden · Accepted Answer · 2022-08-04 22:35:41Z

1

This can be done using an onsubmit event along with the window object to call a function using the string input.

When the form is submitted, the value of the input box is the function that will be executed.

document.getElementById("form").onsubmit = function() {
  window[document.getElementById("text").value]();
}

function RUN() {
// when run is entered in text field this function is exe

}

function CLOSE() {
// when close is entered in text field this function is exe

}

<form id="form" action="">
    <input type="text" placeholder="Enter Command" id="text" />
    <input type="submit" value="Submit" id="submit" />
</form>

answered Aug 4, 2022 at 22:35

Caeden

4263 silver badges8 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Dustin Angeletti Over a year ago

I added a edit with something i got kinda working maybe you can help me figure out how to add multiple commands to that code?

Caeden Over a year ago

It appears you overrode your readCommand function with another variation of the function. That is why you can only call one command.

Caeden Over a year ago

I suggest you use if/else statements to call multiple commands. Check out jsfiddle.net/vobg0j5u.

Dustin Angeletti · Accepted Answer · 2022-08-04 23:09:41Z

function readCommand() {
        let readInput = document.querySelector('#SearchBar').value

        if (readInput === 'RUN') {
                        CMDRUN()
        } else if (readInput === 'CLOSE') {
                        CMDCLOSE()
        } else {
                        alert(`Not a command`);
        }

    }

    function CMDRUN() {
         alert ("This is an alert dialog box 1");  
    }

    function CMDCLOSE() {
         alert ("This is an alert dialog box 2");  
    }

<form name="SearchContainer" id="SearchContainer" class="WindowMenuUp">
         <input type="text" placeholder="Search and Commands" name="SearchBar" id="SearchBar" class="SearchBar" />
         <input type="button" value="Search" name="SearchButton" id="SearchButton" class="SearchButton" onclick="readCommand()" />
    </form>

Collectives™ on Stack Overflow

How do I execute a JS function on form submit based on commands entered in text input?

2 Answers 2

3 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related