动态生成Javascript提交按钮

Question

First of all, please let me know if I need to phrase this better to make more sense, and thanks for reading.

I am currently working on a webpage that creates a large number of form elements where the id, name and value of each form element depends on some previous user selection, as in the following example, where the id, name and value depend on whatever value $arr contains at the time,

?>
<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

That part is largely fine, but then there is a number of submit buttons that are similarly generated dynamically, but are hard-coded. The jQuery for these input buttons is hard-coded, as in the following example,

<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/>

Being that there are a dozen or so of these submit buttons, each hard-coded, and most at least twice the size of this one here, it gets pretty complicated pretty fast. I would like to take some sort of object-oriented approach to make this thing maintainable, but need some help figuring out on a high level where to start. Is there a good place to start? Maybe I should generate a submit button as a string in PHP, or there is some jQuery functionality to address this issue?

For completeness, the submit button in the example pasted above sends the values to the following function in a javascript file,

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

But there are a dozen or so of these functions too, like queryAngle shown here, but also queryDensity, queryTorsion, and so on. They all do essentially the same thing - pass the values on to a file, angleFunction.php, densityFunction.php, torsionFunction.php, respectively, and it would be great to have a way to bring some abstraction or object-oriented perspective to this. Thanks for any help or ideas.

Answer 1

In my experience there isn't any super easy and clean way to generate JavaScript with PHP dynamically, you usually end up with ugly code here or there.

That said, to generate forms dynamically seems a job made for a Form Library. I would imagine most frameworks provide something along that lines as it's a pretty common task. You didn't state which Framework you are using, and if you aren't using one my first suggestion would be to get your hands on one.

I have worked with Zend_Form myself and they work quite good, with a little bit of coding you can get yourself the tool you are looking for. For example, Zend_Form used to create a simple autocomplete using Dijit's forms

$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"));

This is not a nested element, but you can get the idea of how they work in general. If you post which framework you are using you can probably get a better answer.

I hope it helps!.