<span> and javascript *SOLVED*

[digitalgod]

not sure if I'm posting this in the right place so it's not please feel free to move it.

I have a dropdown in a table with 2 choices, Yes and No, if a user chooses Yes, I want another row to appear with more input boxes. It works very well when the <span> is outside of the table, but doesn't work at all when it's in the table.. It really has to be in the table

here's what I have so far
part of the form
[code]
<tr>
        <td>Buy Tickets:</td>
        <td><select name="buy" id="buy" onChange="addTxtBox()" style="width:90px; height:17px; font-family:tahoma; font-size:10px; color:#9A400C ">
            <option>Choose one</option>
            <option value="yes">Yes</option>
            <option value="no" selected="selected">No</option>
          </select></td>
      </tr>
  <span id="ticketsArea"></span>
[/code]
and this is part of the javascript function
[code]
document.getElementById('ticketsArea').innerHTML += '<tr>' ;
document.getElementById('ticketsArea').innerHTML += '<td>' ;
document.getElementById('ticketsArea').innerHTML += 'Quantity: ';
document.getElementById('ticketsArea').innerHTML += '</td>' ;
document.getElementById('ticketsArea').innerHTML += '<td>' ;
document.getElementById('ticketsArea').innerHTML += '<input name="t_qty" type="text" id="t_qty" style="width:160px; height:17px; font-family:tahoma; font-size:10px; color:#9A400C "/>';
document.getElementById('ticketsArea').innerHTML += '</td>' ;
document.getElementById('ticketsArea').innerHTML += '<td>' ;
document.getElementById('ticketsArea').innerHTML += 'Price per ticket: ';
document.getElementById('ticketsArea').innerHTML += '</td>' ;
document.getElementById('ticketsArea').innerHTML += '<td>' ;
document.getElementById('ticketsArea').innerHTML += '<input name="t_price" type="text" id="t_price" style="width:160px; height:17px; font-family:tahoma; font-size:10px; color:#9A400C "/>';
document.getElementById('ticketsArea').innerHTML += '</td>' ;
document.getElementById('ticketsArea').innerHTML += '</tr>' ;
[/code]

any clue why it's not showing anything?? but works if I put the <span> outside of the table.

[fenway]

First, don't add to innerHTML more than once -- build up your string, then do a single DOM operation.  Second, I don't know what you mean by "inside".

[digitalgod]

what do you mean by build up your string? something like

[code]
myString = '<td>Quantity: </td>
<td><input name="t_qty" type="text" id="t_qty" style="width:160px; height:17px; font-family:tahoma; font-size:10px; color:#9A400C "/></td>
<td>Price per ticket: </td>
<td><input name="t_price" type="text" id="t_price" style="width:160px; height:17px; font-family:tahoma; font-size:10px; color:#9A400C "/></td>
</tr>';

document.getElementById('ticketsArea').innerHTML = myString;
[/code]
??

what I mean is that I need to add rows in the table depending on what the user chooses, If he chooses yes then those rows are added, if he chooses No then nothing is added. Creating a new table with innerHTML works perfectly but I can't seem to just add new rows inside of an existing table.

[fenway]

Yes, that's what I mean, but JS is annoying about multi-line strings, so you may just want to concat a few times onto the myString variable.  As for creating new rows, that's annoying, and browser-dependent, don't know about FF, I've used insertAdjacentHTML() or something similar in the past.

[digitalgod]

this is getting really annoying... I tried everything and I can't get the darn table to display properly... what am I doing wrong...
I tried using concat but that didn't work, the only time I actually got close to having a normal table is by using several innerHMTL...

all I want is a table that looks like this

Name: input box  Type: drop down

<tr>
<td>Name :</td>
<td><input name="name" type="text" id="name" style="width:160px; height:17px; font-family:tahoma; font-size:10px; color:#9A400C "/></td>
<td>Type :</td>
<td><select name="type" id="type" style="width:100px; height:17px; font-family:tahoma; font-size:10px; color:#9A400C ">
<option>Choose one</option>
<option value="brandy & cognac">Brandy & Cognac</option>
<option value="champagne">Champagne</option>
<option value="dry gin">Dry Gin</option>
<option value="liquor">Liquor</option>
<option value="rum">Rum</option>
<option value="tequila">Tequila</option>
<option value="vodka">Vodka</option>
<option value="whisky & scotch">Whiskey & Scotch</option>
<option value="wine">Wine</option></select></td>
</tr>

what else can I try?

[fenway]

OK, I think we're going around in circles here... you want to add a new row dynamically?

[digitalgod]

well I have a dropdown with numbers, if I choose 2 then it adds 2 rows and so on. Right now it's overlapping the first 2 rows, the first row looks perfect but then it looks like this

Name : input box  Type: dropdown Name:
input box Type: dropdown Name:
etc

[fenway]

And these are already in a table? Please post the HTML/JS you have so far, so I can see what you're talking about.

[digitalgod]

trying to post but it won't let me for some reason

