Jump to content

Help me integrate this code with this code - Contact Form


Chrisj

Recommended Posts

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
Link to comment
Share on other sites

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 by Psycho
Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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' ?

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

This thread is more than a year old. Please don't revive it unless you have something important to add.

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.