JavaScript - How To Add Text Fields To Form Dynamicly And Send To Database

Several posts here are almost what I need, but I can't put it all together.... thank you for your help, this is for a pet rescue charity!

When selecting "mini" option, my form should should only allow typing in 6 out of 10 text input fields (the first 3 on the front, and the first 3 on the back too if its selected). Other sizes would allow typing in all 10. The NAME must be the same due to the shoppingcart used, but ID can be different. Also, if mini the maxlength of each should be 14, other sizes each maxlength is different.

I will try to put the relevant code below, but one entire form is he
http://wooftags.com/bone-iframe.html

Code:

<select name="product1[]">
  <option value="mini">mini</option>
  <option value="small">small</option>
  <option value="medium">medium</option>
  <option value="large">large</option>
    </SELECT>

        <input type="text" name="product1[]2" size="14" maxlength="14" style='text-transform: uppercase;' onblur="this.value=this.value.toUpperCase()" />
        <br />
        <input type="text" name="product1[]2" size="18" maxlength="18" style='text-transform: uppercase;' onblur="this.value=this.value.toUpperCase()" />
        <br />
        <input type="text" name="product1[]2" size="20" maxlength="20" style='text-transform: uppercase;' onblur="this.value=this.value.toUpperCase()" />
        <br />
        <input type="text" name="product1[]2" size="25" maxlength="25" style='text-transform: uppercase;' onblur="this.value=this.value.toUpperCase()" />
        <br />
        <input type="text" name="product1[]2" size="20" maxlength="20" style='text-transform: uppercase;' onblur="this.value=this.value.toUpperCase()" />


      <INPUT TYPE="HIDDEN" NAME="price2" VALUE="1">
          <input id="back1" type="text" name="product2[]2" size=14 maxlength=14 style='text-transform: uppercase;' onblur="this.value=this.value.toUpperCase()" disabled="disabled"/>
          <br />
          <input id="back2" type="text" name="product2[]2" size=18 maxlength=18 style='text-transform: uppercase;' onblur="this.value=this.value.toUpperCase()" disabled="disabled"/>
          <br />
          <input id="back3" type="text" name="product2[]2" size=20 maxlength=20 style='text-transform: uppercase;' onblur="this.value=this.value.toUpperCase()" disabled="disabled"/>
          <br />
          <input id="back4" type="text" name="product2[]2" size=25 maxlength=25 style='text-transform: uppercase;' onblur="this.value=this.value.toUpperCase()" disabled="disabled"/>
          <br />
          <input id="back5" type="text" name="product2[]2" size=20 maxlength=20 style='text-transform: uppercase;' onblur="this.value=this.value.toUpperCase()" disabled="disabled"/>

I am working on a page where the user will select a location from a dynamically generated dropdown list.

I was able to create the php multidimensional array (tested and working) from a MySql database using the users information at login, but I'm having problems converting it to a javascript multidimensional array. I need to be able to access variables that I can pass to a number of text fields within an html form.

For instance, if a user belongs to a company with multiple addresses, I need to be able to let them select the address they need to prepopulate specific text fields.

php array creation:
Code:

if ($row_locations) 
{ 
	while ($row_locations = mysql_fetch_assoc($locations))  
	{ 
		$mail[$row_locations['comp_id']]=array('mailto'=>$row_locations['mailto'], 'madd'=>$row_locations['madd'], 'madd2'=>$row_locations['madd2'], 'mcity'=>$row_locations['mcity'], 'mstate'=>$row_locations['mstate'], 'mzip'=>$row_locations['mzip'], 'billto'=>$row_locations['billto'], 'badd'=>$row_locations['badd'], 'badd2'=>$row_locations['badd2'], 'bcity'=>$row_locations['bcity'], 'bstate'=>$row_locations['bstate'], 'bzip'=>$row_locations['bzip']);
	} 
}

javascript function - this should create the array and send variables to text fields.
Code:

function updateAddress() {
var mail = $.parseJSON(<?php print json_encode(json_encode($mail)); ?>);
{
if (comp_id in mail) {
document.getElementById('mailto').value=mail.comp_id.mailto.value;
document.getElementById('madd').value=mail.comp_id.madd.value;
document.getElementById('madd2').value=mail.comp_id.madd2.value;
document.getElementById('mcity').value=mail.comp_id.mcity.value;
document.getElementById('mstate').value=mail.comp_id.mstate.value;
document.getElementById('mzip').value=mail.comp_id.mzip.value;
} else {
document.getElementById('mailto').value='';
document.getElementById('madd').value='';
document.getElementById('madd2').value='';
document.getElementById('mcity').value='';
document.getElementById('mstate').value='';
document.getElementById('mzip').value='';
}
}
}

Where is this breaking?
Thanks in advance.