[fenway]

Then try to provide a live link to this page.

[digitalgod]

here's the form
[code]
<form action="admin.php?a=newbottle" method="post" name="form" id="form">
<input type="hidden" name="process" value="yes" />
<table width="374" border="0">
<tr>
  <td colspan="2">&nbsp;</td>
  </tr>
<tr>
  <td width="103">Number of bottles:</td>
  <td width="241"><select name="bNumber" id="bNumber" onChange="addTxtBox(this.value)" style="width:60px; height:17px; font-family:tahoma; font-size:10px; color:#9A400C "/>
  <?php for ($i=1; $i<=25; $i++) {
  echo '<option value="'.$i.'">'.$i.'</option>';
  };?>
  </select></td>
</tr>
<tr>
  <td>&nbsp;</td>
  <td>&nbsp;</td>
</tr>
<tr>
  <td colspan="2">&nbsp;</td>
</tr>
</table>
<div id="txtBoxArea"></div>

<input type="submit" value="Create"/>
<label>
<input type="reset" name="Reset" value="Reset" />
</label>
</form>
[/code]

and here's the javascript function
[code]
function addTxtBox(number)
{
document.getElementById('txtBoxArea').innerHTML = '';
if (number != 0)
{
document.getElementById('txtBoxArea').innerHTML += '<div style="margin-left:2px; margin-top:5px; margin-bottom:5px "><img src="images/square1.jpg" align="absmiddle" style="margin-right:5px "><strong class="light_gray">Bottles Info</strong></div>';
}
document.getElementById('txtBoxArea').innerHTML += '<table border ="0" width="400">';
for (var i = 1 ; i <= number ; i++)
{
if (i > 1)
<!-- I know this doesn't work -->
                          myString = '<tr>
<td>Name :</td>
<td><input name="name" type="text" id="name" style="width:160px; height:17px; font-family:tahoma; font-size:10px; color:#9A400C "/></td>
<td>Type :</td>
<td><select name="type" id="type" style="width:100px; height:17px; font-family:tahoma; font-size:10px; color:#9A400C ">
<option>Choose one</option>
<option value="brandy & cognac">Brandy & Cognac</option>
<option value="champagne">Champagne</option>
<option value="dry gin">Dry Gin</option>
<option value="liquor">Liquor</option>
<option value="rum">Rum</option>
<option value="tequila">Tequila</option>
<option value="vodka">Vodka</option>
<option value="whisky & scotch">Whiskey & Scotch</option>
<option value="wine">Wine</option></select></td></tr>'
document.getElementById('txtBoxArea').innerHTML += myString;



}
document.getElementById('txtBoxArea').innerHTML += '</table>';
document.getElementById('txtBoxArea').innerHTML += '<br />' ;
}
[/code]

[fenway]

A number of problems:

1) You can't have multi-line strings in JS -- syntax errors galore.
2) your IF block is missing curlies -- only the first line will be contained in this control path, which is bad.
3) You keep adding to .innerHTML on-the-fly -- VERY bad, since after you add the open table tag, the browser will automatically close it.  Like I said earlier, build the string in JS first, THEN issue a single assignment.

The corrected JS function should be like this (I'm lazy, so I didn't format it nicely):

[code]
function addTxtBox(number)
{
var myString = '';
document.getElementById('txtBoxArea').innerHTML = '';
if (number != 0)
{
myString += '<div style="margin-left:2px; margin-top:5px; margin-bottom:5px "><img src="images/square1.jpg" align="absmiddle" style="margin-right:5px "><strong class="light_gray">Bottles Info</strong></div>';
}
myString += '<table border ="0" width="400">';
for (var i = 1 ; i <= number ; i++)
{
if (i > 1) {
// I know this doesn't work
            myString += '<tr>';
myString += '<td>Name :</td>';
myString += '<td><input name="name" type="text" id="name" style="width:160px; height:17px; font-family:tahoma; font-size:10px; color:#9A400C "/></td>';
myString += '<td>Type :</td>';
myString += '<td><select name="type" id="type" style="width:100px; height:17px; font-family:tahoma; font-size:10px; color:#9A400C ">';
myString += '<option>Choose one</option>';
myString += '<option value="brandy & cognac">Brandy & Cognac</option>';
myString += '<option value="champagne">Champagne</option>';
myString += '<option value="dry gin">Dry Gin</option>';
myString += '<option value="liquor">Liquor</option>';
myString += '<option value="rum">Rum</option>';
myString += '<option value="tequila">Tequila</option>';
myString += '<option value="vodka">Vodka</option>';
myString += '<option value="whisky & scotch">Whiskey & Scotch</option>';
myString += '<option value="wine">Wine</option></select></td></tr>';
}

}
myString += '</table>';
myString += '<br />' ;
document.getElementById('txtBoxArea').innerHTML = myString;

[/code]

[digitalgod]

sorry if it took so much time to reply, getting busy with midterms..

Anyways it works perfectly thanks!