reusing modal input box

Question

I have a modal that i can submit data to, however, i need to be able to do it multiple times.

The problem i am facing is that with my current code i am only able to submit it once and then from there it will give me back my first submitted data rather than allowing me to reuse the modal dialog box.

can someone point me in the right direction as to how i can reuse/clear the data in the modal using the sample page below?

sample page here: http://70.92.161.220/modal/

Answer 1

Store the html in a variable then after closing the fancy box place it inside <div id="inline"> .

$(document).ready(function() {
    $(".modalbox").fancybox({'closeBtn' : false });
    $("#newinput").submit(function() { return false; });
    $inline = $('#inline').html(); //Store the html

    $(document).on("click", "#submit", function(e){ //Make the event with document
        e.preventDefault();
        var msgval    = $("#msg").val();
        var msglen    = msgval.length;

        if( msglen < 1) {
            $("#msg").addClass("error");
        }
        else if( msglen > 0){
        $("#msg").removeClass("error");
        $("#newinput").fadeOut("fast", function(){
        $(this).before("<p><strong>Input = " + msgval + "</strong></p>");
        setTimeout(function(){
            $.fancybox.close();
            $("#inline").html($inline); //Place the html
            }, 1000);
        });
    }
        console.log($("#msg").val());
    });
});

 $(document).ready(function() { $(".modalbox").fancybox({'closeBtn' : false }); $("#newinput").submit(function() { return false; }); $inline = $('#inline').html(); $(document).on("click", "#submit", function(){ var msgval = $("#msg").val(); var msglen = msgval.length; if( msglen < 1) { $("#msg").addClass("error"); } else if( msglen > 0){ $("#msg").removeClass("error"); $("#newinput").fadeOut("fast", function(){ $(this).before("<p><strong>Input = " + msgval + "</strong></p>"); setTimeout(function(){ $.fancybox.close(); $("#inline").html($inline); }, 1000); }); } console.log($("#msg").val()); }); }); 

 <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" type="text/css" /> <link href="https://cdnjs.cloudflare.com/ajax/libs/fancybox/2.1.5/jquery.fancybox.min.css" rel="stylesheet" type="text/css" /> * { margin: 0; padding: 0; outline: none; } html { font-size: 62.5%; height: 101%; } body { background: #fff; font-family: "Calibri", Arial, sans-serif; } img { border: 0; } a { color: #3a51b2; text-decoration: none; } a:hover { text-decoration: underline; } h2 { font-size: 1.8em; line-height: 1.9em; margin-bottom: 15px; } p { color: #656565; font-size: 1.2em; margin-bottom: 10px; } #wrapper { width: 640px; margin: 0 auto; padding: 30px 45px; } #inline { display: none; } label { margin-right: 12px; margin-bottom: 9px; font-family: Georgia, serif; color: #646464; font-size: 1.2em; } .txt { display: inline-block; color: #676767; width: 420px; font-family: Arial, Tahoma, sans-serif; margin-bottom: 10px; border: 1px dotted #ccc; padding: 5px 9px; font-size: 1.2em; line-height: 1.4em; } .txtarea { display: block; resize: none; color: #676767; font-family: Arial, Tahoma, sans-serif; margin-bottom: 10px; border: 1px dotted #ccc; padding: 5px 9px; font-size: 1.2em; line-height: 1.4em; } .txt:focus, .txtarea:focus { border-style: solid; border-color: #bababa; color: #444; } input.error, textarea.error { border-color: #973d3d; border-style: solid; background: #f0bebe; color: #a35959; } input.error:focus, textarea.error:focus { border-color: #973d3d; color: #a35959; } #send { color: #dee5f0; display: block; cursor: pointer; padding: 5px 11px; font-size: 1.2em; border: solid 1px #224983; border-radius: 5px; background: #1e4c99; background: -webkit-gradient(linear, left top, left bottom, from(#2f52b7), to(#0e3a7d)); background: -moz-linear-gradient(top, #2f52b7, #0e3a7d); background: -webkit-linear-gradient(top, #2f52b7, #0e3a7d); background: -o-linear-gradient(top, #2f52b7, #0e3a7d); background: -ms-linear-gradient(top, #2f52b7, #0e3a7d); background: linear-gradient(top, #2f52b7, #0e3a7d); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#2f52b7', endColorstr='#0e3a7d'); } #send:hover { background: #183d80; background: -webkit-gradient(linear, left top, left bottom, from(#284f9d), to(#0c2b6b)); background: -moz-linear-gradient(top, #284f9d, #0c2b6b); background: -webkit-linear-gradient(top, #284f9d, #0c2b6b); background: -o-linear-gradient(top, #284f9d, #0c2b6b); background: -ms-linear-gradient(top, #284f9d, #0c2b6b); background: linear-gradient(top, #284f9d, #0c2b6b); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#284f9d', endColorstr='#0c2b6b'); } #send:active { color: #8c9dc0; background: -webkit-gradient(linear, left top, left bottom, from(#0e387d), to(#2f55b7)); background: -moz-linear-gradient(top, #0e387d, #2f55b7); background: -webkit-linear-gradient(top, #0e387d, #2f55b7); background: -o-linear-gradient(top, #0e387d, #2f55b7); background: -ms-linear-gradient(top, #0e387d, #2f55b7); background: linear-gradient(top, #0e387d, #2f55b7); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#0e387d', endColorstr='#2f55b7'); } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/fancybox/2.1.5/jquery.fancybox.min.js"> </script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script> <div id="wrapper"> <p>Send us feedback from the modal window.</p> <p><a class="modalbox" href="#inline">click to open</a></p> </div> <!-- hidden inline form --> <div id="inline"> <h2>New Input</h2> <form id="newinput" name="damage" action="#" method="post"> <input type="text" id="msg" name="msg" class="txtarea"> <button id="submit">OK</button> </form> </div>