J'ai un sexe de boîte de sélection et je veux changer le libellé des autres champs après avoir changé de sexe

Mon code est ici

<label class="control-label col-sm-3">Gender</label>
<div class="col-sm-9">
    <select class="form-control" id="gender" name="gender" onchange="changelabel()">
        <option value="">Gender</option>
        <option <?php if($res['gender']=='Female'){?> selected="selected" <?php } ?> value="Female">Female</option>
        <option <?php if($res['gender']=='Male'){?> selected="selected" <?php } ?> value="Male">Male</option>
    </select> 

    <!-- Other fields are -->
    <div class="row">
        <div class="col-md-4">
            <div class="form-group">
                <label class="control-label col-sm-3"><span id="prtttl">Wife Title</span></label>
                <div class="col-sm-9">
                    <select class="form-control" id="partnerTtl" name="partnerTtl">
                        <option value="">Select</option>
                        <option <?php if($res['partnerTtl']=='Smt'){?> selected="selected" <?php } ?> value="Smt">Smt</option>
                        <option <?php if($res['partnerTtl']=='Late'){?> selected="selected" <?php } ?> value="Late">Late</option>
                    </select>
                </div>
            </div>
        </div>

        <div class="col-md-4">
            <div class="form-group">
                <label class="control-label col-sm-3"><span id="prtnms">Wife Name</span> </label>
                <div class="col-sm-9">
                    <input type="text" name="hwname" value="<?php echo $res['partnerName'] ?>" placeholder="Husband/Wife Name" class="form-control">
                </div>
            </div>
        </div>

Lorsque l'utilisateur sélectionne un homme, l'étiquette du nom de la femme sera la même si l'utilisateur sélectionne le sexe féminin, le changement d'étiquette en nom de mari est-ce une manière possible de le faire avec javascript

0
user7012276 11 avril 2018 à 14:13

4 réponses

Meilleure réponse

Essayez ce jquery

function changelabel()
    {
        if($("#gender").val() == 'Female')
        {
            $("#prtttl").text("Husband's Title");
            $("#prtnms").text("Husband's Name");
        }
        else
        {
           $("#prtttl").text("Wife's Title");           
           $("#prtnms").text("Wife's Name");
        }
    }
2
Roshni hegde 11 avril 2018 à 11:28

Tu peux le faire:

function changelabel() {
   if ($('#gender').val()== 'Female') {
       $('#prtnms').text('Husband Name')
   else
       $('#prtnms').text('Wife Name');
}

Mais comme vous avez marqué jQuery, vous pouvez le faire à la place:

$("#gender").change(function() {
  if ($(this).val() == 'Female') {
       $('#prtnms').text('Husband Name')
   else
       $('#prtnms').text('Wife Name');
});

Notez que, comme le contenu n'est que du texte, j'ai utilisé text() au lieu de html()

0
Ricardo Pontual 11 avril 2018 à 11:27

Écrivez votre fonction JS comme ci-dessous:

<script>
function changelabel(){
  if($("#gender").val() == 'Female')
  {
     $("#prtttl").html("Husband Title");
     $("#prtnms").html("Husband Name");
  }
  else
  {
     $("#prtttl").html("Wife Title");
     $("#prtnms").html("Wife Name");    
  }
}
</script>
0
B. Desai 11 avril 2018 à 11:22

Essayez un onchange événement comme celui-ci

<script type="text/javascript">
        $(document).ready(function() {
            $('select').on('change', function() {
              data=this.value;
              if (data=='female') {
                $(".your class or Id").append('<span id="prtnms">Wife Name</span>');

              }
            })
        });
    </script>
0
Rahul Shrivastava 11 avril 2018 à 11:20