Javascript OnSubmit isn't working for the second time

Question

My javascript script that is suppose to replace the inner HTML of a div element every time a form is submit isn't working for the second time

Here's my Javascript code:

function TryCode(code, gametype, gameid) {
    var tries = "1";
    for (var i = 1; i <= 10; i++) {
        var element = document.getElementById("A" + i).innerHTML;
        var element2 = element.replace(/^\s+/, '');
        if (element2 == '') {
            tries = i;
            break;
        } else {
            continue;
        }
    }

    if (window.XMLHttpRequest) { // code for IE7+, Firefox, Chrome, Opera, Safari
        xmlhttp = new XMLHttpRequest();
    } else { // code for IE6, IE5
        xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
    }
    xmlhttp.onreadystatechange = function () {
        if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
            if (xmlhttp.responseText == 'success') {
                ActivateUnloadComfirmation = "0";
                document.location.href = "index.php?success=1";
            } else if (xmlhttp.responseText == 'fail') {
                ActivateUnloadComfirmation = "0";
                document.location.href = "index.php?fail=1";
            } else {
                document.getElementById("Try" + tries).innerHTML = xmlhttp.responseText;
            }
        }
    }
    xmlhttp.open("GET", "system/trylogger.php?code=" + code + "&tries=" + tries + "&gameid=" + gameid + "&gametype=" + gametype, true);
    xmlhttp.send();
}

HTML DIV CODE

<table width="40%">
<tr>
    <td id="Try1" width="58%">
        <div class="tries_container" style="float: left;margin-right: 49px;">
        </div>
        <div class="tries_container" style="width: 15px;float: left;margin-right: 8px;" id="A1">
        </div>
        <div class="tries_container" style="width: 15px;float: left;">
        </div>
    </td>
</tr>

HTML FORM CODE

<form onsubmit="TryCode(this.code.value, '{$GameType}', '{$GameID}'); return false;">
<input type="text" name="code" maxlength="4" pattern="[0-9]{4}" title="4 digit code" placeholder="Code" required>
</br>
</br>
<input type="submit" id="try_button" value="Try This Code">

At first, it does change the inner HTML of id Try1 but when I click the submit button again, it doesn't change the inner HTML of Try2.

Sorry for my bad code, I'm very new with Javascript

The HTML you've posted does not contain an element with `id="Try2"`. Does one exist? — Jim Garrison, Aug 05 '13 at 19:51
Yeah it does, sorry, I posted this at 3 am I forgot about it — user2654220, Aug 06 '13 at 02:46

score 1 · Accepted Answer · edited May 23 '17 at 12:14

If the example code you've provided is all you have, Try2 and A2 are missing. Otherwise, try maintaining the current 'try' using a global variable instead of looping through your elements to look for the empty one.

Example HTML:

<tr>
<td id="Try1" width="50%">
    <div class="tries_container" style="float: left;margin-right: 49px;">
    </div>
    <div class="tries_container" style="width: 15px;float: left;margin-right: 8px;" id="A1">
    </div>
    <div class="tries_container" style="width: 15px;float: left;">
    </div>
</td>
<td id="Try2" width="50%">
    <div class="tries_container" style="float: left;margin-right: 49px;">
    </div>
    <div class="tries_container" style="width: 15px;float: left;margin-right: 8px;" id="A2">
    </div>
    <div class="tries_container" style="width: 15px;float: left;">
    </div>
</td>

Greatly simplified Javascript:

var tries = 1;

function TryCode(code, gametype, gameid) {
    document.getElementById("Try" + tries).innerHTML = "TEST";
    tries++;
}

In my example, the "Try2" and "A2" elements are added and "tries" is moved outside of the function becoming the global "tries" variable that I can use throughout my application.

Also, if you need to persist the number of tries through different page loads you will have to put it in the URL as a parameter and retrieve it after the page loads. It appears as though you are passing it as a parameter but you're not retrieving it after the page loads.

This tells you how to do that.

Thanks man, it works. I just set car tries as a global variable and put an increment every time I call the function — user2654220, Aug 06 '13 at 02:52

Javascript OnSubmit isn't working for the second time

1 Answers1