Question

I have the code as below:

<form method ="post" id="myForm">
<table>

    <tr>
        <td>Classification socio <br /> professionnelle à l'embauche : </td>
        <td>
            <select name="droClassification" class="validate[required]" id="classification">
                <option value="">choisir catégorie </option>
                <option value="Ouvrier">Ouvrier</option>
                <option value="Employe">Employé</option>
                <option value="AgentMaitris">Agent de maitrise</option>
                <option value="Cadre">Cadre</option>
                <option value="Autre">Autre</option>
            </select>
        </td>
        <td></td>
    </tr>
     <?php
        if($_POST['droClassification'] == "Ouvrier" || $_POST['droClassification'] == "Employe"){

            echo '<style type="text/css"> #trHide{display:none;}</style>';
        }
    ?>
    <tr id="trHide">
        <td colspan="4">This is what I want to hide it, when I select on the Ouvrier or Employe</td>
    </tr>

</table>

I need:
When I select on Ouvrier or Employee,it will be hide <tr id="trHide"> tag.

Problem:
I used the PHP code as my code above but it dose not work.So do you have any idea for this? or which technology should I use like AJAX,JQUERY,PHP? Help me please,Thanks.

Answer 1

Forget about php or ajax, you don’t have to make a request for this behavior.
Use javascript for it, I’ll show you how to do it using jQuery.

Try this, using jQuery:

jQuery('#classification').change(function() {
    var selectedValue = $(this).val();
    if(selectedValue == 'Ouvrier' || selectedValue == 'Employe') {
        $('#trHide').hide();
    }
});

demo

If you want to show #classification when change to others you can do the following.

jQuery('#classification').change(function() {
    var selectedValue = $(this).val(),
        $row = $('#trHide');
    if(selectedValue == 'Ouvrier' || selectedValue == 'Employe') {
        $row.hide();
    } else {
        $row.show();
    }
});

demo

Update: according to this comment.
Change to class instead of id.

<tr class="trHide">
        <td colspan="4">This is what I want to hide it, when I select on the Ouvrier or Employe</td>
</tr>

Then change $('#trHide') to $('.trHide').