Javascript creating new form fields, woes

synne · April 9, 2012

I hope you can follow this, sorry if not:

I am trying to create a form that will allow for adding form fields.

The javascript below (last code section) allows me to do this.

However, If I create 6 fields

<Indent Level1>
     <Indent Level2>
          <Indent Level3>
<Indent Level1>
     <Indent Level2>
          <Indent Level3>

and it builds the array as such:

array(4) {
  ["textfield1"]=>
  string(13) "Indent Level1"
  ["textfield2"]=>
  string(13) "Indent Level2"
  ["textfield3"]=>
  string(13) "Indent Level3"
  ["pdfSubmit"]=>
  string(6) "Submit"
}

Its repeating the input field name/id as textfield1 if the indent level =1, textfield2 if indent =2, and so on ---duplicates are ignored, hence only half of the fields (if reused indent levels)

Any ideas on how to make this thing provide unique names/ids?

Somehow count the parent field number and occurance?

such as:

(textfield{parent}-{indent}-{occurance})

<Indent Level1> = textfield01-01-01
     <Indent Level2> = textfield01-02-01
     <Indent Level2> = textfield01-02-02
          <Indent Level3> = textfield01-03-01
<Indent Level1> = textfield02-01-01
     <Indent Level2> = textfield02-02-01

It doesnt have to be this way.

I just need all fields to post in order as seen on the screen. I will use the indent level as a class for proper formating by truncating and disecting the textfield01-01-01 to get indent level.

Eg:

<table width="100%" border="0" cellspacing="0" cellpadding="0">
  <tr>
    <td> </td>
    <td class="' .$indent. '"><h3>' .$text. '</h3></td>
  </tr>
</table>

There is probably a way better way of doing all of this... But I dont know where I'm going ;(

My entire html/javascript:

<html>
<head>
<title>test</title>
<script>
var maxFieldWidth = "500";


function getNextTextfield(element)
{
var tempElement = element;
while(tempElement.nextSibling)
{
tempElement = tempElement.nextSibling;
if(tempElement.type == 'text')
{
return tempElement;
}
}
}
function getNextSameLevelField(element, currentFieldNumber)
{
var nextElement = getNextTextfield(element);

while(nextElement)
{
var elementClassName = nextElement.className; // this is the class name of the button that was clicked
var fieldNumber = elementClassName.substr(3, elementClassName.length);
if(fieldNumber <= currentFieldNumber)
return nextElement;
nextElement = getNextTextfield(nextElement);
}
}

Node.prototype.insertAfter = function(newNode, refNode) {
if(refNode.nextSibling) {
return this.insertBefore(newNode, refNode.nextSibling);
} else {
return this.appendChild(newNode);
}
}

