多个输入框 - alertifyjs / Jquery答案

【问题标题】：Multiple input boxes - alertifyjs / Jquery多个输入框 - alertifyjs / Jquery
【发布时间】：2018-12-15 01:14:13
【问题描述】：

我正在尝试使用具有多个输入框的 alertifyjs 创建一个提示对话框。我设法创建了显示多个框的对话框，但我似乎无法引用用户提供的输入。

我想编写 if 语句，当用户按下 OK 时根据用户输入执行操作。但是，“确定”按钮似乎不起作用，并且 if 语句也不起作用。我不确定我可能做错了什么，有人可以帮助我。

下面是我的代码：

<!DOCTYPE html>
<html>
<head>
     <link rel="stylesheet" href="//cdn.jsdelivr.net/npm/alertifyjs@1.11.1/build/css/alertify.min.css"/>
    <link rel="stylesheet" href="//cdn.jsdelivr.net/npm/alertifyjs@1.11.1/build/css/themes/bootstrap.min.css"/>
    <script src="//cdn.jsdelivr.net/npm/alertifyjs@1.11.1/build/alertify.min.js"></script>


</head>

<body> 

<div style="display:none;" >
    <div id="dlgContent">
        <p> Enter Value One </p>
        <input class="ajs-input" id="inpOne" type="text" value="Input One Default Value"/> 

        <p> Enter Value Two </p>
        <input class="ajs-input" id="inpTwo" type="text" value="Input two default Value"/> 

    </div>
</div>

<!-- the script  -->

<script>
  var dlgContentHTML = $('#dlgContent').html();

$('#dlgContent').html(""); 
alertify.confirm(dlgContentHTML).set('onok', function(closeevent, value) { 
                    var inpOneVal = $('#inpOne').val();
                    var inpTwoVal = $('#inpTwo').val();
                    updateListItems(inpOneVal,inpTwoVal);   
                  if (inpOneVal == "test" && inpTwoVal == "test") {
                      alertify.success('Successful');
                   } else {
                      alertify.error('Wrong')

                    }
                }).set('title',"Update");
 </script>

</body>   
</html>

JSfiddle 链接：http://jsfiddle.net/1qouxdkc/4/

【问题讨论】：

标签： javascript jquery html dialog confirmation

【解决方案1】：

在你的脚本中你调用了一个名为updateListItems(inpOneVal,inpTwoVal);的函数

由于该函数未在任何地方声明，因此会出错，因此暂时将其注释掉，它可以工作。

堆栈sn-p

<html>

<head>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/alertifyjs@1.11.1/build/css/alertify.min.css" />
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/alertifyjs@1.11.1/build/css/themes/bootstrap.min.css" />
  <script src="https://cdn.jsdelivr.net/npm/alertifyjs@1.11.1/build/alertify.min.js"></script>

</head>

<body>

  <div style="display:none;">
    <div id="dlgContent">
      <p> Enter Value One </p>
      <input class="ajs-input" id="inpOne" type="text" value="Input One Default Value" />

      <p> Enter Value Two </p>
      <input class="ajs-input" id="inpTwo" type="text" value="Input two default Value" />

    </div>
  </div>

  <!-- the script  -->

  <script>
    var dlgContentHTML = $('#dlgContent').html();

    $('#dlgContent').html("");
    alertify.confirm(dlgContentHTML).set('onok', function(closeevent, value) {
      var inpOneVal = $('#inpOne').val();
      var inpTwoVal = $('#inpTwo').val();
      //updateListItems(inpOneVal,inpTwoVal);	

      if (inpOneVal == "test" && inpTwoVal == "test") {
        alertify.success('Successful');
      } else {
        alertify.error('Wrong')

      }
    }).set('title', "Update");
  </script>

</body>

</html>

【讨论】：

@Jackie 很高兴:)
我还有一个问题，我认为这可能有点牵强，因为我无法提供太多代码，因为我不确定如何尝试。请你看看，看看你是否可以帮助stackoverflow.com/questions/51232563/…
@Jackie 稍后会，需要离开这里一段时间...检查时通知您
太好了，谢谢 - 我会指望你的。感谢您迄今为止的所有帮助:)
@Jackie 你的这个问题超出了 SO 应该解决的范围，并且需要做更多的工作来回答，编写所有代码。我看到你有人开始帮忙了。尽可能让它们保持温暖 :) .. 然后，如果这不能帮助您解决问题，请尝试将其分解为更小的问题。