JSFiddle - React, Tailwind, and code Playground

by Daniel DeGroff

HTML

<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<script src="http://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>

<div id="dialog">
  <input type="hidden" name="fred">
  <input type="text" name="fred">
</div>
   
<div>
    <p>Before dialog open: These should all be 1.</p>
    <span>Text: </span><span id="result1"></span>
    <br>
    <span>Hidden: </span><span id="result2"></span>
        
    <p>After dialog open: These should all be 1.</p>
    <span>Text: </span><span id="result3"></span>
    <br>
    <span>Hidden: </span><span id="result4"></span>        
</div>

JavaScript

$("#dialog").dialog({autoOpen: false});
$("#dialog").bind("dialogOpened", function() {
    calculate(3, 4);
});

var calculate = function(x, y) {
    var length1 = $("body").find('input:text[name=fred]').length,
        length1_1 = $("body").find('input[type=text][name=fred]').length,
        length2 = $("body").find('input:hidden[name=fred]').length,
        length2_1 = $("body").find('input[type=hidden][name=fred]').length;

    $("#result" + x).html(length1 + ", " + length1_1);
    $("#result" + y).html(length2 + ", " + length2_1);
};

calculate(1, 2);

$("#dialog").dialog("open");
$("#dialog").trigger("dialogOpened");