如何定位在fancybox中打开的表单的输入答案

【问题标题】：How to target inputs of a form opened in fancybox如何定位在fancybox中打开的表单的输入
【发布时间】：2016-10-27 03:41:04
【问题描述】：

我正在通过点击打开一个隐藏的表单到一个幻想框模式。

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>

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',
            }
        );
    });

然后我尝试使用 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;
            }
        });
    });
});

问题似乎是，fancybox 的工作方式，它实际上重绘了页面上的表单.... 生成 2 个具有匹配 id 的表单，并且由于没有元素应该有多个 id，jquery 在使用哪种形式，并且默认为隐藏形式中的值。

更简单地说，变量 theurl 总是返回为空。

我正在寻找一种从用户提交的表单中获取 $('#article_url').val() 的方法。

问题的示例 url

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

【问题讨论】：

标签： javascript jquery ajax forms

【解决方案1】：

我喜欢自己找到答案，但讨厌我可能会浪费人们的时间。

我的解决方案相当基本，我不得不使用 (this).find() 来专门调用正在提交的表单中的值。

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

【讨论】：