I’m not able to change the value that is inside my tags with the append and prepend function

Asked

Viewed 48 times

0

inserir a descrição da imagem aquiinserir a descrição da imagem aquiI’m leaving the title and dynamic body, changing only the name of the country, but it’s only working once. I am trying to get the name of the country that is in the combobox that I selected, and add it in a div, type, in the VISA FOR THIS (SELECTED COUNTRY) and the same thing for another div with a simple text (selected parents) + does not need visa, etc etc. the first time I click the button it takes the value and adds normally, but when I click the second time only works in the title

  function redirectCountry(country){

    if(country=="Brazil"){
        modalContent=$("#teste").text();
        $("#teste").removeAttr("hidden");     
        $("#teste").prepend(country);
        $(".modal-title").append("TURIST VISAS TO "+country+" :");
        $(".modal-body").append($("#teste"));
        $("#myModal").modal();
    }

}
  $("#countries").change(function(){
    /recebo o pais selecionado
    country=$(this).val();
  });

   $("#btn-check").click(function(){
       redirectCountry(country);
    });

$("#myModal").on("hide.bs.modal", function() {
    //removo tudo que esta no titulo e na div
    $(".modal-title").empty();
    $("#teste").replaceWith(modalContent);
});

</script>

    <select style="margin-top:5px!important; width:55%;  " class="form-control" id="countries" name="country">
        <option value="Brazil">Brazil</option>
        <option value="China">China</option>
</select>
</center>

    <center><button style="font-weight:bold;font-family:open sans; border:none; background-color:#c44444; margin-top:10px; margin-bottom:20px;" class="btn btn-primary" id="btn-check">CHECK INFO</button></center>

</div>

<div class="modal fade" id="myModal" >
    <div class="modal-dialog" style="width: 500px; height: auto;" >

        <div class="modal-content" style="background-color:#f7f7f7; border-radius: 20px; color:white;">
            <div class="modal-header">

                <h4 class="modal-title" style="font-weight:bold; font-family:open sans condensed; color:#001c38; padding-left:18%;"></h4>
                <button class="close" data-dismiss="modal">&times;</button>
            </div>

            <div class="modal-body" style="font-family:Comfortaa; color:#8b8686; text-align:center; padding-top: 0px;">

            </div>

            <div >

                <a href="https://visasforamericans.com/contact/"><button style="font-weight:bold;font-family:open sans; float: right; border-radius:5px; border:none; background-color:#c44444;margin-right: 20px; margin-bottom: 20px;" class="btn btn-primary btn-sm" id="btn-check">CONTACT US</button></a>
            </div>

        </div>
    </div>
</div>
<div id="teste" hidden="">
    does not require visas to US citizens as turists.<br>
    <span style="padding-left: 7px; padding-right: 20px;"> If you are traveling for a different purpose or you are a foreign passport holder, please contact us for more information.</span>  
</div>

insert image description here

  • Izaac improves a little the question is very confusing to understand.

  • I am trying to get the name of the country that is in the combobox that I selected, and add it in a div, type, in the VISA FOR THIS (SELECTED COUNTRY) and the same thing for another div with a simple text (selected parents) + does not need visa, etc etc. the first time I click the button it takes the value and adds normally, but when I click the second time only works in the title

No answers

Browser other questions tagged

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