Javascript Function not recognized onclick

Question

I have a javascript function named formApprove() and am calling that function within html onclick on a button. For some reason the javascript function is not being recognized because firebug tells me that the forApprove is not a function. Below is the code in the head:

<script type="text/javascript">
function formApprove() {
var TheTextBox = document.getElementById("formApprove");
TheTextBox.value = 'true';
alert("hellp");
return true;
}
</script>

Below is the code in the body:

<input type="submit" name="approve" value="Approve Membership" onclick="formApprove()" />

Any help on this would be greatly appreciated.

Full Code:

<head>
<script type="text/javascript">
function nextPrevious(txtElement, btnElement) {
    switch(btnElement.name) {
        case 'increase':
            var numrows = document.getElementById("numOfRows");
            if (txtElement.value < Number(numrows.value)) {
                txtElement.value++;
            } else {
                    alert('You are alread at the end of the members');
                    return false;
            }
            break;
        case 'decrease': 

            if(txtElement.value > 1) {
                txtElement.value--;
            } else {
                    alert('You are alread at the begining of the members');
                    return false;
            }
            break;

        case 'goto':
            alert(txtElement.value);
            break;
        default: 
    }
    return true;
}

function approve() {
    var TheTextBox = document.getElementById("formApprove");
    TheTextBox.value = 'true';
    alert("hellp");
    return true;
} 

function formChange() {
    var TheTextBox = document.getElementById("formSubmit");
    TheTextBox.value = 'true';
    return true;
}


function deleteRecord() {
    var answer = confirm ("Are you sure you want to delete record?");
    if (answer) {
        var TheTextBox = document.getElementById("formDelete");
        TheTextBox.value = 'true';
        return true;
    } else {return false;}

}

</script>
</head>
<body>
        <form name="members_view" method="POST" action="viewpending.php">
<br />
    <div id="buttons">
        <input type="submit" name="update" value="Update Record" onclick="formChange(this.form.elements['formSubmit'].value)" /> - 
        <input type="submit" name="decrease" value="Previous" onclick="nextPrevious(this.form.elements['record'], this)" /> - 
        <input type="submit" name="increase" value="Next" onclick="nextPrevious(this.form.elements['record'], this)" /> - 
        <input type="submit" name="delete" value="Delete Record" onclick="deleteRecord(this.form.elements['formSubmit'].value)" /> - 
        <input type="submit" name="approve" value="Approve Membership" onclick="approve()" />
    </div>
</div>
<div id="leftcase">
        <div class="label">First Name:</div><div class="input"><input size="40" type="text" name="FNAME" value="<?php echo $row['FNAME']; ?>" /></div>
        <div class="label">Middle Name:</div><div class="input"><input size="40" type="text" name="MNAME" value="<?php echo $row['MNAME']; ?>" /></div>
        <div class="label">Last Name:</div><div class="input"><input size="40" type="text" name="LNAME" value="<?php echo $row['LNAME']; ?>" /></div>
        <div class="label">Full Name:</div><div class="input"><input size="40" type="text" name="FULL_NAME" value="<?php echo $row['FNAME'].' '.$row['MNAME'].' '.$row['LNAME']; ?>" /></div>
        <div class="label">Nick Name:</div><div class="input"><input size="40" type="text" name="NNAME" value="<?php echo $row['NNAME']; ?>" /></div>
        <div class="label">Spouse/Partner Name:</div><div class="input"><input size="40" type="text" name="H_COUNTRY" value="<?php echo $row['H_COUNTRY']; ?>" /></div>
        <div class="label">Anniversary Date:</div><div class="input"><input size="40" type="text" name="B_ZIP" value="<?php echo $row['B_ZIP']; ?>" /></div>
        <div class="label">Primary Email:</div><div class="input"><input size="40" type="text" name="EMAIL" value="<?php echo $row['EMAIL']; ?>" /></div>
        <div class="label">Second Email:</div><div class="input"><input size="40" type="text" name="B_CITY" value="<?php echo $row['B_CITY']; ?>" /></div>
        <div class="label">Home Street:</div><div class="input"><input size="40" type="text" name="H_STREET" value="<?php echo $row['H_STREET']; ?>" /></div>
        <div class="label">Home City:</div><div class="input"><input size="40" type="text" name="H_CITY" value="<?php echo $row['H_CITY']; ?>" /></div>
        <div class="label">Home State:</div><div class="input"><input size="40" type="text" name="H_STATE" value="<?php echo $row['H_STATE']; ?>" /></div>
        <div class="label">Home Zip:</div><div class="input"><input size="40" type="text" name="H_ZIP" value="<?php echo $row['H_ZIP']; ?>" /></div>
        <div class="label">Home Phone:</div><div class="input"><input size="40" type="text" name="H_PHONE" value="<?php echo $row['H_PHONE']; ?>" /></div>
        <div class="label">Cell:</div><div class="input"><input size="40" type="text" name="H_CELL" value="<?php echo $row['H_CELL']; ?>" /></div>
        <div class="label">Birth Date:</div><div class="input"><input size="40" type="text" name="H_WEB" value="<?php echo $row['H_WEB']; ?>" /></div>
        <div class="label">Membership Exp:</div><div class="input"><input size="40" type="text" size="40" name="MEMBER_INFO" value="<?php echo $row['MEMBER_INFO']; ?>" /></div>
        <div class="label">Retired Mil Info:</div><div class="input"><input size="40" type="text" name="B_STATE" value="<?php echo $row['B_STATE']; ?>" /></div>
        <div class="label">1st tour from:</div><div class="input"><input size="40" type="text" name="B_COUNTRY" value="<?php echo $row['B_COUNTRY']; ?>" /></div>
        <div class="label">1st tour Rank/Rate:</div><div class="input"><input size="40" type="text" name="B_WEB" value="<?php echo $row['B_WEB']; ?>" /></div>
        <div class="label">1st tour cruise Book:</div><div class="input"><input size="40" type="text" name="B_PHONE" value="<?php echo $row['B_PHONE']; ?>" /></div>
        <div class="label">2nd tour from:</div><div class="input"><input size="40" type="text" name="B_FAX" value="<?php echo $row['B_FAX']; ?>" /></div>
        <div class="label">2nd tour Rank/Rate:</div><div class="input"><input size="40" type="text" name="PAGER" value="<?php echo $row['PAGER']; ?>" /></div>
        <div class="label">2nd tour cruise Book:</div><div class="input"><input size="40" type="text" name="B_COMPANY" value="<?php echo $row['B_COMPANY']; ?>" /></div>
        <div class="label">3rd tour from:</div><div class="input"><input size="40" type="text" name="B_TITLE" value="<?php echo $row['B_TITLE']; ?>" /></div>
        <div class="label">3rd tour Rank/Rate:</div><div class="input"><input size="40" type="text" name="B_DEPT" value="<?php echo $row['B_DEPT']; ?>" /></div>
        <div class="label">3rd tour cruise book:</div><div class="input"><input size="40" type="text" name="OFFICE_LOC" value="<?php echo $row['OFFICE_LOC']; ?>" /></div>
