Jump to content

Archived

This topic is now archived and is closed to further replies.

jcbarr

Add content to page on click

Recommended Posts

Okay I want to add content to my page with the simple click of a link. I don't know if java can do this, but I thought that someone here might be able to help me do it.

Okay so the code looks like this;

[code]<table align="center" cellpadding="4" border="1">
  <tr>
      <td colspan="4" bgcolor="#3399FF" align="center"><b>UNION LEAGUE</b></td>
  </tr>
  <tr>
      <td bgcolor="#FFFFCC" align="center"><b>POS</b></td>
      <td bgcolor="#FFFFCC" align="center"><b>PLAYER</b></td>
      <td bgcolor="#FFFFCC" align="center"><b>STAT LINE</b></td>
  </tr>
      <form method="post" action="allstar.php?ADD=Y">
  <tr>
      <td bgcolor="#FFFFCC" align="center"><select name="pos[]">
                                          <option>P
                                          <option>C
                                          <option>1B
                                          <option>2B
                                          <option>3B
                                          <option>SS
                                          <option>LF
                                          <option>CF
                                          <option>RF</select>
      </td>
      <td bgcolor="#FFFFCC" align="center">
            <input type="hidden" name="league[]" value="UL"><input type="text" name="player[]">
      </td>
      <td bgcolor="#FFFFCC" align="center">
            <input type="text" name="stat[]">
      </td>
      <td bgcolor="#FFFFCC" align="center">
            <a href="addnext">Add</a>
      </td>
  </tr>
  <tr>
      <td colspan="4" align="center" valign="middle" bgcolor="#FFFFFF">
            <input type="submit" value="SUBMIT"></form>
      </td>
  </tr>[/code]

When people click on the <a href="addnext">Add</a> I would like it to add another table row containg the same information as the previous one, and so forth so that users can add as many rosws as they want.

Not quite sure how to do this, anyone got any ideas?

Share this post


Link to post
Share on other sites
<html>
<head>
<title>JavaScript - Adding html elements dynamically</title>
<script type="text/javascript">
var numrows = 0;
function drawoptions()
{
  var tbl = document.getElementById("formtable");
  var targetnumrows = parseInt(document.getElementById("numoptions").value + "");
  // if they've selected to show more rows, then we add more rows
  if(targetnumrows > numrows)
  {
      for(var i=0; i<targetnumrows - numrows; i++)
      {
          var row = tbl.insertRow(tbl.rows.length);

          // create the name cell
          var cell = row.insertCell(0);
          var namefield = document.createElement("input");
          namefield.setAttribute("type", "text");
          namefield.setAttribute("id", "Name" + (numrows+i));
          namefield.setAttribute("value", "field id : Name" + (numrows+i));
          cell.appendChild(namefield);
 
          // create the email cell
          cell = row.insertCell(1);
          var emailfield = document.createElement("input");
          emailfield.setAttribute("type", "text");
          emailfield.setAttribute("id", "Email" + (numrows+i));
          emailfield.setAttribute("value", "field id : Email" + (numrows+i));
          cell.appendChild(emailfield);
      }
  }
  // they've decided to show less rows, so we remove some
  else
  {
      for(var i=0; i<numrows - targetnumrows; i++)
      {
          tbl.deleteRow(tbl.rows.length - 1);
      }
  }

  numrows = tbl.rows.length - 1;
  document.getElementById("numoptions").value=tbl.rows.length; 
  //alert(numrows);
}

window.onload = drawoptions;

</script>
</head>

<body>

<form method="post" action="someformhandler.aspx">
Enter your friends names and email addresses<br />

Show
<input type='hidden'  id="numoptions" value=1>
<table id="formtable">
<tr><td colspan=2><a href="javascript:drawoptions();">add</td></tr>
<tr>
  <td>Name</td>
  <td>Email</td>     
</tr>
</table>

<input type="submit" value="Save"  />

</form>

</body>

</html>

Share this post


Link to post
Share on other sites
It looks like this might work, now all I have to do is try to format it to fit my page.

Will this work with sending the form to a php script and not an aspx? Just wondering.

Thanks.

Share this post


Link to post
Share on other sites

×

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.