Javascript/PHP help needed: Adding Text field in specific divs.

Question

loveisblind 0 Newbie Poster

14 Years Ago

I'm inexperienced with Javascript and I found this script, but I'm not sure how to alter it to do what I want. I have a PHP script that creates forms in a loop. $z in this case could equal 3, and 3 forms each containing 1 Position/Office field will be created including 1 Candidate field. If a user wants to add a new candidate for that specific position, I want to be able to add a Candidate text field just relevant to that Office/Position. With this script, I've only been able to pop up a text field under one Office/Position and not under any other Office/Position. I think it has something to do with my divs. Any help will be greatly appreciated!

Javascript:

var inival=0; // Initialise starting element number

// Call this function to add textbox
function addTextBox()
{

var newArea = add_New_Element();
var htcontents = "Candidate:                        <input name='candidate' type='text' id='candidate'> echo 'divIdName';"; 
document.getElementById(newArea).inner… = htcontents; // You can any other elements in place of 'htcontents' 
}


function add_New_Element() {
inival=inival+1; // Increment element number by 1
var ni = document.getElementById('area');
var newdiv = document.createElement('div'); // Create dynamic element
var divIdName = 'my'+inival+'Div';
newdiv.setAttribute('id',divIdName);
ni.appendChild(newdiv);
return divIdName;
}

--------------------------------------…

PHP Code:

<?
echo "<table>";
//***** For loop for the amount of positions chosen on previous page *****

for ($z = 1; $z <= $position_num; $z++){ 


echo "<tr>";
echo "<form method='post' action='uploadvoters.php'>";
echo "<p>Office/Position $z <span class = 'required'></span>:"; 
echo "             ";
echo "<input name='position' type='text' id='position'>";
echo "</p>";

echo "<p>";

echo "Candidate :     ";
echo "                   ";
echo "<input name='candidate' type='text' id='candidate'>";
echo "<br/><br/>";

echo "<div id='area'.$z>";
echo "</div>";

echo "<a onclick='addTextBox()' href='#'>Add Candidate </a>";
echo "        Add Write In Candidate  ";
echo "<input type='checkbox' name='writein' value='writein'><br>";

echo "</p>";
echo "<td></td><td></td><td></td>";

echo "</tr>";
echo "</form>";

echo "<hr></hr>";


} //***** END OF Z LOOP *****



echo "<tr><td>";
echo "</td><td>";

echo"</td><td>";
echo "</td></tr>";
echo "</table>";


?>

javascript php

2 Contributors
5 Replies
156 Views
1 Day Discussion Span
Latest Post 14 Years Ago Latest Post by fxm

fxm 23 Posting Pro

14 Years Ago

add a Candidate text field just relevant to that Office/Position

This

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <meta name="generator" content=
    "HTML Tidy for Windows (vers 25 March 2009), see www.w3.org">
    <title></title>
  </head>
  <body>
    <form>
      <input id="IT">
    </form>
    <script type="text/javascript">
	var oITnew = document.createElement("input");
	oITnew.setAttribute("value","added");
	var oIT = document.getElementById("IT");
	var oPAR = oIT.parentNode;
	oPAR.insertBefore(oITnew,oIT);
    </script>
  </body>
</html>

shows how to insert an <input> element before an existing element (in this example that happens to be another <input>). You can use any convenient method to point to any existing element, not just getElementById(). You can set attributes on the new element (to make the new box look like an existing one, just copy attributes) and you can insert other elements around it.

To insert the new element at the end of the sibling list of the parent node (after the last existing element) change line 17 to oPAR.insertBefore(oITnew,null);

fxm 23 Posting Pro

14 Years Ago

only adds a text field for the first Office/Position form

My example had one existing element with Id "IT". You have three existing elements.

Arguably the easiest approach for a simple/small page is to give those three elements unique Id's "IT1", "IT2", "IT3". Each 'add' link [or button] must refer to its corresponding element.

Edited 14 Years Ago by fxm because: n/a

Reply to this topic

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.

loveisblind 0 Newbie Poster · Answer 1 · 2010-05-10T08:42:58+00:00

Thank you for your reply. I've altered your code to match up to my files and it adds text fields fine, but it only adds a text field for the first Office/Position form and not any others. I am confused on how to alter the divs in this case. I attached of a picture of how the page looks like. A user should be able to add new candidates to each Position/Office if they want to.
[IMG]http://img291.imageshack.us/img291/7716/screenph.jpg[/IMG]

loveisblind 0 Newbie Poster · Answer 2 · 2010-05-11T03:57:34+00:00

Thanks again. I tried altering it again. The amount of elements could be any number from 1-100. $z in this instance can be 80. How can I alter the code to make sure the right element is created for its corresponding Office/Position.
here's what I have (I may have the syntax incorrect). I tried to make sure that the javascript method knew which element it is referencing. Its not working now.. THanks~

<?



echo "<table>";
//***** For loop for the amount of positions chosen on previous page *****

	for ($z = 1; $z <= $position_num; $z++){ 
		
				
   		echo "<tr>";
echo "<form method='post' action='uploadvoters.php'>";
echo "<p>Office/Position $z <span class = 'required'></span>:";      
echo "&nbsp; &nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;";
echo "<input name='position' type='text' id='position'>";
  echo "</p>";

  echo "<p>";

echo "Candidate : &nbsp;&nbsp;&nbsp;&nbsp;";
echo "&nbsp;&nbsp; &nbsp;  &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;";
$inputId = "candidate".$z;
echo "<input name='$inputId' type='text' id='$inputId'>";
echo "<br/><br/>";
$area = 'area'.$z;
echo "<div id='$area'>";
echo "</div>";

echo "<a onclick='addCandidate($inputId)' href='#'>Add Candidate </a>";

echo "&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Add Write In Candidate&nbsp;&nbsp;";
echo "<input type='checkbox' name='writein' value='writein'><br>";

  echo "</p>";



		echo "<td></td><td></td><td></td>";

	   		echo "</tr>";


echo "<hr></hr>";


 	}  //***** END OF Z LOOP *****



       echo "<tr><td>";
     	 echo "</td><td>";

        echo"</td><td>";
       echo "</td></tr>";
      echo "</table>";


		?>

Javascript:

function addCandidate(inputId){

	var oITnew = document.createElement("input");
	oITnew.setAttribute(inputId,"");
	var oIT = document.getElementById(inputId);
	var oPAR = oIT.parentNode;
       oPAR.insertBefore(oITnew,null);

    }

fxm 23 Posting Pro · Answer 3 · 2010-05-11T13:41:00+00:00

$z in this instance can be 80

I don't think inserting that number of elements is a practical solution.

IMO it will be much easier to include all boxes in the layout but assign the ones which will be "added" dynamically to a class .later { display:none; } and give each one a sequential Id.

Now onclick doesn't have to insert a new element it only has to reveal an existing one

document.getElementById("add"+N).style.display = "block";