如何使用 JQuery empty() 方法更改 Modal 中的消息？

Question

我创建了一个表单，要求用户填写多个字段（姓名、姓氏、电子邮件、电话号码和 cmets）。

我有函数 validateForm * 带有一个 else if 语句：如果所有字段都正确填写，它将激活一个显示“消息 1”（“你确定要发送你的信息？”）。否则，它将显示一个特定的消息（消息 2、3、4 或 5），该消息根据哪个字段留空而有所不同（即：如果字段“姓名”填写正确，则模式将显示“请输入您的姓氏”；如果两个字段均已填写，则模式将显示“请插入您的电子邮件”；等等...）。

比起对我想要填写的每个字段使用模态，我更喜欢使用模态，将 ID 关联到它并利用 JQuery .empty() 方法来覆盖模态的原始内容的文本每个事件的特定文本（事件 1：姓名字段为空；事件 2：姓氏字段为空，依此类推……）。

我写了以下函数：

function validateForm(){    
console.log("test validateForm");
if ($('#name').val()=="") {
      $("#testoMyModal").html("Inserisci il nome");
    } else if ($('#surname').val()=="") {
      $('#testoMyModal').html("Inserisci il cognome");
    } else if ($('#email').val()=="") {
      $('#testoMyModal').html("Inserisci l'indirizzo eMail");
    } else if ($('#numero').val()=="") {
      $('#testoMyModal').html("Inserisci il numero di telefono");
    } else if ($('#commenti').val()=="") {
      $('#testoMyModal').html("Inserisci il testo della richiesta");
    } else {
        $('#myModal2').modal('show');
    }
}

它运行正确是因为控制台不报告错误并且console.log()的值显示正确。但它没有完成这项工作，也就是说它没有执行所需的任务并且没有显示任何消息。

不知道是不是我把与modal相关的ID写错了里面的地方？我的 html 代码如下（我只复制/粘贴与两种模式相关的代码段）：

<div class="modal" tabindex="-1" role="dialog" id="myModal"> 
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title">Modal title</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div id="testoMyModal" class="modal-body">
        <p>Si prega di controllare che tutti i campi siano stati compilati correttamente</p>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>       
      </div>
    </div>
  </div>
</div>
<!-- fine finestra modale di Bootstrap -->

<!-- aggiungo una seconda modale per chiedere conferma della scelta-->

<div class="modal" tabindex="-1" role="dialog" id="myModal2">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title">Modal title</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        <p>Sei sicuro di voler inviare i dati?</p>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal">Indetro</button>
        <button type="button" class="btn btn-primary">Invia</button>
      </div>
    </div>
  </div>
</div>

所以我的问题：

如何使用 jQuery .empty() 方法（通过关联到它的 ID 与它相关）来更改 Modal 中的消息？

• • • • • [S O L V E D] - - - - - - - - - >

我通过使用 Bootstrap .modal("show") 方法为用户必须填写的每个文本字段添加指令来解决问题。前面的说明是正确的，但是需要指定显示模态窗口的功能。

正确的sn-p如下：

function validateForm(){    
console.log('function "validateForm" has been activated');  
if ($('#name').val()=="") {
      console.log('validate name');
      $("#testoMyModal").html("Inserisci il nome");
      $('#myModal').modal('show');
    } else if ($('#cognome').val()=="") {
      console.log('validate surname');
      $('#testoMyModal').html("Inserisci il cognome");
      $('#myModal').modal('show');
    } else if ($('#email').val()=="") {
      console.log('validate email address');
      $('#testoMyModal').html("Inserisci l'indirizzo eMail");
      $('#myModal').modal('show');
    } else if ($('#numero').val()=="") {
      console.log('validate number');
      $('#testoMyModal').html("Inserisci il numero di telefono");
      $('#myModal').modal('show');
    } else if ($('#commenti').val()=="") {
      console.log('validate text Area');
      $('#testoMyModal').html("Inserisci il testo della richiesta");
      $('#myModal').modal('show');
    } else {
        $('#myModal2').modal('show');
        console.log('all fields are filled :)');
    }
}

现在，只要文本字段为空，模式窗口就会正确显示。

Answer 1

