Jump to content

Add content to page on click


jcbarr

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?
Link to comment
https://forums.phpfreaks.com/topic/16272-add-content-to-page-on-click/
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>

Archived

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

×
×
  • Create New...

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.