function addRow(element, indentFlag)
{
var elementClassName = element.className; // this is the class name of the button that was clicked
var fieldNumber = elementClassName.substr(3, elementClassName.length);

// current textfield width, take off the px on the end
var fieldWidth = document.getElementById("textfield" + fieldNumber).style.width;
fieldWidth = fieldWidth.substr(0, fieldWidth.indexOf("px"));

// get the new field number (incremented)

var newFieldNumber = fieldNumber;

// get new field width in case we are indenting
var newFieldWidth = fieldWidth;
if(indentFlag)
{
// newFieldWidth = fieldWidth - (newFieldNumber * 10);
newFieldNumber = parseInt(fieldNumber) + 1;
newFieldWidth = fieldWidth - (newFieldNumber - fieldNumber) * 10;


}

// create text field
var textfield = document.createElement("input");
textfield.type = "text";
textfield.setAttribute("value", "Indent Level" + newFieldNumber);
textfield.id = "textfield" + newFieldNumber;
textfield.name = "textfield" + newFieldNumber;
textfield.setAttribute("style","width:" + newFieldWidth + "px; margin-left: " + (maxFieldWidth - newFieldWidth));
textfield.className = "row" + newFieldNumber;

// create textarea
var textarea = document.createElement("textarea");
textarea.type = "textarea";
textarea.setAttribute("value", "Indent Level" + newFieldNumber);
textarea.id = "textarea" + newFieldNumber;
textarea.setAttribute("style","width:" + newFieldWidth + "px; margin-left: " + (maxFieldWidth - newFieldWidth));
textarea.className = "row" + newFieldNumber;

// create buttons
var button1 = document.createElement("input");
button1.type = "button";
button1.setAttribute("value", "++");
button1.setAttribute("onclick", "addRow(this, false)");
button1.className = "row" + newFieldNumber;

var button2 = document.createElement("input");
button2.type = "button";
button2.setAttribute("value", "+");
button2.setAttribute("onclick", "addRow(this, true)");
button2.className = "row" + newFieldNumber;

var button3 = document.createElement("input");
button3.type = "button";
button3.setAttribute("value", "-");
button3.className = "row" + newFieldNumber;
button3.setAttribute("onclick", "removeRow(this)");

var linebreak = document.createElement("BR");
linebreak.className = "row" + newFieldNumber;


// add elements to page
var rowContainer = element.parentNode; // get the surrounding div so we can add new elements
var nextTextfield = getNextTextfield(element);

if(!indentFlag)
{
nextTextfield = getNextSameLevelField(element, fieldNumber);
}
if(nextTextfield)
{
var lastElement = rowContainer.insertBefore(textfield, nextTextfield);
lastElement = rowContainer.insertAfter(document.createTextNode(" "), lastElement);
lastElement = rowContainer.insertAfter(button1, lastElement);
lastElement = rowContainer.insertAfter(document.createTextNode(" "), lastElement);
lastElement = rowContainer.insertAfter(button2, lastElement);
lastElement = rowContainer.insertAfter(document.createTextNode(" "), lastElement);
lastElement = rowContainer.insertAfter(button3, lastElement);
lastElement = rowContainer.insertAfter(document.createElement("BR"), lastElement);
}
else
{
rowContainer.appendChild(linebreak); // add line break
rowContainer.appendChild(textfield);
rowContainer.appendChild(document.createTextNode(" ")); // add space
rowContainer.appendChild(button1);
rowContainer.appendChild(document.createTextNode(" ")); // add space
rowContainer.appendChild(button2);
rowContainer.appendChild(document.createTextNode(" ")); // add space
rowContainer.appendChild(button3);
}
}

function removeRow(element)
{
var className = element.className;
var parentNode = element.parentNode;
var deletedElement;
var deleteElements = document.getElementsByClassName(className);
for(var i=deleteElements.length - 1; i >= 0; i--)
{
deletedElement = deleteElements[i];
parentNode.removeChild(deleteElements[i]);

if(deletedElement.tagName === 'BR')
{
break; // exit the loop after we delete the BR because if we keep going we'll delete other rows.
}
}
}

</script>
</head>
<body>
<form action="print_POST.php" method="POST">
<fieldset>
<div id="main-container">
<div>
<input type="input" name="textfield1" id="textfield1" value="Indent Level1" style="width:500px;" class="row1" />
<input type="button" class="row1" value="++" onclick="addRow(this, false)">
<input type="button" class="row1" value="+" onclick="addRow(this, true)">
<input type="button" class="row1" value="-" onclick="removeRow(this);">
</div>
</div>
</fieldset>
  <input type="submit" name="pdfSubmit" id="pdfSubmit" value="Submit" tabindex="10" />
  <!--input type="button" class="row1" value="Add New Chapter" onclick="addRow(this, false)"-->
</form>

</body>
</html>

Thank you for your time and help!

The Letter E · April 24, 2012

You're definitely doing too much work. If you want to be able to create an infinite amount of form fields it is best practice to cast the input name as an array.

<code>

<form>

</form>

</code>

Then when you post this form the data would show up as an array and you could access them using their keys, mytext[0], mytext[1]. I think If you refactor your code to work that way it will lean up your js a lot and I think it will be easier for your to solve any remaining problems from there.

E

Jessica · April 24, 2012

Agreed.

Sign In

Javascript creating new form fields, woes

Recommended Posts

synne

Link to comment

Share on other sites

The Letter E

Link to comment

Share on other sites

Jessica

Link to comment

Share on other sites

Join the conversation

Browse

Activity

Important Information