adding content to an already loaded page

adeptz · March 18th, 2004, 08:02 PM

hey all, ive been trying to write a script that add's some text and radio buttons to this page when the user clicks the 'selfserve' option, although ive had some success it is limited to what i want loading on a whole new page without the original document. does anyone have any idea on how to do this?. included below is my WHOLE document.

====================BEGIN CODE======================
<?xml version="1.0" encoding="iso-8859-1"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Order Page</title>
        <script language="JavaScript">
        function selfservupdate()
        {
        document.orderForm.add("<embed src=''order.htm''>");
        document.orderForm.add("<td><div align=''center''><strong>Prepackaged:");
        document.orderForm.add("<input type=''radio'' name=''type'' value=''prepackaged'' />Self Serve:");
        document.orderForm.add("<input type=''radio'' name=''type'' value=''selfserve'' />");
        document.orderForm.add("</strong></div></td>");
        }
        </script>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />

</head>

<body bgcolor="#333399" text="#FFFFFF">
<form name="orderForm" id="orderForm" method="post" action=""><div align="center">
  <div align="center">
    <table width="69%" border="0" align="center" cellpadding="5">
      <tr>
        <td height="122" colspan="2"> <div align="center"><img src="img/logo.gif" width="120" height="112" /></div></td>
      </tr>
      <tr>
        <td height="29" colspan="2"> <div align="center">
            <h2>Onlslows
              Online Spices</h2>
          </div></td>
      </tr>
      <tr>
        <td width="266" height="32"> <div align="right"><strong>First
            Name:
            <input type="text" name="textfield3" />
            </strong></div></td>
        <td width="250"><p align="right"><strong>Last
            Name:
            <input type="text" name="textfield4" />
            </strong></p></td>
      </tr>
      <tr>
        <td><div align="right"><strong>Address:
            <input type="text" name="textfield2" />
            </strong></div></td>
        <td><div align="right"><strong>Suburb:
            <input type="text" name="textfield5" />
            </strong></div></td>
      </tr>
      <tr>
        <td height="23"><div align="right"><strong>Email:
            <input type="text" name="email" />
            </strong></div></td>
        <td><p align="right"><strong>State:
            <select name="select2">
              <option value="vic">VIC</option>
              <option value="nsw">NSW</option>
              <option value="qld">QLD</option>
              <option value="sa">SA</option>
              <option value="wa">WA</option>
              <option value="act">ACT</option>
              <option value="tas">TAS</option>
            </select>
            </strong></p></td>
      </tr>
      <tr>
        <td height="32"><div align="center"></div></td>
        <td height="31" colspan="2"><div align="right"><strong>Postcode:
            <input type="text" name="textfield622" />
            </strong></div></td>
      <tr>
        <td height="68"><strong>Small:
          <input type="radio" name="size" value="small" />
          Large:
          <input type="radio" name="size" value="large" />
          </strong></td>
        <td><strong>Prepackaged:
          <input type="radio" name="type" value="prepackaged" />
          Self Serve:
          <input type="radio" name="type" value="selfserve" onclick="selfservupdate();" />
          </strong></td>
      </tr>
      <tr>
        <td height="68"><div align="right"><strong>No
            Of Packages:
            <select name="select">
              <option value="1">1</option>
              <option value="2">2</option>
              <option value="3">3</option>
              <option value="4">4</option>
              <option value="5">5</option>
              <option value="6">6</option>
              <option value="7">7</option>
              <option value="8">8</option>
              <option value="9">9</option>
              <option value="10">10</option>
              <option value="11">11</option>
              <option value="12">12</option>
              <option value="13">13</option>
              <option value="14">14</option>
              <option value="15">15</option>
              <option value="16">16</option>
              <option value="17">17</option>
              <option value="18">18</option>
              <option value="19">19</option>
              <option value="19">19</option>
            </select>
            </strong></div></td>
        <td> </td>
      </tr>
      <tr>
        <td height="29"> <div align="center"><strong>
            <input name="order" type="submit" id="order" value="Order" />
            </strong></div></td>
        <td> <div align="center"><strong>
            <input name="clear" type="reset" id="clear" value="Clear" />
            </strong></div></td>
      </tr>
    </table>
  </div>
</form>
</body>
</html>
==============================END CODE=======================

-the funky junkie-

Snib · March 18th, 2004, 09:05 PM

When I want to add to an already loaded page, I use innerHTML.
Just make a DIV and then write to its innerHTML attribute.
Ex: div1.innerHTML = "this is inside the div!";

HTH,

----------
---Snib---
----------

<><

adeptz · March 18th, 2004, 09:42 PM

Ummm just wondering but how exactly would this apply to my page as i want to call the function if the user clicks the 'selfserve' option..
function selfserveupdate()
{
document.write("<div id="selfserveCELL")
document.write(selfserveCELL.innerHTML = "YOU SELECTED SELF SERVE";
}
is this how is should be applied or is there another way?.

-the funky junkie-

adeptz · March 18th, 2004, 10:31 PM

sorry for all the posts, but ill make this one simple as i can,

how can i make it so when a user clicks a radio button, text is added below the radio button (without clearing the whole document) saying "YOU CLICKED THE RADIO BUTTON"

-the funky junkie-

joefawcett · March 19th, 2004, 05:00 AM

Add a div element to your existing code:

Code:

Self Serve: 
          <input type="radio" name="type" value="selfserve" onclick="selfservupdate();" />
          </strong><div id="divMessage"></div></td>

In your function have:

Code:

function selfservupdate()
{
var oOutput = docuemtnt.getElementById("divMessage");
oOutput.innerHTML = "I must read other answers, especially those posted by Snib, more carefully";
}

As a side matter if this is designed for IE beware, IE cannot handle xhtml properly and will often fail to display or run code correctly for no apperent reason.

--

Joe

adeptz · March 19th, 2004, 06:53 AM

thanks for the head up, i knew about IE + XHTML but its a requirement for a project im currently working on. and thanks for the help!

-the funky junkie-