Hidden input value set by JQuery not passed on form submit

Question

I am using Codeigniter and I have a form with a button group (2 buttons). On new page load (initial visit to site) the first button is selected and my script sets the value of a hidden input that is associated with this button. If the user selects the second button, additional fields are shown on the screen and the hidden input value for this button is set while the first hidden input value is cleared. This all works fine.

I can see in firebug that the hidden input value is being updated but when I submit my form, the hidden input has no value.

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';
}

Script

$(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();
  });
});

When you view the form post in Google Chrome's Developer tools under network, what does the value show it submitted as? You can also try do a var_dump($_POST) to see what is inside there. Like the comment mentioned below, if the field is disabled it won't submit. I see now you add a disabled attribute in your jquery. — Chris
Inputs with the attribute disabled are not submitted. I believe this is part of the HTML spec — bassxzero
Add $('[type="hidden"]').prop('disabled',false); before $('#cartform').submit(); to verify this is the problem. — bassxzero
Thanks for the input, the hidden input does not have the disabled property, just the Bootstrap button. I added a screenshot of firebug to the question above. This is a screenshot after click the multi-ship button. — ReeseB

ReeseB ReeseB · Accepted Answer · 2016-12-10T03:39:38

1

votes

Problem solved. I had the hidden inputs outside of the form tags.

Hidden input value set by JQuery not passed on form submit

1 Answers