CODEWITHSUNDEEP
javascriptphpjquerymysqltwitter-bootstrap
bc110402307 Syed Zeeshan Haide
bc110402307 Syed Zeeshan Haide

Reputation: 454

How to insert Bootstrap drop-down values in database

i am using bootstrap for making a user form. Now i need to insert selected drop-down value in database. But i am facing two problems.

1) When i select any item from drop-down, it jumps to top of my screen in url because of href="#". When i removed "#", it started the page refresh on selection item.

2) How i target my drop-down list to insert any selected value in database using php.

My code is

 <div class="dropdown">
<button class="btn btn-default dropdown-toggle" type="button" data-toggle="dropdown">Select City
<span class="caret"></span></button>
<ul class="dropdown-menu">
  <li><a href="#">Lahore</a></li>
  <li><a href="#">Islamabad</a></li>
  <li><a href="#">karachi</a></li>
</ul>
   </div>

javascript code

$(document).ready(function() {


    $(".dropdown-menu li a").click(function(){
  $(this).parents(".dropdown").find('.btn').html($(this).text() + ' <span class="caret"></span>');
  $(this).parents(".dropdown").find('.btn').val($(this).data('value'));
});

Upvotes: 2

Views: 2028

Answers (2)

Rajshekar Reddy
Rajshekar Reddy

Reputation: 19007

For the point 1 : Since you have the # in the href the page scrolls up (i.e. navigating to the link target). You can prevent this event by adding event.preventDefault() in your code.

For Point 2: Since you said if you are able to get the value to your server side php code then you can proceed further you can make use of AJAX Post method. The final code would be

 $(document).ready(function() {
    $(".dropdown-menu li a").click(function(e){
      e.preventDefault(); //this is the line which prevents the event
      $(this).parents(".dropdown").find('.btn').html($(this).text() + ' <span class="caret"></span>');
      $(this).parents(".dropdown").find('.btn').val($(this).data('value'));

     //this is the code to post the value to server
     $.post("YourPHPMethod.php",{name: $(this).text()} ,function(response){
        alert("Response from server: "+response);
     });
});

Upvotes: 1

studio-klik
studio-klik

Reputation: 196

You have to post it to a php. I do it with ajax like this.

Look: http://www.codesheet.org/codesheet/wOHDXFju

function postContent(cv) {

  $("#myDiv").html('L  O  A  D  I  N  G ...').show();

  var url = "/post.php";

  $.post(url, {id: cv} ,function(data) {  //contentVar is the variable in post.php

       $("#myDiv").html(data).show();

    });
}

Upvotes: 0

Related Questions