Modal form data scrapper/submitter

[Q695]

Issues I'm having:

scrapping the data on close

automatically closing modal on submission

 

The source libraries:

<script src='//code.jquery.com/jquery-latest.min.js'></script>

<script src='//code.jquery.com/jquery-migrate-1.2.1.min.js'></script>

<script type='text/javascript' src='../other/scripts.js'></script>

 

     <script src='//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js'></script>

     <link href='//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css' rel='stylesheet'>

 

 

The code:

    <script type='text/javascript'>
$(function () {
     $('#btn1$i').click(function () {
        alert('open');
     });

    $('#save$i').click(function () {
        alert('submit');

        var form = $('#myForm$i').get(0),
            fd = new FormData(form),
            xhr = new XMLHttpRequest();

        xhr.open('POST', '$post_to', true);

        xhr.onload = function () {
            console.log(xhr.responseText);
            $('#myModal$i').modal('hide');
            alert('success');
        };

        xhr.send(fd);
    });
});
</script>

possibly useful:

I'm plugging $variable_name in with while loops.

[Q695]

Here is the whole code, which some stuff seems to break on when I move it from my testdev page:

    <script type='text/javascript'>
        $(function () {
            $('#btn1$i').click(function () {
                alert('open');
            });


            $('#save$i').click(function () {
                alert('submit');


                var form = $('#myForm').get(0),
                fd = new FormData(form),
                xhr = new XMLHttpRequest();


            xhr.open('POST', '/submit.php', true);


            xhr.onload = function () {
                console.log(xhr.responseText);
                $('#myModal$i').modal('hide');
            };


            xhr.send(fd);
        });
        });
</script>


    <!-- Button trigger modal -->
    <br>
    <button type='button' class='btn btn-primary btn-lg' data-toggle='modal' data-target='#myModal$i' id='btn1$i'>
        Launch demo modal
    </button>


    <!-- Modal -->
    <div class='modal fade' id='myModal$i' tabindex='-1' role='dialog' aria-labelledby='myModalLabel' aria-hidden='true'>
        <div class='modal-dialog'>
            <div class='modal-content'>
                <div class='modal-header'>
                    <button type='button' class='close' data-dismiss='modal' aria-label='Close'><span aria-hidden='true'>×</span></button>
                    <h4 class='modal-title' id='myModalLabel'>Modal title</h4>
                </div>
                <div class='modal-body'>
                    <form id='myForm'>
                        <input name='user' type='text' value='Bob' />
                        <input name='percent' type='range' min='0' max='100' value='50' />
                    </form>
                </div>
                <div class='modal-footer'>
                    <button type='button' class='btn btn-default' data-dismiss='modal'>Close</button>
                    <button type='button' class='btn btn-primary' id='save$i'>Save changes</button>


                </div>
            </div>
        </div>
    </div>

 

[CroNiX]

Why aren't you using jQuery's $.ajax() for your ajax calls since you're already using jQuery?

[Q695]

I'll have to try figuring it out first.