javascript - 动态生成Javascript提交按钮

Question

首先，请告诉我是否需要更好地表达它以使其更有意义，感谢您的阅读。

我目前正在开发一个网页，该网页创建大量表单元素，其中每个表单元素的 id、名称和值取决于以前的用户选择，如以下示例所示，其中 id、名称和值取决于无论 $arr 当时包含什么值，

?>
<div id='<?= $arr['param_name'] ?>Div' class='dynamicDiv'>
    <b><?= $arr['param_desc'] ?></b>
    <br/>
    <input type='Text' id='<?= $arr['param_name'] ?>' 
        name='<?= $arr['param_name'] ?>'
        value='<?= $arr['default_val'] ?>' class='dynamicTextBox'>
</div>
<?php

这部分基本上很好，但是还有许多类似动态生成的提交按钮，但是是硬编码的。这些输入按钮的 jQuery 是硬编码的，如以下示例所示，

<input type='Submit' value=' Query Data' name='funcSearch' 
    onclick="queryAngle(('<?php echo $result[0]['query_id'] ?>'),('<?php echo $_GET['schema'] ?>'),
    ($('#firstFrame').val()), ($('#lastFrame').val()),($('#skip').val()), ($('#atomID1').val()),  
    ($('#atomID2').val()), ($('#atomID3').val())); false;" class='dynamicParamButton'><br/><br/>

由于有十几个这样的提交按钮，每个按钮都是硬编码的，而且大多数按钮的大小至少是这里这个按钮的两倍，所以它很快就会变得非常复杂。我想采用某种面向对象的方法来使这个东西可维护，但需要一些帮助来弄清楚从哪里开始。有一个好的起点吗？也许我应该在 PHP 中生成一个提交按钮作为字符串，或者有一些 jQuery 功能可以解决这个问题？

为了完整起见，上面粘贴示例中的提交按钮将值发送到 JavaScript 文件中的以下函数，

function queryAngle(query_id, schema, firstFrame, lastFrame, frameSkip, atomID1, atomID2, atomID3) {
if (query_id === "") {
    $("#QueryInfo").html("<p>Error Please enter valid arguments</p>");
    return;
}
$("#waiting").show(500);
$("#interface").hide(0);

$.post('./function_files/angleFunction.php',
    {
        query_id: query_id,
        simschema: schema,
        firstFrame: firstFrame,
        lastFrame: lastFrame,
        frameSkip: frameSkip,
        atomID1: atomID1,
        atomID2: atomID2,
        atomID3: atomID3
    },

    function (data) {
        showResultReady(data);
    });
}

但是这些函数也有十几个左右，例如此处显示的 queryAngle，还有 queryDensity、queryTorsion 等。它们本质上都做相同的事情 - 将值分别传递到文件，angleFunction.php，densityFunction.php，torsionFunction.php，如果有一种方法可以为此带来一些抽象或面向对象的视角，那就太好了。感谢您的任何帮助或想法。

Answer 1

根据我的经验，没有任何 super 简单和干净的方法可以用 PHP 动态生成 JavaScript，你通常会在这里或那里得到丑陋的代码。

也就是说，动态生成表单似乎是表单库的工作。我想大多数框架都会提供类似的东西，因为这是一项非常常见的任务。您没有说明您正在使用哪个框架，如果您没有使用一个框架，我的第一个建议是使用一个框架。

我自己曾使用过 Zend_Form，它们工作得非常好，只需一点点编码，您就可以得到您正在寻找的工具。例如，Zend_Form 用于使用 Dijit 的表单创建简单的自动完成

$element = new Zend_Dojo_Form_Element_FilteringSelect($variable);
$element->setStoreId($variable . "_store");
$element->setStoreType("dojox.data.QueryReadStore");
$element->setStoreParams(array("url" => "url/autocomplete-key-value?company=1"));

这不是嵌套元素，但您可以了解它们的一般工作方式。如果您发布您正在使用的框架，您可能会得到更好的答案。

希望对您有帮助!