如何在数据库中插入Bootstrap下拉值

Question

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

Answer 1

For the point 1 : Since you have the # in the href the page scrolls up (ie 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);
     });
});

Answer 2

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

    });
}