Bootstrap 4输入外部值

Question

I'm trying to build a form using bootstrap 4 but as far as I'm trying to, I never succeed in setting the value in input text client side for modal form , it never works...

The form is:

 $('#contact-modal').on('show.bs.modal', function() { alert("prima"); $("#name").attr({ "value": 'ëtestí' }); }) 

 <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous"> <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script> <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#contact-modal"> modal </button> <div id="contact-modal" class="modal fade" role="dialog"> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-header"> <a class="close" data-dismiss="modal">◊</a> <h3>Contact Form</h3> </div> <form id="contactForm" name="contact" role="form"> <div class="modal-body"> <div class="form-group"> <label for="name">Name</label> <input type="text" name="name" class="form-control"> </div> <div class="form-group"> <label for="email">Email</label> <input type="email" name="email" class="form-control"> </div> <div class="form-group"> <label for="message">Message</label> <textarea name="message" class="form-control"></textarea> </div> </div> <div class="modal-footer"> <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> <input type="submit" class="btn btn-success" id="submit"> </div> </form> </div> </div> </div> 

The function that never works is:

  $('#contact-modal').on('show.bs.modal', function() {
    alert("prima");
    $("#name").attr({
      "value": ëtestí
    });
  })

I can really use any help, thanks!

Answer 1

Try like that

<script>
$('#contact-modal').on('show.bs.modal', function() {
    alert("prima");
    $("#name").val("etesti")
})
</script>

Answer 2

The gist is that .attr(...) is only getting the objects value at the start (when the html is created). val() is getting the object's property value which can change many times.

Try this:

<script>
$('#contact-modal').on('show.bs.modal', function() {
    alert("prima");
    $("#name").val("etesti")
})
</script>

Answer 3

You should target the input by name:

<script>
    $('#contact-modal').on('show.bs.modal', function() {
        alert("prima");
        $("input[name='name']").val("ëtestí");
    })
</script>

Answer 4

Your issues:

• The attr method uses two parameters ( "key", value ) and not an object ( {key: value} )
• For changing the values of form elements, you should prefer the jQuery's val() method
• The jQuery selector you use ( "#name" ), doesn't exist. You have an input with name attribute but not with id="name" . So either add id="name" to the input element or change the jQuery selector to ( "[name=name] )
• Your value ëtestí isn't a string and a variable with that name does not exist. I recon this is due to some copy and paste errors.
• Your html is slightly of: The for attribute of the label element targets at the id attribute not the name attribute. This raises some accessibility issues. You should either add an appropriate id attribute to the label, or wrap the label around the form element

I've integrated all this in this snippet

 $('#contact-modal').on('show.bs.modal', function() { $("[name=name]").val("ëtestí"); }) 

 <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous"> <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script> <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#contact-modal"> modal </button> <div id="contact-modal" class="modal fade" role="dialog"> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-header"> <a class="close" data-dismiss="modal">◊</a> <h3>Contact Form</h3> </div> <form id="contactForm" name="contact" role="form"> <div class="modal-body"> <div class="form-group"> <label for="contactForm-name">Name</label> <input type="text" id="contactForm-name" name="name" class="form-control"> </div> <div class="form-group"> <label for="contactForm-email">Email</label> <input type="email"id="contactForm-email" name="email" class="form-control"> </div> <div class="form-group"> <label for="contactForm-message">Message</label> <textarea id="contactForm-message" name="message" class="form-control"></textarea> </div> </div> <div class="modal-footer"> <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> <input type="submit" class="btn btn-success" id="submit"> </div> </form> </div> </div> </div> 

Answer 5

in JQuery :

use # for id $('#myid') , <input type="text" id="myid" />

use . for class $('.myclass') , <input type="text" class="myclass" />

if id and class not given , then use other attribute

like for $("[name=myname]") or $("input[name=myname]")

<input type="text" name="myname" />

for $("input[type=text]") <input type="text" />

 $('#contact-modal').on('show.bs.modal', function() { $("input[name=name]").val('ëtestí'); }); 

 <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous"> <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script> <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#contact-modal"> modal </button> <div id="contact-modal" class="modal fade" role="dialog"> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-header"> <a class="close" data-dismiss="modal">◊</a> <h3>Contact Form</h3> </div> <form id="contactForm" name="contact" role="form"> <div class="modal-body"> <div class="form-group"> <label for="name">Name</label> <input type="text" name="name" class="form-control"> </div> <div class="form-group"> <label for="email">Email</label> <input type="email" name="email" class="form-control"> </div> <div class="form-group"> <label for="message">Message</label> <textarea name="message" class="form-control"></textarea> </div> </div> <div class="modal-footer"> <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> <input type="submit" class="btn btn-success" id="submit"> </div> </form> </div> </div> </div>