Bootstrap 4 input ext value

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!

please attach both html and script in one snippet code for better check and understanding — Sandeep K., Mar 12 '19 at 09:13

score 0 · Answer 1 · answered Mar 12 '19 at 09:10

0

Try like that

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

answered Mar 12 '19 at 09:10

Antoine553

126
1
1
10

score 0 · Answer 2 · answered Mar 12 '19 at 09:16

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>

score 0 · Accepted Answer · answered Mar 12 '19 at 09:18

0

You should target the input by name:

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

answered Mar 12 '19 at 09:18

Davide Casiraghi

15,591
9
34
56

Grazie mille! Ora ho un ultimo dubbio: mi chiedevo se fosse possibile impostare un valore massimo di cifre che possono essere digitate in un campo del form – L.BB Mar 12 '19 at 11:00
Via JavaScript trovi una soluzione qui: https://stackoverflow.com/questions/8354975/how-can-i-limit-possible-inputs-in-a-html5-number-element – Davide Casiraghi Mar 12 '19 at 11:09

yunzen · Answer 4 · 2019-03-12T09:37:29.710

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>

score 0 · Answer 5 · answered Mar 12 '19 at 09:58

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>

Bootstrap 4 input ext value

5 Answers5