Change placeholder by clicking the radio

Asked

Viewed 487 times

1

I’m new to JS, and I would like to click on a radio and the placeholder would change according to the radio clicked, I did this way but it doesn’t work.

Here is my Modal:

<!-- Button to Open the Modal -->
    <form action="/projeto/vendas/" method="post">
    <button type="button" class="button-modal btn btn-primary" data-toggle="modal" data-target=".bd-example-modal-xl">Pagar Venda</button>

    <!-- The Modal -->
    <div class="modal fade bd-example-modal-xl" tabindex="-1" role="dialog" aria-labelledby="myExtraLargeModalLabel" aria-hidden="true">
        <div class="div-modal modal-dialog modal-lg">
            <div class="modal-content">

            <!-- Modal Header -->
                <div class="modal-header">
                    <h2 class="h2-modal modal-title">Formas de Pagamento</h2>                        
                    <button type="button" class="close" data-dismiss="modal">&times;</button>
                </div>

                <!-- Modal body -->
                <div class="modal-body">
                    <br />
                    <table class="payment-methods">
                        <tr>
                            <td class="td-modal"> 
                                <input type="radio" name="pagamentos_id" id="dinheiro" class="pg pagamentos_id" value="1"/>
                                <label for="dinheiro" class="labelpag">
                                    <img src="/projeto/img/cash.png" class="imgpag" alt="" >
                                </label>
                                <br />
                            </td>

                            <td class="td-modal2">
                                <input type="radio" name="pagamentos_id" id="credito" class="pg pagamentos_id" value="2"/>
                                <label for="credito" class="labelpag2">
                                    <img src="/projeto/img/card2.png" class="imgpag2">
                                </label>
                            </td>
                            <br />
                            <td>
                                <input type="radio" name="pagamentos_id" id="debito" class="pg pagamentos_id" value="3"/>
                                <label for="debito" class="labelpag2">
                                    <img src="/projeto/img/card.png" class="imgpag2">
                                </label>
                            </td>
                        </tr>
                    </table>

                    <table>
                        <tr>
                            <td>
                                <p class="p_pagamento totalpago">Total de Itens:
                                <?php 
                                if(isset($_SESSION['carrinho'])){
                                    echo count($_SESSION['carrinho']);
                                ?>
                                    <input type="hidden" name="total_produto" id="total_produto" value="<?php echo count($_SESSION['carrinho']); ?>">
                                    <?php
                                    } 
                                    ?>
                                </p>
                            </td>
                            <td>
                                <p class="p_pagamento">Total da Venda: R$ <span class="total_venda"></p>
                            </td>
                        </tr>
                        <tr>
                            <td> 
                                <p class="p_pagamento" id="InputPagamento1"> Total Pago: R$ 
                                    <input name="total_pago" value="" class="input_pagamento" id="total_pago"></p>
                            </td>
                            <td>
                               <p class="p_pagamento trocopagamento" id="InputPagamento2"> Troco R$ 
                                <span id="troco"></span></p> 
                            </td>

                        </tr>
                    </table>
                <!-- Modal footer -->
                <div class="modal-footer">
                    <button type="button" class="btn btn-danger" data-dismiss="modal">Close</button>-->
            </div>
        </div> 
    </div>
</div>

My Script:

    $(document).ready(function () {
    $('.pagamentos_id').on('change',function () {
        if($(this).val() === '2'){
            $('#InputPagamento1').attr({placeholder:"Parcelas:"});
            $('#InputPagamento2').attr({placeholder:" "});
        }
        if($(this).val() ==='3'){
            $('#InputPagamento1').attr({placeholder:"Parcelas: "});
            $('#InputPagamento2').attr({placeholder:" "});
        }
    });
});
javascript html jquery placeholder radiobutton
  • 1

    InputPagamento1 is a <p> he doesn’t have placeholder, in view of this what you want to change?

  • 1

    I understand, sorry for my lack of knowledge, it would be possible to change the <p>?

  • within the <p> has a loose text and a <input> you want to change the description of the text? ie, Total Pago: R$ for Parcelas:? or place this value on input?

  • That would be right, swap the loose text for Installments:

1 answer

2


You can enter a <label> within <p class="p_pagamento" id="InputPagamento1"> and amend the text of that label. Follows the html and the js:

$(document).ready(function() {
  $('.pagamentos_id').on('change', function() {
    $('#InputPagamento1 label').text("Total Pago: R$")
    if ($(this).val() === '2') {
      $('#InputPagamento1 label').text("Parcelas:");
      $('#InputPagamento2').attr({
        placeholder: " "
      });
    }
    if ($(this).val() === '3') {
      $('#InputPagamento1 label').text("Parcelas:");
      $('#InputPagamento2').attr({
        placeholder: " "
      });
    }
  });
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table class="payment-methods">
  <tr>
    <td class="td-modal">
      <input type="radio" name="pagamentos_id" id="dinheiro" class="pg pagamentos_id" value="1" />
      <label for="dinheiro" class="labelpag">
                                    <img src="/projeto/img/cash.png" class="imgpag" alt="" >
                                </label>
      <br />
    </td>

    <td class="td-modal2">
      <input type="radio" name="pagamentos_id" id="credito" class="pg pagamentos_id" value="2" />
      <label for="credito" class="labelpag2">
                                    <img src="/projeto/img/card2.png" class="imgpag2">
                                </label>
    </td>
    <br />
    <td>
      <input type="radio" name="pagamentos_id" id="debito" class="pg pagamentos_id" value="3" />
      <label for="debito" class="labelpag2">
                                    <img src="/projeto/img/card.png" class="imgpag2">
                                </label>
    </td>
  </tr>
</table>

<p class="p_pagamento" id="InputPagamento1">
  <label for="total_pago">Total Pago: R$ </label>
  <input name="total_pago" value="" class="input_pagamento" id="total_pago">
</p>

  • Ah thanks for the help!!

Browser other questions tagged javascript html jquery placeholder radiobutton

You are not signed in. Login or sign up in order to post.