Hi,
I have a working contact form with 3 of the fields requiring validation and they work well.
I have added extra fields to the form (StatusClass, Project, CameFrom). These 3 fields return fine but I need to validated them.
My problem is that the new fields don't show in the behaviours/validate panel even though they are within the form tag.
Can anyone give me any help and advice as to how to accomplish this?
Many thanks
Code below....

Code:

<script type="text/JavaScript">
<!--
function MM_findObj(n, d) { //v4.01
  var p,i,x;  if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
    d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
  if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
  for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
  if(!x && d.getElementById) x=d.getElementById(n); return x;
}

function MM_validateForm() { //v4.0
  var i,p,q,nm,test,num,min,max,errors='',args=MM_validateForm.arguments;
  for (i=0; i<(args.length-2); i+=3) { test=args[i+2]; val=MM_findObj(args[i]);
    if (val) { nm=val.name; if ((val=val.value)!="") {
      if (test.indexOf('isEmail')!=-1) { p=val.indexOf('@');
        if (p<1 || p==(val.length-1)) errors+='- '+nm+' must contain an e-mail address.\n';
      } else if (test!='R') { num = parseFloat(val);
        if (isNaN(val)) errors+='- '+nm+' must contain a number.\n';
        if (test.indexOf('inRange') != -1) { p=test.indexOf(':');
          min=test.substring(8,p); max=test.substring(p+1);
          if (num<min || max<num) errors+='- '+nm+' must contain a number between '+min+' and '+max+'.\n';
    } } } else if (test.charAt(0) == 'R') errors += '- '+nm+' is required.\n'; }
  } if (errors) alert('The following error(s) occurred:\n'+errors);
  document.MM_returnValue = (errors == '');
}
//-->
</script

>


Code:

<form action="contact_us.asp" method="post" name="contact" target="_parent" class="contentText" id="contact" onsubmit="MM_validateForm('FullName','','R','Telephone','','RisNum','Email','','RisEmail');return document.MM_returnValue">
      <table width="100%" border="0" cellspacing="5" cellpadding="0">
        <tr>
          <td width="54%" class="subHeader">Full Name* </td>
          <td width="46%" class="subHeader"><input name="FullName" type="text" id="FullName" /></td>
        </tr>
        <tr>
          <td class="subHeader">Company Name </td>
          <td class="subHeader"><input name="CompanyName" type="text" id="CompanyName" /></td>
        </tr>
        <tr>
          <td class="subHeader">Address</td>
          <td class="subHeader"><input name="Address1" type="text" id="Address1" /></td>
        </tr>
        <tr>
          <td class="subHeader">&nbsp;</td>
          <td class="subHeader"><input name="Address2" type="text" id="Address2" /></td>
        </tr>
        <tr>
          <td class="subHeader">&nbsp;</td>
          <td class="subHeader"><input name="Address3" type="text" id="Address3" /></td>
        </tr>
        <tr>
          <td class="subHeader">Postcode</td>
          <td class="subHeader"><input name="Postcode" type="text" id="Postcode" /></td>
        </tr>
        <tr>
          <td class="subHeader">Telephone Number* </td>
          <td class="subHeader"><input name="Telephone" type="text" id="Telephone" /></td>
        </tr>
        <tr>
          <td class="subHeader">Mobile Number </td>
          <td class="subHeader"><input name="Mobile" type="text" id="Mobile" /></td>
        </tr>
        <tr>
          <td height="25" class="subHeader">Email Address* </td>
          <td class="subHeader"><input name="Email" type="text" id="Email" /></td>
        </tr>
        <tr>
          <td height="30" class="subHeader">Status*</td>
          <td class="subHeader"><select name="StatusClass" id="StatusClass">
            <option selected="selected">Please Choose</option>
            <option>Architect</option>
            <option>Interior Designer</option>
            <option>Private Client</option>
            <option>Student</option>
            <option>Trade Enquiry</option>
          </select>          </td>
        </tr>
        <tr>
          <td height="23" class="subHeader">Project*</td>
          <td class="subHeader"><select name="Project" size="1" id="Project">
            <option selected="selected">Please Choose</option>
            <option>Planning Stages</option>
            <option>New Build</option>
            <option>Refurbishment</option>
            <option>Barn Conversion</option>
            <option>No project - information only</option>
          </select>          </td>
        </tr>
        <tr>
          <td height="37" class="subHeader">How did you hear about us?*</td>
          <td class="subHeader"><select name="CameFrom" size="1" id="CameFrom">
            <option selected="selected">Please Choose</option>
            <option>Web Search</option>
            <option>Grand Designs</option>
            <option>Living Etc</option>
            <option>Home Building &amp; Renovation</option>
            <option>Architect</option>
            <option>Friend/Family</option>
            <option>Magazine/Editorial</option>
            <option>Newspaper Article</option>
            <option>Trade Show/Exhibition</option>
            <option>Other</option>
          </select></td>
        </tr>
        <tr>
          <td height="24" class="subHeader">Brochure Request </td>
          <td class="subHeader"><input name="Brochure" type="checkbox" id="Brochure" value="checkbox" /></td>
        </tr>
        <tr>
          <td class="subHeader">Message</td>
          <td class="subHeader"><span class="style4">
            <textarea name="Message" id="Message"></textarea>
          </span></td>
        </tr>
        <tr>
          <td class="subHeader">&nbsp;</td>
          <td class="subHeader"><input name="Submit" type="submit" value="Submit" /></td>
        </tr>
        <tr>
          <td colspan="2" class="subHeader"><em>* Required fields</em></td>
        </tr>
      </table>
	  </form>

