Help me integrate this code with this code - Contact Form

Chrisj · May 29, 2014

Can you help me integrate this code :

<form method="post" action="submit.php">
<input type="checkbox" class="required" /> Click to check
<br />
<input disabled="disabled" type='submit' id="submitBtn" value="Submit">
</form>

In to this Contact Form code, please?

<form action="../page.php?page=1" method="post" name="contact_us" onSubmit="return capCheck(this);">
<table cellpadding="5" width="100%">
<tr>
<td width="10" class="required_field">*</td>
<td width="80">Your Name</td>
<td><input type="text" name="name" maxlength="40" style="width:400px;/></td>
</tr>
<tr>
<td class="required_field">*</td>
<td>Email Address</td>
<td><input type="text" name="email" maxlength="40" style="width:400px;/></td>
</tr>
<tr>
<td></td>
<td>Comments:</td>
<td><textarea name="comments" style="width: 400px; height: 250px;"></textarea></td>
</tr>
</table>
</form

Ch0cu3r · May 29, 2014

All you need to do is copy the two <input ..> lines to where you want them located in your form.

Also why the disabled submit button? This will prevent the user from submitting the form.

Psycho · May 29, 2014

Also why the disabled submit button? This will prevent the user from submitting the form.

Since the "checkbox" field has a class of 'required', I'm guessing it's something like a Terms Of Use type thing where the user must select to acknowledge something in order to submit.

@Chrisj: that's not how it should be done. If the user had JS disabled then they would be blocked from using the form. The submit button should not be disabled by default. Have an onload event that uses JS to disable it. Then enable it once they click it. That way you get the process you want for users that have JS enabled. For non JS users they can still submit the form. But, you would add error handling on the receiving page to check if they checked the box or not. If not, send them back to the form with appropriate error messaging.

Edited May 29, 2014 by Psycho

Chrisj · May 29, 2014

Thanks for your replies.

I also have this code:

<script type="text/javascript" src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
<script>
    $(function() {
    $('input.required').click(function() {
        var unchecked = $('input.required:not(:checked)').length;
        if (unchecked == 0) {
            $('#submitBtn').removeAttr('disabled');
        }
        else {
            $('#submitBtn').attr('disabled', 'disabled');
        }
        });
    });
</script>

Does that make it more like "how it should be done"? I look forward to your reply.

Psycho · May 29, 2014

No. That is the function for enabling/disabling the submit button - which you still need. The problem is that the default state of the submit button needs to be enabled. Then, on page load, use JavaScript to disable it. Although that function could be a little cleaner.

Chrisj · May 29, 2014

Thanks for your reply. I see what you mean, that makes sense, thanks, but I don't know how to "on page load, use JavaScript to disable it", because i'm not a coder. I was provided this code. Can you please help add 'on page load, use JavaScript to disable it' ?

Psycho · May 29, 2014

Without rewriting it all, you can add this:

$( document ).ready(function() {
 $('#submitBtn').attr('disabled', 'disabled');
});

Working example

<html>
<head>
 
<script type="text/javascript" src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
<script>
$( document ).ready(function() {
 $('#submitBtn').attr('disabled', 'disabled');
});
 
    $(function() {
    $('input.required').click(function() {
        var unchecked = $('input.required:not(:checked)').length;
        if (unchecked == 0) {
            $('#submitBtn').removeAttr('disabled');
        }
        else {
            $('#submitBtn').attr('disabled', 'disabled');
        }
        });
    });
</script>
 
</head>
<body>
 
 
 
<form action="../page.php?page=1" method="post" name="contact_us" onSubmit="return capCheck(this);">
<table cellpadding="5" width="100%">
    <tr>
        <td width="10" class="required_field">*</td>
        <td width="80">Your Name</td>
        <td><input type="text" name="name" maxlength="40" style="width:400px;"/></td>
    </tr>
    <tr>
        <td class="required_field">*</td>
        <td>Email Address</td>
        <td><input type="text" name="email" maxlength="40" style="width:400px;"/></td>
    </tr>
    <tr>
        <td></td>
        <td>Comments:</td>
        <td><textarea name="comments" style="width: 400px; height: 250px;"></textarea></td>
    </tr>
    <tr>
        <td></td>
        <td></td>
        <td>
            <input type="checkbox" class="required" /> Click to check<br />
            <input type='submit' id="submitBtn" value="Submit">
        </td>
    </tr>
</table>
</form>
 
</body>
</html>

However, as I said before, you need to modify the page that receives the form post to verify that the checkbox was checked.

Sign In

Help me integrate this code with this code - Contact Form

Recommended Posts

Chrisj

Link to comment

Share on other sites

Ch0cu3r

Link to comment

Share on other sites

Psycho

Link to comment

Share on other sites

Chrisj

Link to comment

Share on other sites

Psycho

Link to comment

Share on other sites

Chrisj

Link to comment

Share on other sites

Psycho

Link to comment

Share on other sites

Join the conversation

Browse

Activity

Important Information