Adding values (by user) to drop down list populated from db

Question

I'm trying to create an "editable" drop down list. I have a drop down list populated from a table "city" in my db, it works perfect but now I want user to be able to add a new value to the list if it doesn't exist there (and I want to save this value, so next time it appears in the drop down list). Any ideas? Thank you

        <select name="city"> 
    <?php 
    // connecting to DB
    $con=  mysqli_connect('localhost','root','1234','e-sage');
    // enable hebrew input
    mysqli_set_charset($con,'utf8');
    // read the city table from DB
    $sql = mysqli_query($con,"SELECT CityName FROM city");
    while ($row = mysqli_fetch_array($sql)){
    // creating temporary variable for each row
    $city1=$row["CityName"];
    //assigning a value to each option in dropdown list
    echo "<option value=\"$city1\"> $city1 </option>";
    }
    ?>
    </select>

Noman Ghani · Accepted Answer · 2014-04-27 10:47:29Z

1

You can provide a 'other' selection in the dropdown. If user selects that then display a new textbox from which you can insert in the database.

answered Apr 27, 2014 at 10:47

Noman Ghani

4683 silver badges9 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

user3578048 Over a year ago

It was one of my options too, but then I decided to try to do it without opening new textbox... Thank you.

Noman Ghani Over a year ago

So how you wanna do it?

marcineck · Accepted Answer · 2014-04-27 12:19:30Z

0

Then try this: Lets agree that you already got all the cities in array OK?

<select name="city">
<?PHP
foreach($cities as $city)
{
echo '<option value="'.$city.'">'.$city.'</option>';
}
?>
</select>

<form method="post">
<label for="new_city">New city</label>
<input id="new_city" name="new_city" placeholder="Enter new city name" />
<input type="button" id="addCity" value="Insert city" />
</form>



  <script>
        $(document).on('click','#addCity',function()
                       {

                          var new_city=$("#new_city").val();
                          var e=0;
                           $("[name='city'] option").each(function(i,item)
                                                          {
                                                              var check_city=$(item).val();

                                                              if(check_city==new_city)
                                                              {
                                                                 e++;
                                                              }
                                                              else
                                                              {

                                                              }

                                                          });
                           if(e>0)
                           {
                               alert('The same');
                           }
                           else
                           {
                               /*Submit the form*/
alert('This city is fresh and new');

                           }


                       });
    </script>

So the script is checking if the value is already assigned to option. If not - allows to submit the form.

Check this one: http://jsfiddle.net/n47N2/1/

answered Apr 27, 2014 at 12:19

marcineck

2811 silver badge6 bronze badges

2 Comments

user3578048 Over a year ago

Thank you very much, it does solve the problem! But I'm still wondering if I can do it within the same textbox, without having additional one for new option's insert?

marcineck Over a year ago

Well... the solution would be to have like "Add new" as option to this select field, then after its clicked - javascript prompt is executed, data saved by AJAX to DB and then reload the Select list ;)

ashishmaurya · Accepted Answer · 2014-04-27 10:49:49Z

0

use datalist tag

link to w3School tutorial

answered Apr 27, 2014 at 10:49

ashishmaurya

1,19610 silver badges18 bronze badges

Collectives™ on Stack Overflow

Adding values (by user) to drop down list populated from db

3 Answers 3

2 Comments

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related