I am having a problem sending info to a database. I have set up drag and drop with HTML5 and it is working, but I need to be able to get the values of the images uploaded to the database when each one is dropped into a dropzone. I don't need to upload the images to the database - just need the value of each image sent to it.

Here is the HTML:
Code:

<ul id="images">
  <li><a id="1" draggable="true"><img src="images/1.jpg" value = "flower"></a></li>
  <li><a id="2" draggable="true"><img src="images/2.jpg" value = "boy"></a></li>
  <li><a id="3" draggable="true"><img src="images/3.jpg" value = "girl"></a></li>
</ul>

<form name = "objects" id="form" action = "form.php" method = "post">

<div class="drop_zones">
  <div class="drop_zone" id="drop_zone1" droppable="true" type = "text" name =    "drop_zone1">
  </div>

  <div class="drop_zone" id="drop_zone2"  droppable="true" type = "text" name = "drop_zone2">
  </div>

  <div class="drop_zone" id="drop_zone3" droppable="true" type = "text" type = "file" name = "drop_zone3">
  </div>
</div>

and the javascript
Code:

var addEvent = (function () {
if (document.addEventListener) {
return function (el, type, fn) {
  if (el && el.nodeName || el === window) {
    el.addEventListener(type, fn, false);
  } else if (el && el.length) {
    for (var i = 0; i < el.length; i++) {
      addEvent(el[i], type, fn);
    }
  }
 };
} else {
return function (el, type, fn) {
  if (el && el.nodeName || el === window) {
    el.attachEvent('on' + type, function () { return fn.call(el, window.event); });
  } else if (el && el.length) {
    for (var i = 0; i < el.length; i++) {
      addEvent(el[i], type, fn);
     }
   }
 };
 }
})();


var dragItems;
updateDataTransfer();
var dropAreas = document.querySelectorAll('[droppable=true]');


function cancel(e) {
if (e.preventDefault) {
e.preventDefault();
}
return false;
}


function updateDataTransfer() {
dragItems = document.querySelectorAll('[draggable=true]');
for (var i = 0; i < dragItems.length; i++) {
    addEvent(dragItems[i], 'dragstart', function (event) {
        event.dataTransfer.setData('obj_id', this.id);
        return false;
    });
}
}


 addEvent(dropAreas, 'dragover', function (event) {
if (event.preventDefault) event.preventDefault();


this.style.borderColor = "#000";
return false;
});


addEvent(dropAreas, 'dragleave', function (event) {
if (event.preventDefault) event.preventDefault();


this.style.borderColor = "#ccc";
return false;
});


 addEvent(dropAreas, 'dragenter', cancel);

// drop event handler
addEvent(dropAreas, 'drop', function (event) {
if (event.preventDefault) event.preventDefault();

// get dropped object
var iObj = event.dataTransfer.getData('obj_id');
var oldObj = document.getElementById(iObj);

// get its image src
var oldSrc = oldObj.childNodes[0].src;
oldObj.className += 'hidden';

var oldThis = this;

setTimeout(function() {
    oldObj.parentNode.removeChild(oldObj); // remove object from DOM

    // add similar object in another place
    oldThis.innerHTML += '<a id="'+iObj+'" draggable="true"><img src="'+oldSrc+'" />    </a>';

    // and update event handlers
    updateDataTransfer();

    // little customization
    oldThis.style.borderColor = "#ccc";
}, 500);

return false;
});

and the php
PHP Code:
<?php 

$sql="INSERT INTO table_answers (drop_zone1, drop_zone2, drop_zone3) VALUES      ('$_POST[drop_zone1]','$_POST[drop_zone2]','$_POST[drop_zone3]')";

if (!mysql_query($sql,$db))
{
    die('Error: ' . mysql_error());
}

echo $_POST["drop_zone1"]; 
echo $_POST["drop_zone2"]; 
echo $_POST["drop_zone3"]; 

?>


There is no error, it is not registering that there is something in the dropzone - nothing is being sent through the php. I have tried doing it with just text(instead of the image) and that won't work either. I am unsure of how to target the value of each image through javascript/php.

Please help if you can,
Thanks