Question

我的情况是我的php页面根据通过第三方api收到的数据生成多个表单。

我的要求是为这些动态生成的表单元素处理jQuery模式确认，但我不知所措，因为jQuery在我的情况下无法处理这个问题。

我也尝试过JSFiddle但却无法正常工作; here

编辑：脚本没有太大问题，但是小提琴添加了干扰脚本的windo onLoad：

window.onload=function(){
function formSubmit(formId) {
    alert('here');
    var submitForm = $('#form_twake' + formId);
...

模式确认div（＆＃39;确认＆＃39;在表单中）也应该保持隐藏，但我可以看到它也出现在小提琴中。

我知道我遗失了一些非常基本的东西，因为我无法上班，但到目前为止，我完全失去了;我对这个主题的研究通过jQuery或者通过jQuery提交表单来创建id，但我不倾向于走这条路，除非当前的流程不可行。

表单生成得很好，并且常规的html提交会产生所需的结果;但没有模态确认。

任何导致我如何使用通用jQuery实现对生成表单的动态处理？

的jQuery

<script>
function formSubmit(id) {
var submitForm = $('#form_twake'+id);
submit = false;

$('#confirm'+id).dialog({
    resizable: false,
    height: 140,
    modal: true,
    autoOpen: false,
    buttons: {
        'Submit': function() {
            $(this).dialog('close');
            submit = true;
            submitForm.submit();
        },
        'Cancel': function() {
            $(this).dialog('close');
        }
    }
});
//$("#confirm").parent().appendTo($("#form_twake")); 

submitForm.submit(function() {
    if (submit) {
        return true;
    } else {
        $("#confirm"+id).dialog('open');
        return false;
    }
});
};
</script>

生成表单的PHP：

 <html>
    <body>
    <center>
    <div><img src="includes/static/logo.png" alt="Twake"/></div>
    </br>
    <?php
    try {
    $suffix = 0;
    foreach ( $json ['users'] as $bud ) {
        $keys = array_keys ( $bud );
        $suffix = $suffix + 1;
        ?>
    <form id="form_twake<?php echo $suffix?>" name="form_twake<?php echo $suffix?>" method="POST" action="index.php" onsubmit="formSubmit(<?php echo $suffix?>)">
    <div class="box fade-in one">
            <input type="submit" value="Destroy" class="twake-button" />
            <div id="confirm<?php echo $suffix?>" style="display: hidden;" title="Bin user?">
                <p><span class="ui-icon ui-icon-alert" style="float:left; margin:0 7px 20px 0;"></span>Confirm cleanup of the user <?php echo $bud ['name'];?>?</p>
            </div>
        </div>
    </form>

    <?php
    }
    }
    catch (Exception $e) {
    echo 'Please check your connection and try again. ' . $e->getMessage();
    }
    ;
    ?>

    </center>
    </body>
    </html>

Answer 1

保存参数和使用它有点不好，它只是不对。你可以做的是将这个值存储在表单内的属性中。

    submitForm.attr('extraData', false);
    $('#confirm'+id).dialog({
    resizable: false,
    height: 140,
    modal: true,
    autoOpen: false,
    buttons: {
        'Submit': function() {
            $(this).dialog('close');
            submitForm.attr('extraData', true);
            submitForm.submit();
        },
        'Cancel': function() {
            $(this).dialog('close');
        }
    }
});
submitForm.submit(function() {
var submit = $('#submitForm').attr('extraData');
if (submit) {
    return true;
} else {
    $("#confirm"+id).dialog('open');
    return false;
}

}）;

或只需编写一个函数来执行此操作。区分表单提交上的函数就像调用普通函数一样，但不将它与表单的特定事件联系起来。例如：

$('#confirm'+id).dialog({ resizable: false, height: 140, modal: true, autoOpen: false, buttons: { 'Submit': function() { $(this).dialog('close'); DoWork(true); }, 'Cancel': function() { $(this).dialog('close'); } } }); function DoWork (isSubmit) { if (!isSubmit) $("#confirm"+id).dialog('open'); }

Answer 2

我对它进行了一些修改，在此处发布，因为它对其他人也有帮助。

我将jQuery修改为包含在javascript函数中，我有更多控件
我将提交更改为普通按钮元素，以根据onclick和模态确认事件触发提交（在表单上删除onsubmit）

以下是修改后的代码：

<强>的JavaScript

    <script>

    var submitForm = null;
    var id = 0;
    var submit = false;

    function formSubmit(formId) {
    id = formId;
    submitForm = $('#form_twake'+id)
    alert(id);
    $('#confirm'+id).dialog({
        resizable: false,
        height: 140,
        modal: true,
        autoOpen: false,
        buttons: {
            'Submit': function() {
                $(this).dialog('close');
                submit = true;
                submitForm.submit();
            },
            'Cancel': function() {
                $(this).dialog('close');
            }
        }
    });
    //$("#confirm").parent().appendTo($("#form_twake")); 
    twakeSubmit(submit);
    }

    function twakeSubmit(isSubmit) {
        if (isSubmit) {
            return true;
        } else {
            $("#confirm"+id).dialog('open');
            return false;
        }
    }

</script>

HTML / PHP代码

<html>
    <body>
    <center>
    <div><img src="includes/static/logo.png" alt="Twake"/></div>
    </br>
    <?php
    try {
    $suffix = 0;
    foreach ( $json ['users'] as $bud ) {
        $keys = array_keys ( $bud );
        $suffix = $suffix + 1;
        ?>
    <form id="form_twake<?php echo $suffix?>" name="form_twake<?php echo $suffix?>" method="POST" action="index.php">
    <div class="box fade-in one">
            <input type="button" value="Destroy" class="twake-button" onclick="formSubmit(<?php echo $suffix?>)"/>
            <div id="confirm<?php echo $suffix?>" style="display: hidden;" title="Bin user?">
                <p><span class="ui-icon ui-icon-alert" style="float:left; margin:0 7px 20px 0;"></span>Confirm cleanup of the user <?php echo $bud ['name'];?>?</p>
            </div>
        </div>
    </form>

    <?php
    }
    }
    catch (Exception $e) {
    echo 'Please check your connection and try again. ' . $e->getMessage();
    }
    ;
    ?>

    </center>
    </body>
    </html>

通过jQuery处理带有动态HTML元素ID的多个表单

2 个答案: