create and store dynamic fields

lu

ludo007 05 Jan, 2010

Hi and sorry for my English I speak french,
I want to use dynamic field in my forms so I use this code

<html>
<div id="readroot" style="display: none">
   <div class="form_item">
      <div class="form_element cf_textbox">
        <label class="cf_label" style="width: 150px;">Product:<span class="star-red">*</span>:</label>
        <input maxlength="150" size="30" title="" id="" name=""    type="text" /> 

  
  </div>
  <div class="form_element cf_textarea">
    <label class="cf_label" style="width: 150px;">Price:</label>
    <textarea class="cf_inputbox" rows="2" id="text_12" title="Please add specific details" cols="24" name="notesurl_1"></textarea>
    
</div>
</div>
<input type="button" value="Remove Product"
      onclick="this.parentNode.parentNode.removeChild(this.parentNode);" /><br /><br />
</div>

<!--end of hidden box -->
<!-- start form -->
<div class="form_item">
  <div class="form_element cf_textbox">
    <label class="cf_label" style="width: 150px;">Product:</label>
    <input maxlength="150" size="30" title="" id="text_4" name="url_1" type="text" />
      
  </div>
  <div class="form_element cf_textarea">
    <label class="cf_label" style="width: 150px;">Price:</label>
    <textarea rows="2" id="text_12" title="Please add specific details" cols="24" name="notesurl_1"></textarea>
    
<div class="cfclear"> <img src="images/system/horizontal-line.png" width="438" height="1" /></div>
      <div class="cfclear"> </div>
</div>
</div>

<span id="writeroot"></span>
<input type="button"  value="Add Product"  onclick="moreFields()" />
</html>

<javascript>

var counter = 0;

function moreFields() {
   counter++;
   var newFields = document.getElementById('readroot').cloneNode(true);
   newFields.id = '';
   newFields.style.display = 'block';
   var newField = newFields.childNodes;
   for (var i=0;i<newField.length;i++) {
      var theName = newField[i].name
      if (theName)
         newField[i].name = theName + counter;
   }
   var insertHere = document.getElementById('writeroot');
   insertHere.parentNode.insertBefore(newFields,insertHere);
}
</javascript>

But I have two problems:
1- I cannot change dynamically the name of the fields. The command “newField[i].name=theName+counter;” doesn’t work. Do you have a command that work.
2- I want to do that for a professor I can add many course, any course have the name and the hour and I have a table of professor that have a 1 to n relationship with the table course. How can store all the course of a professor ? I only need to store in the table of course the id of the professor for all his course. How can I do that?

Gr

GreyHead 05 Jan, 2010

Salut lodo007,

1) I've nothing special to suggest except to debug your JavaScript carefully.

2) Add the professor id into a hidden field in the form.

Bob

lu

ludo007 05 Jan, 2010

for
1) i found that primary firefox and other considers blank and new lines as childnodes, secondly the code

var newField = newFields.childNodes;
   for (var i=0;i<newField.length;i++) {
      var theName = newField[i].name
      if (theName)
         newField[i].name = theName + counter;
   }

doesn't reference to the good childnodes. so i am writing the good code and i will post it here at the end

2) i use the same form to input the professor and all his course so the id of the professor is generated while the form is submit

i expect that i am clear. thanks

lu

ludo007 05 Jan, 2010

i solve my first problem. But i still need help for the second
this javascript code work and modify the name because i use the real path to index these input

<script type="text/javascript">
var counter = 0;

function moreFields() {
   counter++;
   var newFields = document.getElementById('readroot').cloneNode(true);
   newFields.id = '';
   newFields.style.display = 'block';
   var newField = newFields.firstChild.childNodes;
   for (var i=0;i<newField.length;i++) {
   var Field = newField[i].childNodes
   for (var i=0;i<Field.length;i++){
	  var theName = Field[i].name;
      if (theName)
         Field[i].name = theName + counter;
   }
   }
   var insertHere = document.getElementById('writeroot');
   insertHere.parentNode.insertBefore(newFields,insertHere);
}

//window.onload = moreFields;

</script>

Don't forget that i remove any space and new lines to get it work in firefox so my html page look like that

<div id="readroot" style="display:none"><div class="form_item"><div class="form_element cf_textbox"><label class="cf_label" style="width: 150px;">Product:<span class="star-red">*</span>:</label><input maxlength="150" size="30" title="" id="texte" name="rest"  type="text" /></div><div class="form_element cf_textarea"><label class="cf_label" style="width:150px;">Price:</label><textarea class="cf_inputbox" rows="2" id="text_12" title="Please add specific details" cols="24" name="notesurl_1"></textarea></div></div>

lu

ludo007 05 Jan, 2010

for the second problem i read this topics which is closer to my second problem http://www.chronoengine.com/forums.html?cont=posts&f=2&t=16603

But i cannot find a solution when i read it. But this part is interessent if someone can explain a little bit

I changed the processing order to Plugins, Autogenerated, OnSubmit so that OnSubmit Code can retrieve the IDs of the two new records and write them to mydatatags:

I explain a little more i have a form when you enter information about a professor and for this professor i want that you can dynamically add many course that he give and i want that when user save this form the information about the professor is stored in a table and all his course in another table but with the id of the professor just insered.

thanks for thinking about and suggest me a solution 🙂

lu

ludo007 07 Jan, 2010

:cry: 😢 😢
plz help i don't want to find another component. i think that this one is amazing. congrat tto the developper

Gr

GreyHead 09 Jan, 2010

Hi lodo007,

I suggest that you have one form to 'create a new professor' then another to 'add courses'. This removes most of your problems as each form only saves to one database.

In the add courses form you can add a drop down with a list of professors.

Bob