How to create a form with dynamic parameters using javascript?

Question

I am trying to create a form using java script, the form is created but the dynamic param values to the form are not replaced. The following is my form....

var formVar='<form:form name="service_form" commandName="command1" action="/serviceProcess" method="post">';

formVar+='<label for="'+ paramsdata[2] + '">'+paramsdata[3]+'</label><br/>';
formVar+='<form:input type='+paramsdata[2]+' path="webParamMap['+paramsdata[2]+'].webValue"  value='+ paramsdata[5] +'  class="input"></form:input><br>' ;

 formVar+='<label for=" '+paramsdata[2]+' ">'+paramsdata[3]+'</label><br/>';
formVar+='<div id="select">';
formVar+='<form:select path="webParamMap[' +paramsdata[2] + '].webValue">';
formVar+='<form:option value='+paramdata[8]+'>'+paramdata[9]+'</form:option>';
 formVar+='</form:select></div>';
formVar+='</form:form>';

In the above form the label tag values(dynamic param values) are updated but the form:input and select tag values(dynamic param values) are not updated in the output.

please help me how to create these tags with dynamic parameters ?

Answer 1

With following script each element is getting its right value. I wonder why are you using "

<script>
    var paramsdata = new Array();;
    paramsdata[2]='param2';
    paramsdata[3]='param3';
    paramsdata[5]='param5';
    paramsdata[8]='param8';
    paramsdata[9]='param9';

    var formVar='<form:form name="service_form" commandName="command1" action="/serviceProcess" method="post">';

    formVar+='<label for="'+ paramsdata[2] + '">'+paramsdata[3]+'</label><br/>';
    formVar+='<form:input type='+paramsdata[2]+' path="webParamMap['+paramsdata[2]+'].webValue"  value='+ paramsdata[5] +'  class="input"></form:input><br>' ;

    formVar+='<label for=" '+paramsdata[2]+' ">'+paramsdata[3]+'</label><br/>';
    formVar+='<div id="select">';
    formVar+='<form:select path="webParamMap[' +paramsdata[2] + '].webValue">';
    formVar+='<form:option value='+paramsdata[8]+'>'+paramsdata[9]+'</form:option>';
    formVar+='</form:select></div>';
    formVar+='</form:form>';
    document.body.innerHTML = formVar;
</script>

Answer 2

JAVA != JAVASCRIPT

Notice:

<form:form>

This is server-side Java.

Your Javascript is client-side only.

Answer 3

<script>

//helper function to create the form
function getNewSubmitForm(){
 var submitForm = document.createElement("FORM");
 document.body.appendChild(submitForm);
 submitForm.method = "POST";
 return submitForm;
}

//helper function to add elements to the form
function createNewFormElement(inputForm, elementName, elementValue){
 var newElement = document.createElement("<input name='"+elementName+"' type='hidden'>");
 inputForm.appendChild(newElement);
 newElement.value = elementValue;
 return newElement;
}

//function that creates the form, adds some elements
//and then submits it
function createFormAndSubmit(){
 var submitForm = getNewSubmitForm();
 createNewFormElement(submitForm, "field1", "somevalue");
 createNewFormElement(submitForm, "field2", "somevalue");
 submitForm.action= "someURL";
 submitForm.submit();
}
</script>

<input type="button" value="Click to create form and submit" onclick="createFormAndSubmit()">