CODEWITHSUNDEEP
phphtmljquerytwitter-bootstrapcodeigniter
Capton
Capton

Reputation: 67

Cannot get value of bootstrap dropdown on Submit

I have the following code of which i want to get the value of the text displayed on the bootstrap dropdown button when i click on the submit button, and also the i want the POST to be sent to a codeigniter controller to perform certain operations on it. I need help please.

    <form method="post" action="#" id="user-order-form">
      <div class="users-order col-md-5">
        <label class=""> <strong>ORDER BY </strong></label>
        <div class="dropdown form-control" style="padding:0px; margin-left: 20px; margin-right:10px">
          <button class="btn btn-default dropdown-toggle form-control" type="button" id="user-order-dropdown" name="user-order-dropdown" data-toggle="dropdown">
            Surname
            <span class="caret"></span>
          </button>
          <ul class="dropdown-menu" aria-labelled-by="user-order-dropdown" id="capton">
            <li><a href="#">Surname </a> </li>
            <li><a href="#">First Name </a> </li>
            <li><a href="#">Company Name </a> </li>
          </ul>
        </div>
        <label class="radio-inline"><input type="radio" name="order-radio" checked>ASC</label>
        <label class="radio-inline"><input type="radio" name="order-radio">DESC</label>


        <button type="submit" class="btn" name="order-submit-btn" id="order-submit-btn">Order</button>
      </div>
    </form>

This is the jquery code that displays the selected dropdown item:

    $('.dropdown').each(function (key, dropdown) {
       var $dropdown = $(dropdown);
       $dropdown.find('.dropdown-menu a').on('click', function () {
          $dropdown.find('button').text($(this).text()).append(' <span class="caret"></span>');
       });
    });

Upvotes: 0

Views: 649

Answers (1)

sauhardnc
sauhardnc

Reputation: 1961

To get the value of dropdown: You need to create a hidden input field and every time the value of dropdown changes, you need to update it.

To get the POST data in the controller: You need to create a controller(obviously) and a function within that controller. Then give that URL to the form action attribute.

I've written a reference code for you with necessary explaining in the comments, see if it helps you.

View

<form method="post" action="<?php echo base_url('some_controller/some_function');?>" id="user-order-form">
<!-- give the action where controller name(some_controller) and function name(some_function) -->
  <div class="users-order col-md-5">
    <label class=""> <strong>ORDER BY </strong></label>
    <div class="dropdown form-control" style="padding:0px; margin-left: 20px; margin-right:10px">
      <button class="btn btn-default dropdown-toggle form-control" type="button" id="user-order-dropdown" name="user-order-dropdown" data-toggle="dropdown">
        Surname
        <span class="caret"></span>
      </button>
      <!-- make a hidden field, give it a default value(which is initially selected), give it a name(it will be used to get the post data)-->
      <input type="hidden" name="dropdown" value="Surname"id="dropdown_input"/>
      <ul class="dropdown-menu" aria-labelled-by="user-order-dropdown" id="capton">
        <li><a href="#">Surname </a> </li>
        <li><a href="#">First Name </a> </li>
        <li><a href="#">Company Name </a> </li>
      </ul>
    </div>
    <label class="radio-inline"><input type="radio" name="order-radio" checked>ASC</label>
    <label class="radio-inline"><input type="radio" name="order-radio">DESC</label>
    <button type="submit" class="btn" name="order-submit-btn" id="order-submit-btn">Order</button>
  </div>
</form>

JQuery

   $('.dropdown').each(function (key, dropdown) {
       var $dropdown = $(dropdown);
       $dropdown.find('.dropdown-menu a').on('click', function () {
           $dropdown.find('button').text($(this).text()).append(' <span class="caret"></span>');
           $('#dropdown_input').val($(this).text()); // change the value of hidden input field
       });
    });

Controller(Some_controller.php)

function some_function(){
    $dropdown    = $this->input->post('dropdown'); // get dropdown value
    $order_radio = $this->input->post('order-radio'); // get radio value
    /* Do whatever you want to with that data here(Eg - Save in DB) -- your logic */
}

Upvotes: 1

Related Questions