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.