Question

I’m trying to send the selected option text to the url using jquery but whenever I wrap my form between <form></form> tags it stops working and sends the value instead of the text. If I remove the form tags it behaves the way i expect.

I want to know if there’s any way to make it work without excluding the form tags

Thanks!

<form>
    <select name="brand" id="brand" class="update">

        <option value="">Seleccionar</option>

        <?php if (!empty($list)) { ?>

            <?php foreach($list as $row) { ?>

                <option value="<?php echo $row['id']; ?>">

                    <?php echo $row['name']; ?>

                </option>

            <?php } ?>

        <?php } ?>

    </select>

    <select name="model" id="model" class="update" disabled="disabled">
        <option value="">----</option>
    </select>

    <select name="size" id="size" class="update" disabled="disabled">
        <option value="">----</option>
    </select>

    <input type="submit" value="Search" id="submit">

</form>

    </div>
    </div>
    <script src="js/jquery-1.6.4.min.js" type="text/javascript"></script>

    <script src="js/core.js" type="text/javascript"></script>

    <script type="text/javascript">
      $(document).ready(function(){
       $('#submit').click(function(){
        var brand = $('#brand option:selected').text();
        var model = $('#model option:selected').text();
        var size = $('#size option:selected').text();
        location.href ='index.php?s='+brand+'+'+model+'+'+size+'';
       });
      });
    </script>

Answer 1

The form is submitting, you’ll need to prevent that:

$(document).ready(function(){
   $('#submit').click(function(e){
    e.preventDefault();
    var brand = $('#brand option:selected').text();
    var model = $('#model option:selected').text();
    var size = $('#size option:selected').text();
    location.href ='index.php?s='+brand+'+'+model+'+'+size+'';
   });
});