CODEWITHSUNDEEP
javascriptjqueryhtml
user3038607
user3038607

Reputation: 411

Appear div on select change with php

I am kinda stuck and I can't tell why.

I am trying to make a form and within this form I put a 'select' tag. Every options has a single number, 0 to 5. If you choose less than 2, a div appears, else, nothing appears. Here's my code :

<script>
$(document).ready(function(){
    $("#depuis").change(function(){
        if ($('#depuis') < 2)
            $('#moins2').show();        
    });
});
</script>

And this is my body :

<form action="test.php" method="post">
    <table class="formDiv" id="info_perso">
        <tr>
            <td><label for="depuis">Depuis combien d'annees:</label></td>
            <td><select id="depuis" name="depuis">
                    <option value=''></option>
                    <option value='1'>1</option>
                    <option value='2'>2</option>
                    <option value='3'>3</option>
                    <option value='4'>4</option>
                    <option value='5'>5</option>
                </select>
            </td>
        </tr>
    </table>
</form>
<table class="formDiv" id="moins2">
    <tr>
        <td>Veuillez entrer votre ancienne adresse.</td>
    </tr>
    <tr>
        <td><label for="adresse2">Adresse :</label></td>
        <td><input type="text" id="adresse2" name="adresse2"></td>
        <td><label for="app2">App :</label></td>
        <td><input type="text" id="app2" name="app2"></td>
    </tr>
    <tr>
        <td><label for="codepostal2">Code Postal :</label></td>
        <td><input type="text" id="codepostal2" name="codepostal2"></td>
        <td><label for="ville">Ville :</label></td>
        <td><input type="text" id="ville" name="ville"></td>
    </tr>
    <tr>
        <td><label for="telephone2">Telephone :</label></td>
        <td><input type="text" id="telephone2" name="telephone2"></td>
    </tr>
</table>

There's a problem in my function, how can I fix it?

Upvotes: 0

Views: 95

Answers (6)

Satish Sharma
Satish Sharma

Reputation: 9635

add a onchage event on your select box like this

<select id="depuis" name="depuis" onchange="javascript:show_div(this.value);">

and use js function 

function show_div(str)
{
       if(str<2)
       {
           document.getElementById('moins2').style.display="block";
       }   
       else
       {
           document.getElementById('moins2').style.display="none";
       } 


}

you can also use jquery function as follows without attibute onchange on select box

$(function(){
   $("#depuis").change(function(){
        if (this.value < 2){
            $('#moins2').show();        
        }else{
            $('#moins2').hide();        
        }
    });
})

See JS Fiddle

Upvotes: 0

Sridhar R
Sridhar R

Reputation: 20418

Getting select box value use .val()

    <script>
    $(document).ready(function(){
        $("#depuis").on('change',function(){

        if (parseInt($("#depuis").val()) < 2)
            $('#moins2').show();
        else
            $('#moins2').hide();
          });
        $("#depuis").trigger('change')
    });    
   </script>

DEMO

Upvotes: 0

Zword
Zword

Reputation: 6787

Try this:

<script>
$(document).ready(function(){
    $("#depuis").change(function(){
        if ($('#depuis').val() < 2)
            $('#moins2').show();        
        else
            $('#moins2').hide();        
    });
});
</script>

Demo

Upvotes: 0

rajesh kakawat
rajesh kakawat

Reputation: 10906

try something like this

$(function(){
   $("#depuis").change(function(){
        if (this.value < 2){
            $('#moins2').show();        
        }else{
            $('#moins2').hide();        
        }
    });
})

Upvotes: 1

codingrose
codingrose

Reputation: 15709

Write:

check();
$("#depuis").change(function () {
    check();
});
function check() {
    if (parseInt($("#depuis").val()) < 2) {
        $('#moins2').show();
    } else {
        $('#moins2').hide();
    }
}

DEMO here.

Upvotes: 1

Ashish Ratan
Ashish Ratan

Reputation: 2870

    if ($('#depuis') < 2)
        $('#moins2').show();

you are not comparing with integers... first get the indexed size and then compare or use else case to check what is going wrong here...

Upvotes: 0

Related Questions