How to target inputs of a form opened in fancybox

Question

I am opening a hidden form to a fancybox modal from an onclick.

The html:

<p class="btn btn-mini btn-success verify_form" id="<? echo $article_id; ?>" style="float:right; margin:4px;"> Verify</p>

<div style="display:none;" class="verify_the_form">
    <form id="article_check">
        <div>Enter Website Address of the Article you Wrote:
        <input type="hidden" id="id" value="" />
        <input type="text" id="article_url" style="width: 35%; margin-left: 10px;" value="" />
        <input type="submit" style="position: absolute; left: -9999px; width: 1px; height: 1px;" tabindex="-1" />
    </form>
</div>   

The jquery:

$(document).ready(function () {
    $(".verify_form").click(function () {
        var theid = $(this).attr('id');
        $('#id').val(theid);
        $.fancybox(
            $('.verify_the_form').html(),
            {
                'fitToView'         : true,
                'autoScale'         : true,
                'autoSize'          : true,
                'closeClick'        : false,
                'openEffect'        : 'elastic',
                'closeEffect'       : 'elastic',
            }
        );
    });

I am then trying to process the form with jquery/ajax:

    $('#article_check').submit(function(event) {
        event.preventDefault();
        var theid = $('#id').val();
        var theurl = $('#article_url').val();
        alert(theurl);
        alert(theid);
        $.ajax({
            'url': '/includes/article_check.php',
            'type': 'get',
            'data': {
                'article_url': theurl,
                'id': theid
            },
            'success': function (data) {
                $('#article_check').append(data);
                return;
            }, 
            'error': function (request, status, error) {
                return;
            }
        });
    });
});

The problem seems to be that, the way fancybox works, it actually redraws the form on the page.... making for 2 forms with matching id's, and as no element should have id more than once, jquery is confused between which form to use, and is defaulting to values in the hidden form.

To put this more simply, variable theurl is always returned as empty.

I am seeking a means of grabbing $('#article_url').val() from the form the user submits.

An example url of the problem

http://new.adsactlyhits.com/ae/example.html

Answer 1

I love when I find my own answers, but hate that I potentially waste peoples time.

My solution was rather basic I had to use (this).find() to specifically call the values from the form being submit.

var theid = $(this).find('#id').val();
var theurl = $(this).find('#article_url').val();