Home / Questions / 15992
Accepted
Ricardo A
Asked: 2020-07-06 21:49:15 +0800 CST 2020-07-06 21:49:15 +0800 CST

Why doesn't the content I enter in my modal appear in my h1?

  • 772

What I'm trying to do is have the text I enter in my modal appear in my h1 like this: enter image description here

But instead it appears to me in this other way:

enter image description here

What is the problem? Here is my code: This is HTML

<p>
    <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#nombralo">Nombra esta foto</button>
    <div class="modal fade" tabindex="-1" role="dialog" id="nombralo">
      <div class="modal-dialog" role="document">
        <div class="modal-content">
          <div class="modal-header">
            <h4 class="modal-title">Dale nombre a esta foto</h4>
          </div>
          <div class="modal-body">
            <form>
              <div class="form-group">
                <label for="message-text" class="control-label">Nombra la foto:</label>
                <input type="text" class="form-control" id="message-text">
              </div>
            </form>
          </div>
          <div class="modal-footer">
            <button type="button" class="btn btn-default" data-dismiss="modal">Cerrar</button>
            <button type="button" class="btn btn-primary" id="aceptar">Aceptar</button>
          </div>
        </div>
      </div>
    </div>
    <h1></h1>
</p>

And this is the Javascript:

$(document).ready(function() {
  $("#aceptar").click(function () {
    $("#message-text").appendTo("h1");
  })
});
javascript

2 Answers

  1. Best Answer

    What you are doing in your code is putting the <input>inside the <h1>and that is why it shows you the <input>.

    On the other hand, when you do .appendTo("h1")it will append what you indicate to all the <h1>. If this is not what you want you could use the idof the html element you want to update.

    In the javascript part try to change

    $(document).ready(function() {
  $("#aceptar").click(function () {
    $("#message-text").appendTo("h1");
  })
});

    By

    $(document).ready(function() {
  $("#aceptar").click(function () {
    var txt = $("#message-text").val()
    $("<span>"+txt+"</span>").appendTo("id_dentro_de_h1");
  })
});

    And in the HTML part, change the line from <h1>this:

    <h1></h1>

    to this:

    <h1 id="id_dentro_de_h1"></h1>

    where id_dentro_de_h1should be the identifier you consider for that <h1>concrete.

    • 3

  2. and if you erase him <p>from the beginning and </p>the end?

    • 0