如何使用jQuery empty()方法在模态中更改消息

Question

我创建了一个表格，要求用户填写几个字段(名称，姓氏，电子邮件，电话号码和评论(。

i具有函数 validateForm *，否则语句：如果正确填充所有字段，它将激活显示"消息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((的值。但这没有完成工作，也就是说，它不会执行所需的任务，也没有显示任何消息。

我想知道我是否写了与模态相关的ID？我的html代码是以下(我复制/粘贴了与两种模式相关的snippit(：

<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相关联，它与之相关(？

• • • • • [s o l v e d] ------------>

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

正确的片段如下：

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(或其他条件为true。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>