</div>
<div id="rightcase">
        <div class="label">Biography:</div><div class="input"><textarea rows="35" cols="80" name="NOTES" /><?php echo $row['NOTES']; ?></textarea></div>

        <input type="hidden" id="record" name="record" value="<?php echo $_POST['record']; ?>"/>        
        <input type="hidden" id="formSubmit" name="formSubmit" value="<?php echo $_POST['formSubmit']; ?>" />
        <input type="hidden" id="formApprove" name="formApprove" value="<?php echo $_POST['formApprove']; ?>" />
        <input type="hidden" id="formDelete" name="formDelete" value="<?php echo $_POST['formDelete']; ?>" />
        <input type="hidden" id="numOfRows" name="numOfRows" value="<?php echo $num_rows; ?>" />
        <input type="hidden" id="ID" name="ID" value="<?php echo $_POST['ID']; ?>"/>

</div>
<div id="buttons">
        <input type="submit" name="update" value="Update Record" onclick="formChange(this.form.elements['formSubmit'].value)" > - <input type="submit" name="decrease" value="Previous" onclick="nextPrevious(this.form.elements['record'], this)" > - <input type="submit" name="increase" value="Next" onclick="nextPrevious(this.form.elements['record'], this)" > - <input type="submit" name="delete" value="Delete Record" onclick="deleteRecord(this.form.elements['formSubmit'].value)" >
    </form>
</body>

Does firebug mention any other error prior to that one? Perhaps some sort of syntax error on the page. — James Montagne
– James Montagne, Commented Apr 8, 2013 at 17:43
@Rikonator That's the exact opposite of what's needed. The function needs to be declared before it can be called — Ian
– Ian, Commented Apr 8, 2013 at 17:44
@Ian Yeah, I made a fool of myself there. Here you go @ToddWelch, a working example. Need to put the script tag before input tag, and also give the input tag the id you're using in formApprove function. — Rikonator
– Rikonator, Commented Apr 8, 2013 at 17:45
@Rikonator Haha no problem. I had to think about it for a minute, got confused :( — Ian
– Ian, Commented Apr 8, 2013 at 17:45

epascarello · Accepted Answer · 2013-04-08 18:24:28Z

1

You probably have a name clash with the function and the name of the element.

Either rename the function or rename the textbox.

answered Apr 8, 2013 at 18:24

epascarello

208k20 gold badges206 silver badges246 bronze badges

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

Collectives™ on Stack Overflow

Javascript Function not recognized onclick

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related