Question

I usually work with PHP so sadly don’t have some basic JS principles down. This is all I want to accomplish–I’ve seen many posts on this topic but they are usually beyond what I need.

Here is my form:

 <input type="checkbox" name="checkbox" value="check"  />
 <input type="submit" name="email_submit" value="submit" onclick="----??----"  />

The checkbox is a simple “I agree”. I want the submit button to be pressed and it will only submit if that check box is selected.

Here’s the thing: I want the simple, cheating way — no methods — just some inline code in that form (assuming its not overly long?). This is not a public page, I just need something quick and simple with that type of validation. If its unchecked, it will throw an alert(); if its checked it will submit via post through php and go on as normal.

Answer 1

You could use:

 if(!this.form.checkbox.checked)
{
    alert('You must agree to the terms first.');
    return false;
}

(demo page).

<input type="checkbox" name="checkbox" value="check"  />
<input type="submit" name="email_submit" value="submit" onclick="if(!this.form.checkbox.checked){alert('You must agree to the terms first.');return false}"  />

• Returning false from an inline event handler will prevent the default action from taking place (in this case, submitting the form).
• ! is the Boolean NOT operator.
• this is the submit button because it is the element the event handler is attached to.
• .form is the form the submit button is in.
• .checkbox is the control named “checkbox” in that form.
• .checked is true if the checkbox is checked and false if the checkbox is unchecked.