HTML text input conditional submit

Question

I have a page that loads a random MP3 file on each refresh. The user has to guess a name based on the sound via text form input. I want to check their input against the stored string and refresh the page if it's correct. Otherwise, I wan't to give them an incorrect alert and stay on the same page so they can guess again:

<div class="ui-widget" align="center">
<form method="post" action="" class="answer_box" onsubmit="return submit();">
    <p>Which hero is it?  <input id="tags" name="guess"  /></p>
    <script>
        var key = <?php echo json_encode($rand_key) ?>;
        var info = document.getElementById("guess").value;

        function submit() {
            if (key==info){
                alert('Correct!');
                return true;
            }
            else {
                alert('Incorrect!');
                returnToPreviousPage();
                return false;
            }
        }
    </script>

</form>
</div>

Right now, it submits the information to a new page regardless of the input. The javascript alerts are also not showing (I suspect they do show, but the page then refreshes and they disappear). The key variable is the key from the randomly taken value of a PHP array, and info should be the text the user inputs.

Not a very safe approach to be honest, they could just open up the script and see the key right there. — MinusFour
– MinusFour, Commented Sep 17, 2015 at 18:15
Show us var_dump(json_encode($rand_key)); result. Did you try to trigger that JS via button input, instead of form? Seems a better approach (regardless of @MinusFour comment, which should be also considered) — alanmm
– alanmm, Commented Sep 17, 2015 at 18:19
@CodeGodie: AFAIK, submit is a method of a HtmlForm object, used as in document.forms[0].submit();. — Joel A. Villarreal Bertoldi
– Joel A. Villarreal Bertoldi, Commented Sep 17, 2015 at 18:26

CodeGodie · Accepted Answer · 2015-09-17 18:30:22Z

6

Problems found:

you cant use submit as a function name a this is an HtmlForm object
document.getElementById("guess").value; is looking for an element with ID of "guess" and that does not exist.

I would rewrite your script like this:

<script>
    var key = <?php echo json_encode($rand_key) ?>;

    function my_submit(curr) {
        var info = curr.guess.value;
        if (key == info) {
            alert('Correct!');
            return true;
        }
        else {
            alert('Incorrect!');
            returnToPreviousPage();
            return false;
        }
    }
</script>

<form onsubmit="return my_submit(this);">
    <p>Which hero is it? <input id="tags" name="guess"/></p>
</form>

edited Sep 17, 2015 at 18:30

answered Sep 17, 2015 at 18:24

CodeGodie

12.2k6 gold badges40 silver badges66 bronze badges

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

3 Comments

Joel A. Villarreal Bertoldi Over a year ago

CodeGodie, since submit is precisely part of the HtmlForm object, it can be used as a JS global, it doesn't conflict with any other functions.

Joel A. Villarreal Bertoldi Over a year ago

You can easily check this by opening F12 here and typing window.submit or submit. You'll get undefined in both cases.

Mason Over a year ago

This worked perfectly! I replaced returnToPreviousPage() with event.preventDefault() as well, and it works exactly like it should. Thank you!

Joel A. Villarreal Bertoldi · Accepted Answer · 2015-09-17 18:24:48Z

2

You have a problem here:

<input id="tags" name="guess" />

Your id is tags, not guess.

You should use document.getElementById("tags").value.

answered Sep 17, 2015 at 18:24

Joel A. Villarreal Bertoldi

8,0478 gold badges37 silver badges51 bronze badges

Comments

Matt O'Connell · Accepted Answer · 2015-09-17 18:25:07Z

2

You are trying to retrieve the value of an element with id of "guess." Change this to "tags."

var info = document.getElementById("tags").value;

Also, as @CodeGodie mentioned, you need to change your function name to something other than submit.

answered Sep 17, 2015 at 18:25

Matt O'Connell

2873 silver badges14 bronze badges

Collectives™ on Stack Overflow

HTML text input conditional submit

3 Answers 3

3 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

3 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related