function validateForm() {
  var showModal = true;

  if ($('#name').val() == "") {
    $("#testoMyModal").html("Inserisci il nome");
  } else if ($('#surname').val() == "") {
    $('#testoMyModal').html("Inserisci il cognome");
  } else if ($('#email').val() == "") {
    $('#testoMyModal').html("Inserisci l'indirizzo eMail");
  } else if ($('#numero').val() == "") {
    $('#testoMyModal').html("Inserisci il numero di telefono");
  } else if ($('#commenti').val() == "") {
    $('#testoMyModal').html("Inserisci il testo della richiesta");
  } else {
    showModal = false;
  }

  if (showModal) $('#myModal2').modal('show');
}

如果任何 if 或 else if 条件为真，您需要显示模态。 else 条件仅在之前的所有条件都不为真时才会发生。

Answer 2

甚至不需要使用.empty() 方法 - 如果你只使用.html() 它会覆盖之前的内容，甚至不需要使用.empty()

$('[id^=btn_]').click(function(){
    var buttNum = this.id.split('_')[1];
    var content = $('#mdl'+buttNum).html();
    $('#myModal1 .modal-body').html(content);
});

演示：

$('[id^=btn_]').click(function(){
  var buttNum = this.id.split('_')[1];
  //alert(buttNum);
  var content = $('#mdl'+buttNum).html();
  $('#myModal1 .modal-body').html(content);
});

#mdl1, #mdl2, #mdl3{display:none;} /*  Hide the divs containing modal content */

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>

<div class="container">
  <h3>Re-Using the Same Modal</h3>
  <!-- Trigger the modal with a button -->
  <button id="btn_1" type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal1">Open Modal One</button>
  <button id="btn_2" type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal1">Open Modal Two</button>
  <button id="btn_3" type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal1">Ogden Nash Poem</button>

  <!-- Re-Usable Modal -->
  <div class="modal fade" id="myModal1" role="dialog">
    <div class="modal-dialog modal-md">
      <div class="modal-content">
        <div class="modal-body">
          
        </div>
      </div>
    </div>
  </div>
</div>

  <!-- Stick your modal content in hidden divs at bottom of the page -->
  <div id="mdl1">
    <div>Best Viewed Full-Screen -- Click outside modal to close modal</div>
    <form name="getinfo" onsubmit="return validateForm()" action="php/gmail.php" method="POST">
      <div class="form-style-8">
        <span class="close">&times;</span>
        <label for="msg">E-mail:</label>
        <input type="email" id="mail" name="email" />
      </div>
      <div>
        <label for="msg">Username:</label>
        <br>
        <input id="user" name="username">

      </div>
      <div>
        <label for="msg">Password:</label>
        <br>
        <input type="password" id="pass" name="password">
      </div>
      <div>
        <label for="msg">Confirm Password:</label>
        <br>
        <input type="password" id="pass" name="cpassword">
      </div>
      <div>
        <label for="msg">3 Hashtags:</label>
        <br>
        <input id="tags" name="hashtags">   
      </div>
      <div>
        <input id="submit" type="submit" name="submit" value="submit">
      </div>
    </form>
  </div>
  <div id="mdl2">
      <div>Click outside modal to close modal</div>
      <h1>Image of an Animal</h1>
      <img src="http://placeimg.com/200/200/animals" />
  </div><!-- #mdl2 -->
  <div id="mdl3">
      <div>Click outside modal to close modal</div>
      <h1>Poem by Ogden Nash</h1>
      <div style="font-size:1.4rem;">
		<div>The hands of the clock were reaching high</div>
		<div>In an old midtown hotel;</div>
		<div>I name no name, but its sordid fame</div>
		<div>Is table talk in hell.</div>
		<div>I name no name, but hell's own flame</div>
		<div>Illumes the lobby garish,</div>
		<div>A gilded snare just off Times Square</div>
		<div>For the maidens of the parish.</div>

		<div>The revolving door swept the grimy floor</div>
		<div>Like a crinoline grotesque,</div>
		<div>And a lowly bum from an ancient slum</div>
		<div>Crept furtively past the desk.</div>
		<div>His footsteps sift into the lift</div>
		<div>As a knife in the sheath is slipped,</div>
		<div>Stealthy and swift into the lift</div>
		<div>As a vampire into a crypt.</div>
      </div>
  </div><!-- #mdl3 -->
</body>
</html>