how to create forms dynamically in javascript

Question

I have this div, where divBrdr should contain a form summaryConfig

 <div id="popup">
<div id="popupClose">
    <input type="image" alt="close window" src="images/close_btn.gif" width="20" height="20" onclick="" align="right">
</div>
<div id="divBrdr" >

</div>
</div>
<div id="backgroundPopup">
</div>

Right now i have this form inside divBrdr but then this popup appears differently for create and update so I wanted to make this form made dynamically. Can somebody help me do that?

<form style="padding-bottom:11px;" name="summaryConfig" method="post" action="">
<img alt="title" src="images/update_conform_title.gif" width="189" hspace="4" height="17" vspace="4"><br>
&nbsp;<br>

<table align="center" width="90%" border="0" cellspacing="0" cellpadding="0">
    <tr>    <td width="800"></td>  </tr>
</table>

<div id="postUploadInfo">
</div>

<table align="center" border="0" cellpadding="10" cellspacing="0" width="84%">
    <tr>
        <td colspan="3" align="center">
            <label>
                <input  type="button"  tabindex="4" id="btnOk" value="Done" class="btn" onClick="">
            </label>
        </td>
    </tr>
</table>
</form>

you want to add this form on body load or on some event handler? — Vivek
– Vivek, Commented Jun 10, 2011 at 8:17
@Vivek: on any event handler, say i have a button after popup div — AabinGunz
– AabinGunz, Commented Jun 10, 2011 at 8:19

Vivek · Accepted Answer · 2011-06-10 08:38:34Z

1

if you want to add this form dynamically then you can hold your form in a variable and append that variable to divBrdr div on button click.

 VariableHoldingForm = "<form style='padding-bottom:11px;' name='summaryConfig' method='post' action=''> ";
   VariableHoldingForm +="<img alt='title' src='images/update_conform_title.gif' width='189' hspace='4' height='17' vspace='4'><br> &nbsp;<br> ... and till...</form>'
    $('#buttonId').click(function(){
        $('#divBrdr').append(VariableHoldingForm);
    });

even you can use document.createElement() to create any html tag

 **EDIT**

to unAppend remove html of your div like this..

$('#divBrdr').html('');

and then again add new form element variable on update button

$('#updateButton).click(function(){
            $('#divBrdr').append(newForm);
        });

edited Jun 10, 2011 at 8:38

answered Jun 10, 2011 at 8:21

Vivek

11k15 gold badges50 silver badges68 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

AabinGunz Over a year ago

how can i hold that from in some variable? Also how will i add styling to the form this way

Vivek Over a year ago

you need to escape double quotes:)

AabinGunz Over a year ago

@Vivek: Assuming this appending happens on create button click, what if i want to append some other form contents on update button click, then how to unappend and re append another variable containing form?

Vivek Over a year ago

to unappend you can simply remove html of your div like this.. $('#divBrdr').html('');

Vivek Over a year ago

and click right click beside my answer if i answered your question

Collectives™ on Stack Overflow

how to create forms dynamically in javascript

1 Answer 1

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related