JQuery 设置的隐藏输入值未在表单提交时传递答案

【问题标题】：Hidden input value set by JQuery not passed on form submitJQuery 设置的隐藏输入值未在表单提交时传递
【发布时间】：2016-12-09 18:37:16
【问题描述】：

我正在使用 Codeigniter，并且我有一个带有按钮组（2 个按钮）的表单。在新页面加载（首次访问站点）时，第一个按钮被选中，我的脚本设置了与此按钮关联的隐藏输入的值。如果用户选择第二个按钮，屏幕上会显示附加字段，并且会设置此按钮的隐藏输入值，同时清除第一个隐藏输入值。这一切都很好。

我可以在 firebug 中看到隐藏的输入值正在更新，但是当我提交表单时，隐藏的输入没有任何值。

HTML

<div class="panel-heading" id="order-hd">
  <div class="btn-group" role="group" aria-label="...">
    <button type="button" id="single-ship" class="btn btn-primary">
      <i class="fa fa-user" aria-hidden="true"></i> Place order for a single recipient
    </button>
    <button type="button" id="multi-ship" class="btn btn-primary">
      <i class="fa fa-users" aria-hidden="true"></i> Place an order for multiple recipients
    </button>
  </div>
  <input type="hidden" name="single_ship" id="single_ship" value="" />
  <input type="hidden" name="multi_ship" id="multi_ship" value="" />
</div>

PHP

if($this->input->post('multi_ship')) {
  $this->form_validation->set_rules('fname', 'First Name', 'trim|required');
  $this->form_validation->set_rules('lname', 'Last Name', 'trim|required');
  $this->form_validation->set_rules('address', 'Address', 'trim|required');
  $this->form_validation->set_rules('city', 'City', 'trim|required');
  $this->form_validation->set_rules('state', 'State', 'trim|required');
  $this->form_validation->set_rules('zip', 'Zip Code', 'trim|required');
  $order_type = 'M';
}
else {
  $order_type = 'S';
}

脚本

$(document).ready(function() {

  if (!$('#multi-ship').hasClass("locked") && !$('#single-ship').hasClass("locked")) {
    //Default sinlge ship method on initial page load
    $('#shipping-addr').hide();
    $('#single-ship').addClass('locked');
    $('#single-ship').attr('disabled', 'true');
    $('#single_ship').val('X');
  }

  $('#multi-ship').on('click', function() {
    $('#shipping-addr').show();
    $('#single-ship').removeClass('locked');
    $('#single-ship').removeAttr('disabled');

    $('#multi-ship').addClass('locked');
    $('#multi-ship').attr('disabled', 'true');

    $('#single_ship').val('');
    $('#multi_ship').val('X');
  });

  $('#single-ship').on('click', function() {
    $('#shipping-addr').hide();
    $('#multi-ship').removeClass('locked');
    $('#multi-ship').removeAttr('disabled');

    $('#single-ship').addClass('locked');
    $('#single-ship').attr('disabled', 'true');

    $('#multi_ship').val('');
    $('#single_ship').val('X');
  });

  $('#giftwrap').change(function() {
    cb = $(this);

    cb.val(cb.prop('checked'));
  });

  $("#item_delete").click(function(e) {
    e.preventDefault();
    $('#cartform').submit();
  });
});

【问题讨论】：

在网络下谷歌浏览器的开发者工具中查看表单post时，提交的值是什么？你也可以尝试做一个 var_dump($_POST) 看看里面有什么。就像下面提到的评论一样，如果该字段被禁用，它将不会提交。我现在看到您在 jquery 中添加了一个 disabled 属性。
属性为disabled 的输入未提交。我相信这是 HTML 规范的一部分
在$('#cartform').submit(); 之前添加$('[type="hidden"]').prop('disabled',false); 以验证这是问题所在。
感谢输入，隐藏输入没有 disabled 属性，只有 Bootstrap 按钮。我在上面的问题中添加了萤火虫的屏幕截图。这是点击多船按钮后的截图。

标签： php jquery codeigniter

【解决方案1】：

问题解决了。我在表单标签之外有隐藏的输入。

【讨论】：