Jump to content


Photo

<span> and javascript *SOLVED*


  • Please log in to reply
12 replies to this topic

#1 digitalgod

digitalgod
  • Members
  • PipPipPip
  • Advanced Member
  • 374 posts

Posted 20 September 2006 - 08:43 PM

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
<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>
and this is part of the javascript function
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>' ;

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

#2 fenway

fenway
  • Staff Alumni
  • MySQL Si-Fu / PHP Resident Alien
  • 16,199 posts
  • LocationToronto, ON

Posted 21 September 2006 - 12:46 AM

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".
Seriously... if people don't start reading this before posting, I'm going to consider not answering at all.

#3 digitalgod

digitalgod
  • Members
  • PipPipPip
  • Advanced Member
  • 374 posts

Posted 26 September 2006 - 01:01 AM

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

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;
??

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.

#4 fenway

fenway
  • Staff Alumni
  • MySQL Si-Fu / PHP Resident Alien
  • 16,199 posts
  • LocationToronto, ON

Posted 26 September 2006 - 02:31 AM

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.
Seriously... if people don't start reading this before posting, I'm going to consider not answering at all.

#5 digitalgod

digitalgod
  • Members
  • PipPipPip
  • Advanced Member
  • 374 posts

Posted 26 September 2006 - 08:16 PM

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?

#6 fenway

fenway
  • Staff Alumni
  • MySQL Si-Fu / PHP Resident Alien
  • 16,199 posts
  • LocationToronto, ON

Posted 26 September 2006 - 08:39 PM

OK, I think we're going around in circles here... you want to add a new row dynamically?
Seriously... if people don't start reading this before posting, I'm going to consider not answering at all.

#7 digitalgod

digitalgod
  • Members
  • PipPipPip
  • Advanced Member
  • 374 posts

Posted 26 September 2006 - 09:06 PM

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


#8 fenway

fenway
  • Staff Alumni
  • MySQL Si-Fu / PHP Resident Alien
  • 16,199 posts
  • LocationToronto, ON

Posted 26 September 2006 - 09:26 PM

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.
Seriously... if people don't start reading this before posting, I'm going to consider not answering at all.

#9 digitalgod

digitalgod
  • Members
  • PipPipPip
  • Advanced Member
  • 374 posts

Posted 26 September 2006 - 09:43 PM

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

#10 fenway

fenway
  • Staff Alumni
  • MySQL Si-Fu / PHP Resident Alien
  • 16,199 posts
  • LocationToronto, ON

Posted 26 September 2006 - 10:33 PM

Then try to provide a live link to this page.
Seriously... if people don't start reading this before posting, I'm going to consider not answering at all.

#11 digitalgod

digitalgod
  • Members
  • PipPipPip
  • Advanced Member
  • 374 posts

Posted 27 September 2006 - 04:54 PM

here's the form
<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>

and here's the javascript function
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 />' ;
}


#12 fenway

fenway
  • Staff Alumni
  • MySQL Si-Fu / PHP Resident Alien
  • 16,199 posts
  • LocationToronto, ON

Posted 27 September 2006 - 07:09 PM

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):

	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;


Seriously... if people don't start reading this before posting, I'm going to consider not answering at all.

#13 digitalgod

digitalgod
  • Members
  • PipPipPip
  • Advanced Member
  • 374 posts

Posted 10 October 2006 - 06:07 PM

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

Anyways it works perfectly thanks!




0 user(s) are reading this topic

0 members, 0 guests, 0 anonymous users