singlehouse03
Programmer
My idea:
Innerhtml creates one dropdown menu.If "other" is selected, new blank textfield will show on page.
I am lost here.Maybe something wrong with my syntax.How to call javascript function within innerhtml?
Thanks!
<script>
function AddRow ()
{
var o_txt0 = document.createElement("td");
o_txt0.innerHTML="<label>Name:<input type='text' name='name2[]'></label>";
var o_txt1 = document.createElement("td");
var htmlString = 'Position: ';
htmlString += '<select name="position2[]" class="tabelinvultekst"\n';
htmlString += ' onChange="showother2(this, other)">\n';
htmlString += ' <option value="president" checked>president<\/option>\n';
htmlString += ' <option value="vice president">vice president<\/option>\n';
htmlString += ' <option value="secretary">secretary<\/option>\n';
htmlString += ' <option value="other">other<\/option>\n';
htmlString += '<\/select>\n';
htmlString += '<label>\n';
htmlString += ' <input type="text" name="other" class="tabelinvultekst" style="visibility:hidden">\n';
htmlString += '<\/label>\n';
o_txt1.innerHTML = htmlString;
var o_txt2 = document.createElement("td");
o_txt2.innerHTML="<label>City:<input type='text' name='city2[]'></label>";
var o_txt3 = document.createElement("td");
o_txt3.innerHTML="<label>state:<input type='text' name='state2[]'></label>";
var o_txt4= document.createElement("td");
o_txt4.innerHTML="<label>Zip:<input type='text' name='zip2[]'></label>";
var o_button = document.createElement ("input");
o_button.type = "button";
o_button.value = "Remove";
o_button.onclick = RemoveRow;
var o_td0 = document.createElement ("td");
var o_td1 = document.createElement ("td");
var o_td2 = document.createElement ("td");
var o_td3 = document.createElement ("td");
var o_td4 = document.createElement ("td");
var o_td5 = document.createElement ("td");
var o_tr = document.createElement ("tr");
var o_body = document.getElementById ("dynamic_table_body");
var o_tr2 = document.createElement ("tr");
var o_tr3 = document.createElement ("tr");
var o_tr4 = document.createElement ("tr");
var o_tr5 = document.createElement ("tr");
var o_tr6 = document.createElement ("tr");
var o_tr7 = document.createElement ("tr");
o_td0.appendChild (o_txt0);
o_td1.appendChild (o_txt1);
o_td2.appendChild (o_txt2);
o_td3.appendChild (o_txt3);
o_td4.appendChild (o_txt4);
o_td5.appendChild(o_button);
o_tr.appendChild (o_td0);
o_tr2.appendChild (o_td1);
o_tr3.appendChild (o_td2);
o_tr4.appendChild (o_td3);
o_tr5.appendChild (o_td4);
o_tr6.appendChild (o_td5);
var tb = document.createElement ("div");
tb.appendChild(o_tr);
tb.appendChild(o_tr2);
tb.appendChild(o_tr3);
tb.appendChild(o_tr4);
tb.appendChild(o_tr5);
tb.appendChild(o_tr6);
o_body.appendChild(tb);
}
</script>
<html>
<table>
<tbody id="dynamic_table_body">
<tr>
<td><label>Name:<input type="text" name="bname" id="bname" /></label></td>
<td colspan="2"> </td>
</tr>
<tr>
<td>Position:<select name="bposition" id="bposition" class="tabelinvultekst" onChange="showother2( this, other)">
<option value="president" selected>president</option>
<option value="vice president">vice president</option>
<option value="secretary">secretary</option>
<option value="other">other</option>
</select>
</td>
<td width="112"><label><input type="text" name="other" class="tabelinvultekst" style="visibility:hidden"></label> </td>
<tr>
<td><label>City:<input type="text" name="bcity" id="bcity" /></label></td>
</tr>
<tr>
<td><label>State:<input type="text" name="bstate" id="bstate" /></label></td>
</tr>
<tr>
<td><label>Zip:<input type="text" name="bzip" id="bzip" /></label></td>
</tr>
<tr>
<td colspan="3"><button type="button" onClick="AddRow ();">Add </button></td>
</tr>
</tbody>
</table>
</html>
Innerhtml creates one dropdown menu.If "other" is selected, new blank textfield will show on page.
I am lost here.Maybe something wrong with my syntax.How to call javascript function within innerhtml?
Thanks!
<script>
function AddRow ()
{
var o_txt0 = document.createElement("td");
o_txt0.innerHTML="<label>Name:<input type='text' name='name2[]'></label>";
var o_txt1 = document.createElement("td");
var htmlString = 'Position: ';
htmlString += '<select name="position2[]" class="tabelinvultekst"\n';
htmlString += ' onChange="showother2(this, other)">\n';
htmlString += ' <option value="president" checked>president<\/option>\n';
htmlString += ' <option value="vice president">vice president<\/option>\n';
htmlString += ' <option value="secretary">secretary<\/option>\n';
htmlString += ' <option value="other">other<\/option>\n';
htmlString += '<\/select>\n';
htmlString += '<label>\n';
htmlString += ' <input type="text" name="other" class="tabelinvultekst" style="visibility:hidden">\n';
htmlString += '<\/label>\n';
o_txt1.innerHTML = htmlString;
var o_txt2 = document.createElement("td");
o_txt2.innerHTML="<label>City:<input type='text' name='city2[]'></label>";
var o_txt3 = document.createElement("td");
o_txt3.innerHTML="<label>state:<input type='text' name='state2[]'></label>";
var o_txt4= document.createElement("td");
o_txt4.innerHTML="<label>Zip:<input type='text' name='zip2[]'></label>";
var o_button = document.createElement ("input");
o_button.type = "button";
o_button.value = "Remove";
o_button.onclick = RemoveRow;
var o_td0 = document.createElement ("td");
var o_td1 = document.createElement ("td");
var o_td2 = document.createElement ("td");
var o_td3 = document.createElement ("td");
var o_td4 = document.createElement ("td");
var o_td5 = document.createElement ("td");
var o_tr = document.createElement ("tr");
var o_body = document.getElementById ("dynamic_table_body");
var o_tr2 = document.createElement ("tr");
var o_tr3 = document.createElement ("tr");
var o_tr4 = document.createElement ("tr");
var o_tr5 = document.createElement ("tr");
var o_tr6 = document.createElement ("tr");
var o_tr7 = document.createElement ("tr");
o_td0.appendChild (o_txt0);
o_td1.appendChild (o_txt1);
o_td2.appendChild (o_txt2);
o_td3.appendChild (o_txt3);
o_td4.appendChild (o_txt4);
o_td5.appendChild(o_button);
o_tr.appendChild (o_td0);
o_tr2.appendChild (o_td1);
o_tr3.appendChild (o_td2);
o_tr4.appendChild (o_td3);
o_tr5.appendChild (o_td4);
o_tr6.appendChild (o_td5);
var tb = document.createElement ("div");
tb.appendChild(o_tr);
tb.appendChild(o_tr2);
tb.appendChild(o_tr3);
tb.appendChild(o_tr4);
tb.appendChild(o_tr5);
tb.appendChild(o_tr6);
o_body.appendChild(tb);
}
</script>
<html>
<table>
<tbody id="dynamic_table_body">
<tr>
<td><label>Name:<input type="text" name="bname" id="bname" /></label></td>
<td colspan="2"> </td>
</tr>
<tr>
<td>Position:<select name="bposition" id="bposition" class="tabelinvultekst" onChange="showother2( this, other)">
<option value="president" selected>president</option>
<option value="vice president">vice president</option>
<option value="secretary">secretary</option>
<option value="other">other</option>
</select>
</td>
<td width="112"><label><input type="text" name="other" class="tabelinvultekst" style="visibility:hidden"></label> </td>
<tr>
<td><label>City:<input type="text" name="bcity" id="bcity" /></label></td>
</tr>
<tr>
<td><label>State:<input type="text" name="bstate" id="bstate" /></label></td>
</tr>
<tr>
<td><label>Zip:<input type="text" name="bzip" id="bzip" /></label></td>
</tr>
<tr>
<td colspan="3"><button type="button" onClick="AddRow ();">Add </button></td>
</tr>
</tbody>
</table>
</html>
