Question

I am playing with the modal forms available with jQueryTools. I want to use the modal forms on one of my pages, using the example provided here: http://flowplayer.org/tools/demos/overlay/modal-dialog.htm

I need to modify the example given above for the following reasons:

1. My web page will have a dynamic number of forms on the page (the example uses a hard coded number of 2), and therefore is able to index into the array of triggers, using a hard coded index – I need to determine which trigger to close, based on the currently displayed form.

2. I need to submit the form and obtain a JSON response from the server, and then use the response to update an element in the page.

This is what I have so far (based on the example). I have left out the CSS etc and the < head > section etc, for the sake of brevity. For my example, I have 3 buttons/forms, but these will be generated dynamically, so I need to find a generic way of determining which index to use to close the trigger:

<!-- the triggers -->
<p>
    <button class="modalInput" rel="#prompt1">User input1</button>
    <button class="modalInput" rel="#prompt2">User input2</button>
    <button class="modalInput" rel="#prompt3">User input3</button>
</p>


<div style="position: fixed; z-index: auto; top: 50.7px; left: 320px; display: none;" class="modal" id="prompt1">
    <div>This is form 1</div>
    <form>
        <input>
        <button type="submit"> OK </button>
        <button type="button" class="close"> Cancel </button>
    </form>
</div>

<div style="position: fixed; z-index: auto; top: 50.7px; left: 320px; display: none;" class="modal" id="prompt2">
    <div>This is form 2</div>
    <form>
        <input>
        <button type="submit"> OK </button>
        <button type="button" class="close"> Cancel </button>
    </form>
</div>

<div style="position: fixed; z-index: auto; top: 50.7px; left: 320px; display: none;" class="modal" id="prompt3">
    <div>This is form 3</div>
    <form>
        <input>
        <button type="submit"> OK </button>
        <button type="button" class="close"> Cancel </button>
    </form>
</div>    
<script>
$(document).ready(function() {

var triggers = $(".modalInput").overlay({

    // some mask tweaks suitable for modal dialogs
    mask: {
        color: '#ebecff',
        loadSpeed: 200,
        opacity: 0.9
    },

    closeOnClick: false
});

$("form").submit(function(e) {

    // close the overlay
    /* I need to determine the correct trigger index for the current form - but how ? */
    triggers.eq(UNKNOWN).overlay().close(); 

        //This is how I think to POST the form and receive JSON response (is this right?)
        $.post("test.php", $(this).serialize(),
                function(data){
                    alert(data);
                }, 'json'
              );
    // do not submit the form
    return e.preventDefault();
});

});
</script>

Answer 1

Use the jquery index(element) method..

 triggers.eq( $('form').index(this) ).overlay().close(); 

this assumes that there is the same number of triggers and forms ..

— about the form submit

Your code is just fine except for minor hiccups
serialize() is just fine, but you need to have names to your input boxes or they get ignored..
(also you need to return false from the submit function)

so

$("form").submit(function(e) {

    // close the overlay
    /* I need to determine the correct trigger index for the current form - but how ? */
    triggers.eq( $('form').index(this) ).overlay().close();  

    //This is how I think to POST the form and receive JSON response (is this right?)
    $.post("test.php", $(this).serialize(),
            function(data){
                alert(data);
            }, 'json'
          );
    // do not submit the form
    return false;
});