Member Avatar for Nathaniel10

I have a script in which I would like new code to appear based on the response to a question. I am using 'onChange' to trigger the event.

The difficulties I am having are that:

1) The format of the form changes after the event. I would like the new question to be identical the other questions in the form. The text is not center aligned and the input box is smaller and not aligned.

2) I am using PHP to process the form and I prepopulate the fields if the form has already been submitted. The code for population is visible text when it shouldn't be.

Here is the code for a test program.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

<html>

<head>
<title>Dom Test</title>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
<meta name="generator" content="HAPedit 3.1">
</head>

<script language="javascript" type="text/javascript">

function addRow() {

var bdy  = document.getElementsByTagName("body")[0];
var tbl  = document.getElementsByTagName("table")[0];
var tblbdy = document.getElementsByTagName("tbody")[0];
var tblrow = document.getElementsByTagName("tr")[3];

   row = document.createElement("tr"); row.setAttribute("height", "50");

      cell1 = document.createElement("td"); cell1.setAttribute("width", "350"); cell1.setAttribute("align", "center");
      text1 = document.createTextNode("Estimated Exempt Interest Income: &nbsp; &nbsp; ");
      cell1.appendChild(text1);

      cell2 = document.createElement("td"); cell2.setAttribute("width", "350"); cell2.setAttribute("align", "center");
      cell3 = document.createElement("input");
      cell3.setAttribute("style", "font-size:12pt");
      cell3.setAttribute("size", "15");
      cell3.setAttribute("type", "text");
      cell3.setAttribute("name", "exempt");
      cell3.setAttribute("value", "<?php if (isset($_POST['exempt'])) {echo $_POST['exempt'];} ?>");
      cell2.appendChild(cell3);

   row.appendChild(cell1);
   row.appendChild(cell2);

tblbdy.appendChild(row);

tbl.appendChild(tblbdy);
bdy.appendChild(tbl);

tbl.setAttribute("align", "center");
}
</script>

<body>

<p>&nbsp;</p>

<form method=post name="taxform1" >

<table width=600 align="center">

<tr colspan="2"><td>
<p><span style="font-family:times new roman; font-size:18pt; color:black; text-align:center">Income Tax Calculator for Complex Returns</span></p>
</td></tr>

<tr><td><p>&nbsp;</p></td></tr>

<tr>
<td>Estimated Social Security Income: &nbsp; &nbsp; </td>
<td>
<input style="font-size:12pt" type="text" name="ssi" size="15" onChange="javascript:addRow()">
</td>
</tr>

<tr>
<td>Estimated Exempt Interest Income: &nbsp; &nbsp; </td>
<td>
<input style="font-size:12pt" type="text" name="exempt" size="15">
</td>
</tr>
</table>
</form>

</body>
</html>

The new row is the same as the last row in the table. I keep it in so I can compare the two. What JS code do I need to make the program do as I would like it to do?

Thanks in advance for your help.

  • 4 Contributors
  • 8 Replies
  • 126 Views
  • 3 Days Discussion Span
  • Latest Post Latest Post by Nathaniel10
Member Avatar for radhakrishna.p

try the bellow url (for adding new row to the table and remove code for check box creation in that)

http://viralpatel.net/blogs/dynamically-add-remove-rows-in-html-table-using-javascript/

it gives the simple solution to your problem .

(there is no need of adding new row to <tbody> and <tbody> to <table> and <table> to <body> )

and make stylling your components as it is

Edited by radhakrishna.p because: clarity to the solution
Member Avatar for Nathaniel10

Hi Radha,

Thanks for your prompt reply. I read Viral's examples and found them pretty helpful. Unfortunately, he uses 'innerHTML' in his code. As we know, that is proprietary to MS, so it only works in IE. I need for my code to work in Firefox, Chrome, and others, so I can't use 'innerHTML'.

While any help is very much appreciated, useful suggestions need to be 100% W3C standards compliant.

Member Avatar for AleMonteiro

Nathaniel10,

even thru innerHTML is not an W3C standad, almost every modern browser implement it.

Take a look at this http://www.quirksmode.org/dom/w3c_html.html

And if you really doesn't want to use it, use Object.style.textAlign to set the alignment.

Edited by AleMonteiro
Member Avatar for radhakrishna.p

i am just saying the code is very helpful for your requirement

and innerHtml is mainly used for placing values into the cell not for putting values into <input> type elements

for that <input> type elements you may repeat line no (27 to 31) whatever you have posted in your code

try it once
let me know the status

Edited by radhakrishna.p because: no reason
Member Avatar for Taywin

1) The format of the form changes after the event. I would like the new question to be identical the other questions in the form. The text is not center aligned and the input box is smaller and not aligned.

The layout is changed because you are using table tag which is readjusted by a browser regarding its inner content. Even though you could add style to the table tag, it is not a proper way of creating a web page (overly use of table tag instead of using div tags). When you deal with layout, you should use div tags instead. You also need to add styles to them and make them look like a table.

2) I am using PHP to process the form and I prepopulate the fields if the form has already been submitted. The code for population is visible text when it shouldn't be.

I think you are using wrong format to create PHP code block. You may need to get rid of your double quotes around the code. Because you put double quotes around your PHP code, it forces the content inside as regular string. Below is what my guess is (whatever you need to concatenate string with PHP code. I have not done PHP for 7+ years)...

cell3.setAttribute("value", "\"".<?php if (isset($_POST['exempt'])) {echo $_POST['exempt'];} ?>."\"");
Edited by Taywin
Member Avatar for Nathaniel10

Thanks, Taywin.

After some additional experimenting, I solved my second problem. My first tests were in a small .html program. When I put the results of those tests into the draft full .php program, the php code for prepopulating the form becomes invisible.

Now, the desired new HTML code is added where and when I want it - only the layout/alignment remains to be solved.

In the full .php program, I am using CSS and div tags to layout the pages. I use table formatting only within the form that the user is to fill out and submit. I agree with you, Taywin, that I need to make the code added by the JS program responsive to the layout design embodied by my style sheet. I am not sure how to do that and will experiment some more.

Radha, I deleted the body and table variables from the JS function and it still works. However, when I remove the table body (tbody) variable it stops working.

Member Avatar for Nathaniel10

Well, it didn't take long to figure out half of the layout problem! It wasn't the JS program, it was the HTML. The JS layout is set to align center. The HTML is also set to align center but wasn't doing that. The HTML was aligning left. When I set the JS to align left, the layout matched perfectly.

So, I need to review the CSS and other formatting to see why my table is not aligning center. Another issue might be that the layout changes from center to left after the JS is executed. There is a movement of the input areas of the form.

Still, thanks to everyone for your input.

Member Avatar for Nathaniel10

OK. I figured out the other half off my layout problem. The error was in lines 22 and 26 of the code I posted above. Silly me forgot that the setAttribute function acts like inline styling, and that inline styling supercedes the style sheet styling. My CSS wasn't working because my JS code was overiding it. I deleted the setAttributes on lines 22 and 26. The program then worked as I wanted.

I am marking this thread as solved.

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.