提交表格时首先批准

Question

我正在使用PHP CodeIgniter框架。

问题在于我希望用户通过选中复选框然后提交表单来检查他们输入并批准的字段。

就像这些是字段一样。

<tr>    
    <td>Remarks </td>
    <td><textarea name="particular" rows="3" class="save_record autosuggestship"></textarea></td>   
    <td>&nbsp;</td>
    <td>&nbsp;</td>                 
</tr>
<tr>
    <td>Custom Reference No.</td>
    <td><input type = 'text' name = 'custom_ref_no' class = 'save_record autosuggestship' id="custom_ref_no" /></td>
    <td>Date</td>
    <td><input name = 'costom_date' type = 'text' class = 'save_record date_class autosuggestship' id="costom_date" /></td>
</tr>
<tr>
    <td>
        <p> Container Information </p>
    </td>
    <td>

---

这是要批准的复选框。

<tr>
    <td>Approve</td>
    <td><input type="checkbox" id="Approve" /></td>
    <td>&nbsp;</td>
    <td align="left">&nbsp;</td>
</tr>

Answer 1

使用jQuery：尝试在包含在<script></script>标记中并包含jQuery的页面中插入它。

$(document).ready(function() {
    $('form input[type=submit]').on('click', function(e) {
      e.preventDefault();
      if($('#Approve').attr('checked') == 'checked') {
        $('form').submit();
      }
      else {
        alert('You must check the Approve checkbox to continue!');
      }
    });
    // if the user presses enter.
    $('form').on('keyup', function(e) {
      if(e.which == 13) {
       $('form').submit();
      }
    });
});

在PHP中（确保您输入name="Approve"：

if(isset($_POST['Approve']) {
  // they have ticked the checkbox.
}

Answer 2

如何使用jQuery：

这不是万无一失的，因为浏览器总是可以决定不运行这个js，但仍然有用，因为它在提交表单之前通知用户（并等待服务器响应）所以这主要是为了节省一些带宽，因为这可以防止对服务器的无用请求

Useless requests表示HTTP请求（表单提交），它返回消息，要求用户勾选一个复选框，然后再次提交相同的数据。

$(document).ready(function() {

    // Catch submit events:
    $('form').submit(function() {
        // Check if checkbox is checked:
        if ($('#checkme').is(':checked')) {
            // Allow form submit:
            return true; 
        } else {
            // Prevent form submit:
            alert('You must check the Approve checkbox to continue!');
            return false;
        }
    });

});

请参阅如何使用PHP 标题下的<form>示例。

上面的客户端解决方案基于 tomhallam 的答案，将其修改为更小，更简单，更完整，并遵循更好的jQuery建议。

如何使用PHP：

在服务器端进行相同检查总是好的，在这种情况下使用PHP。服务器端检查确保无论客户端是否缺乏对Javascript或服务器定义的任何其他客户端检查方法的支持，都会检查值。

<?php
/* POST($key) returns value of $_POST($key) if set, 
 *  otherwise empty string is returned. */
function POST( $key ) {
    if ( isset( $_POST[$key] )) return $_POST[$key];
    else return '';
}

if ( isset( $_POST['checkme'] )) {
    // Checkme is checked, do something with form data:
    mySql_insert_formdata( $_POST );
    $_POST['error'] = 'Form processed, thanks for your data';
} elseif ( isset($_POST['submitted'])) {
    // Form submitted but checkme not checked, set error message
    $_POST['error'] = 'Checkme must be cheked first!';
}

echo POST('error');
?>

<form action="forms.php" method="post">
    <!-- Hidden field to check at server if form is submitted -->
    <input type="hidden" name="submitted" value="anything" />
    <!-- Some fields for user to fill, POST() inserts previous value if any -->
    <label for="email">eMail</label>
    <input type="email" id="email" name="email" value="<?php echo POST('email'); ?>" /><br/>
    <!-- Checkbox that must be checked -->
    <input type="checkbox" id="checkme" name="checkme" />
    <label for="checkme">Approve</label><br/>
    <!-- And submit button -->
    <input type="submit" value="Submit" />
</form>

结合客户端和服务器端解决方案：

Javascript（客户端）解决方案无法保证做任何事情，这取决于浏览器设置和javascript支持 PHP（服务器端）解决方案保证可以正常工作，客户端/浏览器无法改变这一点。

但是，我认为最好同时支持Javascript，客户端即时获得有关问题的通知，而不必等待服务器处理。 当用户没有JS支持时，他必须在检查表单时等待服务器并使用数据或返回"try again"错误。

Answer 3

使用表单onsubmit事件处理程序

<form onsubmit="return this.Approve.checked?true:alert('must approve!'),false">
<table>
<tr>
    <td>Approve</td>
    <td><input type="checkbox" id="Approve" /></td>
    <td>&nbsp;</td>
    <td align="left">&nbsp;</td>
</tr>
</table>
<input type="submit"/>
</form>

而不是内联代码，你可以使用一个函数，不要忘记留下内联“return myfunc（）”，因为表单提交将取决于该返回，如果为true，表单将被提交，否则它只是等待。