How to select value from dropdown without using submit

Question

I have two dropdowns: state and city. Both are in the same form. The goal is to somehow save the selection without clicking submit button so it could be used as a criteria to display selections of cities in the second dropdown. For example: When california is chosen in the first dropdown, second dropdwon displays all the cities in California.

Code:

<?php $db= DB::table('states_table')->get(); ?>
<select class="form-control input-md" name="state">
    <option value="" disabled selected>Choose the state</option>
    <?php foreach ($db as $data) { ?>
        <option value="<?php echo $data->city; ?>">
        <?php echo $data->city;?>
        </option><?php 
    }?>
</select>

There is no need to submit it you can fill the city drop down from using AJAX — Sunil Pachlangia
– Sunil Pachlangia, Commented Sep 24, 2015 at 12:10
I would like to keep it as simple as possible, I have no knowledge in AJAX, is it not possible save the selection when choosen without clicking submit without using it? — Giedrius
– Giedrius, Commented Sep 24, 2015 at 12:12
I think if you use AJAX that will be more simple than submit,suppose user change select box frequently or once choose wrong state then what will you save each data in DB. — Sunil Pachlangia
– Sunil Pachlangia, Commented Sep 24, 2015 at 12:16
If you do not want to use Ajax rigidly , you may preceed with iframe. Set form target to iframe and hide that iframe .. now submit your form on dropdown changes to save data .. — Rohit Kumar
– Rohit Kumar, Commented Sep 24, 2015 at 12:17

Ali · Accepted Answer · 2015-09-24 12:29:55Z

2

just use ajax :

    $('#form').on('change','select[name="state"]', function() {
    var province = $('select[name=state]').val();
    $.ajax({
        url: './get_city.php',
        method: 'post',
        data: {"state": state},
        success: function (data) {
            $('select[name=city]').html(data);
        }
    })
});

and in the get_city.php connect to db , get the cities and return them on tags

edited Sep 24, 2015 at 12:29

answered Sep 24, 2015 at 12:18

Ali

5034 silver badges10 bronze badges

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

Comments

user4039035 · Accepted Answer · 2015-09-24 12:18:20Z

0

$('#state_field_id').click(function(){ var state=document.getElementById('state_field_name').options[document.getElementById('state_field_name').selectedIndex].text; });

you will get selected value

answered Sep 24, 2015 at 12:18

user4039035

Collectives™ on Stack Overflow

How to select value from dropdown without using submit

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related