Multiple input boxes - alertifyjs / Jquery

Question

I am trying to create a prompt dialog box using alertifyjs that has multiple input boxes. I have managed to create the dialog box to show the multiple boxes but I cant seem to make a reference to the inputs that user provides.

I want to write if statement that carries out action based on user input when they press OK. However, the OK button doesnt seem to be working and also the if-statements don't work as well. I am not sure what I might be doing wrong, can someone please help me.

Below is my code:

<!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>

Link to JSfiddle: http://jsfiddle.net/1qouxdkc/4/

score 4 · Accepted Answer · answered Jul 08 '18 at 12:58

4

In your script you call a function named updateListItems(inpOneVal,inpTwoVal);

As that function is not declared anywhere, it errors, so with that temporarily commented out, it works.

Stack snippet

<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>

answered Jul 08 '18 at 12:58

Asons

84,923
12
110
165

@Jackie Great to be :) – Asons Jul 08 '18 at 13:15
I have another question, I think it might be a bit far fetched because I wasn't able to provide much code as I am not sure how to attempt it. Please could you have a look and see if you can help https://stackoverflow.com/questions/51232563/text-area-with-upload-attachments-options-html-jquery – Jackie Jul 08 '18 at 13:41
@Jackie Will a little bit later, need to leave here for a while...let you know when checked – Asons Jul 08 '18 at 13:49
Great, thanks - I will be counting on you. Thanks for all the help so far :) – Jackie Jul 08 '18 at 13:50
@Jackie That question of yours is beyond the scope of what's supposed to here at SO, and would take a lot more work to answer, writing up all that code. I see you got someone start helping out. Keep them warm as long as you can :) .. and then, if that won't help you solve it, try break it down to smaller questions. – Asons Jul 08 '18 at 18:06
Thanks, will do that. Could you please check if the code provided the author who have answered work for you. As I can't seem to get it working for me - I think having that working would be a good starting point for me to build upon. – Jackie Jul 08 '18 at 18:12
@Jackie Already did, though don't know about that Dropzone library so can't help with that. Here is one answer, that were linked to from the other link you got in your first comment. It looks a lot more easy to read and understand: https://stackoverflow.com/questions/4722500/html5s-file-api-example-with-jquery – Asons Jul 08 '18 at 18:22
@Jackie Good to know your issue got solved, was on a vacation hence missed your query on my thread. I will be updating my answer to remove the function. – Godwin Aug 02 '18 at 15:10

Multiple input boxes - alertifyjs / Jquery

1 Answers1

Linked