Question

我有一个目前有几个基本字段的表单。

<input name="model" type="text">
<input name="esn" type="text">
<select name="status">
     <option value="Pending">Pending</option>
     <option value="Ordered">Ordered</option>
     <option value="Received">Received</option>
 </select>
<input type="submit" value="Save Order or Add Payment" />

我允许我的用户根据需要编辑此表单，所以基本上如果已经订购了模型，他们将状态设置为已订购，然后将其保存到数据库。这些工作正常，但我想添加一个条件，如果他们选择收到状态并点击提交按钮，它将首先检查ESN是否为空。我知道我可以在esn字段上设置“required”，但如果我这样做，它总是要求用户输入ESN，我只需要他们在选择接收状态时输入它。我们使用该表单作为跟踪订单的方式，在我们实际收到交货之前，我们不会收到邮件。

有关如何处理这种情况的任何建议吗？谢谢你的阅读。

Answer 1

然后，您可以使用addClass removeClass函数。选择接收选项时添加所需的类。

<input name="esn" id="esn" type="text">
<select name="status" id="status">


$(document).ready(function(){
    $('#status').change(function(){
        if($(this).val() == 'Received')
            $('#esn').addClass('required');
        else
            $('#esn').removeClass('required');
    });
});

Answer 2

    <form method='post' action='somesite.php'>
         <input name="model" type="text">
        <input name="esn" type="text">
        <select name="status">
             <option value="Pending">Pending</option>
             <option value="Ordered">Ordered</option>
             <option value="Received">Received</option>
        <input type="submit" value="Save Order or Add Payment" onclick='return validate();' />
    </form>

    <script> function validate() {
      if(document.getElementsByName('esn')[0].value == "")
{
 alert ('ESN is Empty');
return false;
}
      return true
    } </script>

即使没有jQuery，这将适用于你

Answer 3

你可以在提交上调用一个函数，并检查那里的值

<input type="button" value="Save Order or Add Payment" onclick="validate(this.form)"/>

function validate(form)
{
if (document.getElementByName(status).value==="Recieved" && document.getElementByName(esn).value==="")
    alert("Please fill ESN");
else
   form.submit();

}

Answer 4

这可以使用JavaScript实现。写一个条件来检查用户是否选择了接收，然后如果esn为空则返回false或显示一些警告。

function checkReceived()
        {
            var s = document.getElementById('status');
            var item1 = s.options[s.selectedIndex].value;
            if(item1=='Received')
            {
                alert("ens should not empty");
                return false;
            }
            else
            {
                return true;
            }
        }



<input type="button" value="Save Order or Add Payment" onclick='checkReceived()'/>

在选择框中添加ID并正确关闭选择框

根据输入字段值提交表单

4 个答案: