JavaScript - Form Inside Div Problem

Hi all

I have relatively easy task I need to accomplish but as per usual I have very little idea of how to do it. I have done a google search to no avail.

Basically I need to:

1. Pull a value from inside a div
Code:

<div id="number">(invoice #1017)</span>

2. Populate a form input field with that value.

Does this make sense? If not let me know if you need any more info.

Thanks

Hey there everyone

I'm a bit new to javascript and having a bit of a problem.

I have a page users can click to upload a photo. When users click I want a modal window to pop up with a simple file upload input inside it and a submit button. I have this working except that when users click submit nothing happens. I'm using nyroModal http://nyromodal.nyrodev.com/#demos and the code I use is:

Code:

<a href="#test" class="nyroModal"><img src="/img/uploadimage.gif" alt="" /></a>
<div id="test" style="display: none; width: 600px;"> <form id="ImageUploadForm" enctype="multipart/form-data" method="post" action="images/upload" accept-charset="utf-8">
<div style="display:none;">
<input type="hidden" name="_method" value="POST" />
</div>
<div class="input file">
<label for="ImageFileName">File Name</label>
<input type="file" name="data[Image][fileName]" id="ImageFileName" />
</div>
<div class="submit"><input type="submit" value="Upload" />
</div>
</form>
</div>

If I take the code out of the div=id"test" the form appears on the normal page and submits just fine. Inside the test div tho the modal window pops up with the form inside but the submit button does nothing.

Can anyone enlighten me what I'm doing wrong?

Hello everybody

I have a problem with Java Script damned
I want to add the values of several variables in one variable and then use this variable, which contains the values of variables

You can see the following example

HTML Code
PHP Code:
<input type="text" name="txt1" />
<br/>age 
<input type="text" name="txt2" />
<br/><br/>
<input type="button" name="submits" value="send"/> 


Javascript Code
PHP Code:
field = document.getElementsByName('txt1')[0];
field2 = document.getElementsByName('txt2')[0];
submit = document.getElementsByName('submits')[0];
data = 'data=' + field.value + '&data2=' + field2.value + '&submits=' + submit.value;
            
document.getElementsByName('submits')[0].onclick = function(){
    alert(data);
} 


After executing this code I find that the variables are not displayed values
As in the following picture


I want to know what the cause of this problem ?

Having a problem with the name of a select list being passed to a function.

The function is very simple, just supposed to take the selected index of a select list and make another select list the same index.

Putting the actual names of the select lists in the code works fine but i am trying to pass the name as there are 15 of these lists and i dont want to create a function for each of them.

Code:

function SetJobAsAbove(Target,Source)
{
	if (document.form.Target.selectedIndex == 0)
	{
	alert ('You must select a Job in the line above before you can copy it')
	}
	else
	{
	document.form.Target.selectedIndex == document.form.Source.selectedIndex
	}
}

This is link used, L1_Job and L2_job are both select lists.

Code:

<a href="javascript:SetJobAsAbove('L2_Job','L1_Job')">Copy</a>

I have checked form names etc and are case correct etc.

Any help with this would be greatly apprieciated.

Hi People,

I am trying to use a button I found on:
http://monc.se/kitchen/59/scalable-c...ground-colors/

The button setup works fine, but my form doesn't work any more...
That is why I am hoping anyone here can help me out.

Thanks in advance!


The JS I use for my form is:

Code:

var lv_firstName = new LiveValidation('firstName', {onlyOnBlur: true});
lv_firstName.add(Validate.Presence);
lv_firstName.add(Validate.Length, {minimum: 2, maximum: 50});
lv_firstName.add(Validate.Format, {pattern: /^([a-z \-\']+)$/i});

var lv_insertion = new LiveValidation('insertion', {onlyOnBlur: true});
lv_insertion.add(Validate.Length, {minimum: 2, maximum: 50});
lv_insertion.add(Validate.Format, {pattern: /^([a-z \-\']+)$/i});

var lv_lastName = new LiveValidation('lastName', {onlyOnBlur: true});
lv_lastName.add(Validate.Presence);
lv_lastName.add(Validate.Length, {minimum: 2, maximum: 50});
lv_lastName.add(Validate.Format, {pattern: /^([a-z \-\']+)$/i});

var lv_emailaddress = new LiveValidation('emailaddress', {onlyOnBlur: true});
lv_emailaddress.add(Validate.Presence);
lv_emailaddress.add(Validate.Email);

var lv_message = new LiveValidation('message', {onlyOnBlur: true});
lv_message.add(Validate.Presence, {failureMessage: ' '});
lv_message.add(Validate.Length, {minimum: 10, failureMessage: ' '});

The code I use for the button is:

Code:

var btn = {
	init : function() {
        if (!document.getElementById || !document.createElement || !document.appendChild) return false;
        as = btn.getElementsByClassName('btn(.*)');
        for (i=0; i<as.length; i++) {
            if ( as[i].tagName == "INPUT" && ( as[i].type.toLowerCase() == "submit" || as[i].type.toLowerCase() == "button" ) ) {
                var a1 = document.createElement("a");
                a1.appendChild(document.createTextNode(as[i].value));
                a1.className = as[i].className;
                a1.id = as[i].id;
                as[i] = as[i].parentNode.replaceChild(a1, as[i]);
                as[i] = a1;
                as[i].style.cursor = "pointer";
            }
            else if (as[i].tagName == "A") {
                var tt = as[i].childNodes;
            }
            else { return false };
            var i1 = document.createElement('i');
            var i2 = document.createElement('i');
            var s1 = document.createElement('span');
            var s2 = document.createElement('span');
            s1.appendChild(i1);
            s1.appendChild(s2);
            while (as[i].firstChild) {
              s1.appendChild(as[i].firstChild);
            }
            as[i].appendChild(s1);
            as[i] = as[i].insertBefore(i2, s1);
        }
   
		if (document.getElementById('submit_btn')) {
		btn.addEvent(document.getElementById('submit_btn'),'click',function() {
		var form = btn.findForm(this);	
		form.submit();
		});
		}
    },
    findForm : function(f) {
        while(f.tagName != "FORM") {
            f = f.parentNode;
        }
        return f;
    },
    addEvent : function(obj, type, fn) {
        if (obj.addEventListener) {
            obj.addEventListener(type, fn, false);
        }
        else if (obj.attachEvent) {
            obj["e"+type+fn] = fn;
            obj[type+fn] = function() { obj["e"+type+fn]( window.event ); }
            obj.attachEvent("on"+type, obj[type+fn]);
        }
    },
    getElementsByClassName : function(className, tag, elm) {
        var testClass = new RegExp("(^|\s)" + className + "(\s|$)");
        var tag = tag || "*";
        var elm = elm || document;
        var elements = (tag == "*" && elm.all)? elm.all : elm.getElementsByTagName(tag);
        var returnElements = [];
        var current;
        var length = elements.length;
        for(var i=0; i<length; i++){
            current = elements[i];
            if(testClass.test(current.className)){
                returnElements.push(current);
            }
        }
        return returnElements;
    }
}

btn.addEvent(window,'load', function() { btn.init();} );

HTML:

Code:

<p><input type="submit" value="Formulier verzenden" class="btn blue" id="submit_btn" /></p>

Hi guys I'm having trouble with my javascript coding. The form works fine in IE but does not work in firefox I've been pulling my hair out overt his for the last hour and can't figure it out.

Code:

<script type="text/javascript">

<!--

function validate_form ( )
{
	valid = true;

        if ( document.getElementById.rego_form.First_name.value == "" )
        {
        	//Alert the user to
                alert ( "Please fill in your first name." );
                valid = false;
        }

        if ( document.getElementById.rego_form.Last_name.value == "" )
        {
        	//Alert the user to
                alert ( "Please fill in your last name." );
                valid = false;
        }
		//Check Age 
		if (parseInt(document.getElementById.rego_form.Age.value) < 16 || parseInt(document.rego_form.Age.value) > 90)
		{
			//Alert the user to
			alert ("Please enter an age between 16 and 90");

		return false;
}
        

        return valid;

}

//-->

</script>

This is the fields I would like them to enter into but when I do this in IE you can't click on the top 3 fields to enter data
Code:

<form name="rego_form" method="post" action=""
onSubmit="return validate_form ( );">

<h1>Please Fill Out Your Details Below</h1>

<p>Email: <input type="text" name="Email"></p>

<p>First Name: <input type="text" name="First_name"></p>

<p>Surame: <input type="text" name="Last_name"></p>

<p>Age: <input type="text" name="Age"></p>

<p>Address: <input type="text" name="Address"></p>

<p>City: <input type="text" name="City"></p>

<p>City: <input type="text" name="City"></p>

<p><input type="submit" name="send" value="Send Details"></p>

</form>

Any help would be greatly appreciated!

Hello,

I don't see what the problem is with my form validation script. It does not validate. Please point it out to me.

Code:

<script type="text/javascript">
function validateForm()
{
var x=document.forms["myForm"]["name"].value;
if (x==null || x=="")
  {
  alert("First name must be filled out");
  return false;
  }

var x=document.forms["myForm"]["email"].value;
var atpos=x.indexOf("@");
var dotpos=x.lastIndexOf(".");
if (atpos<1 || dotpos<atpos+2 || dotpos+2>=x.length)
  {
  alert("Please enter a valid email address");
  return false;
  }

var x=document.forms["myForm"]["message"].value;
if (x==null || x=="")
  {
  alert("You have not entered a message");
  return false;
  }
}
</script>

html

Code:

<form name="myForm" action="contact.php" onsubmit="return validateForm()" method="post">
First name: 
</p>
<input type="text" name="name">
</p>
Email address:
</p>
<input type="text" name="email">
</p>
Subject: 
</p>
<input type="text" name="subject">
</p>
Message:
</p>
<textarea name="message" rows="15" cols="50"></textarea>
</p>
<input type="submit" value="Submit">
</form>

the script is in the <head> section and html in the <body>.

Thank you.

Working of JS form validation now, this is my code:

Code:

<html>

<head>

<script>

function notEmpty(elem, helperMsg){
	if(elem.value.length == 0){
		alert(helperMsg);
		elem.focus(); // set the focus to this input
		return false;
	}
	return true;
}

</script>
</head>

<body>

<form action="mailto:fonzhende1@yahoo.com" method="post"> 
                                  
                                               <table>
                                                                    
                                                                  <tr>
                                                                                    <td>Name:</td>
                                                                                    <td>
                                                                                                   <input type="text" name="name" value="" />
                                                                                    </td>
                                                                  </tr>
                                                                  <tr> 
                                                                                    <td>email address:</td>
                                                                                    <td> 
                                                                                                  <input type="text" name="email" value="" />
                                                                                    </td>
                                                                  </tr>
                                                                  
                                                                 <tr>
                                                                                   <th></th>
                                                                                   <td> 
                                                                                                  <input type="submit" value="Submit" />
                                                                                   </td>
                                                                </tr>
                                                 </table>  

                                                                <textarea rows="2" cols="20"> Test area </textarea><br/>
                                                                <br/>
                                                 <select>
                                                                <option value="volvo">Volvo</option>
                                                                <option value="saab">Saab</option>
                                                                <option value="mercedes">Mercedes</option>
                                                                <option value="audi">Audi</option>
                                                 </select><br/>
                                                 <br/>
                                                 <input type="radio" name="group1" value="Milk"> Milk<br>
                                                 <input type="radio" name="group1" value="Butter" checked> Butter<br>

                                                    
 </form>


</body>
</html>

Problem is when I submit the form I am getting what you see in the attachment, I guess this email form which pops up needs to be directed to Yahoo Hosting then redirected from there back to me?

Anyway I would like if it the email could be sent directly to me without this form popping up, is that possible? Also, when I submit the form with the fields empty I am not getting the error message?

hello, i have a form in my header that is hidden and i have it show when you click a link, the problem is, when the form appears, it pushes everything down below it, any ideas on how to get around this?

Hi there,
Our development team created a page using JS to submit a form. It works fine in IE6... but not in IE8 nor FF3. They can't seem to detect why, so I'm posting this in the hopes that someone will be able to let me know... so that I can tell them. Man!

Here is the code that they use:

Code:

function doSubmit() {
	var form = document.RegistrationForm;
	form.actionType.value = "userInfo";
	form.action = "/fdl/benefitsmanager/registration/UserInfoSubmit.do";
	var prefix = document.getElementById('userInfo.prefix')[document.getElementById('userInfo.prefix').selectedIndex].text; 
	var suffix = document.getElementById('userInfo.suffix')[document.getElementById('userInfo.suffix').selectedIndex].text; 
	document.getElementById('userInfo.prefixString').value = prefix;
	document.getElementById('userInfo.suffixString').value = suffix;

	form.submit();
}

It's called by clicking the below image:

Code:

<a href="javascript:doSubmit();"><img src="../images/buttons/submit.gif" alt="Submit" width="108" height="23" border="0"></a>

The above code works fine in IE6 and lets the user submit the form. However, in FF3 nothing happens when the image is clicked and I get the following error using Firebug:

document.getElementById("userInfo.prefix") is null
var prefix = document.getElementById(...rInfo.prefix').selectedIndex].text;

And in IE8 nothing happens when the image is clicked and it just tells me that there is an error.

I don't have access to the code, so I can't play around with manipulating the JS. Darn! However, can anyone see what might be causing the error in modern browsers? I'm a bit surprised it's IE8 and FF3 that are having issues... as IE6 is normally the least forgiving browser.

Thanks so much,
CO

please see http://bit.ly/i5TwmL for what I am working on.

You can see that when selecting 'Contact' from the top navigation a light-box (fancybox) with a contact form opens, this form can be filled and when the submit button is pressed the content of the form is emailed to myself.

However.... The 'Thank you message' is not appearing in the light-box as I would like it to and I cannot work out how to do this.

Any suggestions muchly appreciated!

I hope someone can help with this. I needed a form for my website and found one i liked so used there code, however i cannot get mine to work properly, i believe the problem exists here, however not sure what to do with it:
<form action="contact.htm" method="post" name="contactForm" onsubmit="return validateForm()" >

<p><strong>Contact information: </strong></p>

<input type=hidden name="httpref" value="http://www.karenshealthandfitness.com/contact.htm">

also do i need a php file with this or something along those lines? Sorry if that sound lame, i am not the greatest at this just fumble my way through.

hi again i hope somebody will help me to fix this problem I have a form which has not submit button but two options either to pay or to just submit so i use this in my code:

Code:

td><input type="button" value="Payment" onClick="this.form.action='payments.php';this.form.submit()" />
      <input type="button" value="More Information" onClick="this.form.action='confirmation.php';this.form.submit()" /></td>

so when they click on "Payments" they move to "payments.php and when they click on "More Information" they move to confirmation.php. Now my problem is i wants to validated it either through JavaScript or PHP but there is only one way i know with submit method. here i am using onClick function to move to other page. Please if somebody can help i much appericiate. here is the complete code of form i try to use PHP validation here but no luck please help me

Code:

<?php 
if ($_POST['submit']) {

$title = $_POST['title'];
$name = $_POST['name'];
$insurance = $_POST['insurance'];
$address = $_POST['address'];
$phone = $_POST['phone'];
$email = $_POST['title'];

$error = "";

	if (!$title)
	$error = $error. "Title <br />";
	if (!$name)
	$error = $error. "Name <br />";
	if (!$insurance)
	$error = $error. "National Insurance Number <br />";
	if (!$address)
	$error = $error. "Address <br />";
	if (!$phone)
	$error = $error. "Telephone Number <br />";
	if (!$email)
	$error = $error. "Email Address <br />";
	if (!$error !="")
	  echo "Please Fill in The Following Required Fields <br /> $error";
	  else {
	  return $_POST['submit'];
	  }
}
?>
<div id="form" style="margin: 90px;">

<form action="" method="POST">
 <table>
		<tr>
		<td align="right">
		Title:<span style="color:red;">*</span>
		</td>
		<td>
		   <input  style="border:1px solid #4088b8;" type="text" size="29" name="title">
		</td>
		</tr>
		<tr>
		<td align="right">
		Name:<span style="color:red;">*</span>
		</td>
		<td>
		   <input  style="border:1px solid #4088b8;" type="text" size="29" name="name">
		</td>
		</tr>
		<tr>
		<td align="right">
		National Insurance<br /> Number:<span style="color:red;">*</span>
		</td>
		<td>
		   <input  style="border:1px solid #4088b8;" type="text" size="29" name="insurance">
		</td>
		</tr>
		<tr>
		<td align="right">
		Address:<span style="color:red;">*</span>
		</td>
		<td>
		   <input  style="border:1px solid #4088b8;" type="text" size="29" name="address">
		</td>
		</tr>	
		<tr>
		<td align="right">
		Tleephone Number:<span style="color:red;">*</span>
		</td>
		<td>
		   <input  style="border:1px solid #4088b8;" type="text" size="29" name="phone">
		</td>
		</tr>
		<tr>
		<td align="right">
		Email:<span style="color:red;">*</span>
		</td>
		<td>
		   <input  style="border:1px solid #4088b8;" type="text" size="29" name="email">
		</td>
		</tr>
		<tr>
		<td align="right">
		CSCS Registration Number:
		</td>
		<td>
		   <input  style="border:1px solid #4088b8;" type="text" size="29" name="registration">
		</td>
		</tr>
		<tr>
		<td align="right">
		Special Accommodations:
		</td>
		<td>
		   <textarea  style="border:1px solid #4088b8;" type="textarea" cols="30" rows="5" name="comments">
		   
		   </textarea>
		</td>
		</tr>
		<tr><td>&nbsp;</td></tr>
		<tr><td>&nbsp;</td>
		<td><input type="button" value="Payment" onClick="this.form.action='payments.php';this.form.submit()" />
		<input type="button" value="More Information" onClick="this.form.action='confirmation.php';this.form.submit()" /></td>
		</tr>
 </table>
</form>
</div>

Can any of you nice people out there help

I am writing a from with user details input

E.G.
House Number
Street
City
user can input the house number and the street
but the city is restricted to only the city I live in



How do I make the input address1 equal house number + a space + street + a space + city, I am a beginner wrote this to learn but have got stuck!

The code

Code:

<form action="#" onsubmit="showLocation(); return false;">
<table width=780 border=0 align=center summary="">
	<tr>
		<td colspan=3><font size="+1"><b><div style="text-align: center">just some test here</div></b></font></td>
	</tr>
	<tr>
		<td><b>Pick Up Address</b></td>
		<td>House Number</td>
		<td><input type="text" name="punum" size="40" maxlength="5" /></td>
	</tr>
	<tr>
		<td><!-- &nbsp; --></td>
		<td>Street</td>
		<td><input type="text" name="pustreet" size="40" maxlength="20" /></td>
	</tr>
	<tr>
		<td><!-- &nbsp; --></td>
		<td>City</td>
		<td><select name="pucity" size="1"><option value="Cardiff" selected> Cardiff</option></select></td>
	</tr>
	<tr>
		<td><!--  --></td>
		<td>Post Code</td>
		<td><input type="text" name="pupostcode" size="40" maxlength="10"></td>
	</tr>
	<tr>
		<td><b>ADDRESS 1</b></td>
		<td>Pick Up Address</td>
		<td><input type="text" name="address1" value="Contents of punum and pustreet in here" /></td>
	</tr>
	<tr>
		<td></td>
		<td>Pick Up Time</td>
		<td><select name="putime" size="1">
	<option value="00:00"> 00:00</option>
	<option value="00:15"> 00:15</option>
	<option value="00:30"> 00:30</option>
	<option value="00:45"> 00:45</option>
	<option value="01:00"> 01:00</option>
	<option value="01:15"> 01:15</option>
	<option value="01:30"> 01:30</option>
	<option value="01:45"> 01:45</option>
	<option value="02:00"> 02:00</option>
	<option value="02:15"> 02:15</option>
	<option value="02:30"> 02:30</option>
	<option value="02:45"> 02:45</option>
	<option value="03:00"> 03:00</option>
	<option value="03:15"> 03:15</option>
	<option value="03:30"> 03:30</option>
	<option value="03:45"> 03:45</option>
	<option value="04:00"> 04:00</option>
	<option value="04:15"> 04:15</option>
	<option value="04:30"> 04:30</option>
	<option value="04:45"> 04:45</option>
	<option value="05:00"> 05:00</option>
	<option value="05:15"> 05:15</option>
	<option value="05:30"> 05:30</option>
	<option value="05:45"> 05:45</option>
	<option value="06:00"> 06:00</option>
	<option value="06:15"> 06:15</option>
	<option value="06:30"> 06:30</option>
	<option value="06:45"> 06:45</option>
	<option value="07:00"> 07:00</option>
	<option value="07:15"> 07:15</option>
	<option value="07:30"> 07:30</option>
	<option value="07:45"> 07:45</option>
	<option value="08:00"> 08:00</option>
	<option value="08:15"> 08:15</option>
	<option value="08:30"> 08:30</option>
	<option value="08:45"> 08:45</option>
	<option value="09:00"> 09:00</option>
	<option value="09:15"> 09:15</option>
	<option value="09:30"> 09:30</option>
	<option value="09:45"> 09:45</option>
	<option value="10:00"> 10:00</option>
	<option value="10:15"> 10:15</option>
	<option value="10:30"> 10:30</option>
	<option value="10:45"> 10:45</option>
	<option value="11:00"> 11:00</option>
	<option value="11:15"> 11:15</option>
	<option value="11:30"> 11:30</option>
	<option value="11:45"> 11:45</option>
	<option value="12:00"> 12:00</option>
	<option value="12:15"> 12:15</option>
	<option value="12:30"> 12:30</option>
	<option value="12:45"> 12:45</option>
	<option value="13:00"> 13:00</option>
	<option value="13:15"> 13:15</option>
	<option value="13:30"> 13:30</option>
	<option value="13:45"> 13:45</option>
	<option value="14:00"> 14:00</option>
	<option value="14:15"> 14:15</option>
	<option value="14:30"> 14:30</option>
	<option value="14:45"> 14:45</option>
	<option value="15:00"> 15:00</option>
	<option value="15:15"> 15:15</option>
	<option value="15:30"> 15:30</option>
	<option value="15:45"> 15:45</option>
	<option value="16:00"> 16:00</option>
	<option value="16:15"> 16:15</option>
	<option value="16:30"> 16:30</option>
	<option value="16:45"> 16:45</option>
	<option value="17:00"> 17:00</option>
	<option value="17:15"> 17:15</option>
	<option value="17:30"> 17:30</option>
	<option value="17:45"> 17:45</option>
	<option value="18:00"> 18:00</option>
	<option value="18:15"> 18:15</option>
	<option value="18:30"> 18:30</option>
	<option value="18:45"> 18:45</option>
	<option value="19:00"> 19:00</option>
	<option value="19:15"> 19:15</option>
	<option value="19:30"> 19:30</option>
	<option value="19:45"> 19:45</option>
	<option value="20:00"> 20:00</option>
	<option value="20:15"> 20:15</option>
	<option value="20:30"> 20:30</option>
	<option value="20:45"> 20:45</option>
	<option value="21:00"> 21:00</option>
	<option value="21:15"> 21:15</option>
	<option value="21:30"> 21:30</option>
	<option value="21:45"> 21:45</option>
	<option value="22:00"> 22:00</option>
	<option value="22:15"> 22:15</option>
	<option value="22:30"> 22:30</option>
	<option value="22:45"> 22:45</option>
	<option value="23:00"> 23:00</option>
	<option value="23:15"> 23:15</option>
	<option value="23:30"> 23:30</option>
	<option value="23:45"> 23:45</option>	
</select> <font color="#FF0000">24 Hr</font>
</td>
	</tr>
	<tr>
		<td><b>Customer Details</b></td>
		<td>First Name</td>
		<td><input type="text" name="fname" size="40" maxlength="20"></td>
	</tr>
	<tr>
		<td><!-- --></td>
		<td>Last Name</td>
		<td><input type="text" name="lname" size="40" maxlength="20"></td>
	</tr>
	<tr>
		<td><!--  --></td>
		<td>Telephone Number</td>
		<td><input type="text" name="tel1" size="40" maxlength="20"></td>
	</tr>
	<tr>
		<td><b>Destination Address</b></td>
		<td>House Number</td>
		<td><input type="text" name="dnum" size="40" maxlength="5"></td>
	</tr>
	<tr>
		<td><!--  --></td>
		<td>Street</td>
		<td><input type="text" name="dstreet" size="40" maxlength="20"></td>
	</tr>
	<tr>
		<td><!--  --></td>
		<td>City</td>
		<td><select name="dcity" size="1"> 
	<option value="Barry"> Barry</option>
	<option value="Bridgend"> Bridgend</option>
	<option value="Caerphilly"> Caerphilly</option>
	<option value="Cardiff"> Cardiff</option>
	<option value="Newport"> Newport</option>
	<option value="Pontypridd"> Pontypridd</option>
</select></td>
	</tr>
	<tr>
		<td><!--  --></td>
		<td>Post Code</td>
		<td><input type="text" name="dpostcode" size="40" maxlength="10">
		<br></td>
	</tr>
	<tr>
		<td><b>ADDRESS 2</b></td>
		<td>Destination</td>
		<td><input type="text" name="address2" value="Birmingham Airport UK" /></td>
	</tr>
	<tr>
		<td><!--  --></td>
		<td><!--  --></td>
		<td><input type="submit" value="Get Tariff" /></td>
	</tr>
</table>
<!-- END OF FORM TABLE -->
</form>

Hello

I needed an interdependent form for a website. Since i don't know any JavaScript this has been pretty tricky and i still have some problems.

This is the code I'm using:

JavaScript:
Code:

<script type='text/javascript'>
var ss2Values = [
  // 'Please choose a subject'
  ['Please choose a category'],
  // '3D Printer'
  ['Darwin', 'Huxley', 'Mendel', 'Printrbot', 'Prusa Mendel'],
  // 'Home'
  ['Bathroom', 'Bedroom', 'Decorations', 'Furniture', 'Home utilities', 'Household items', 'Kitchen', 'Livingroom', 'Outdoor'],
  // 'Mechanical'
  ['Gears', 'Nuts and bolts', 'Tracks and bogies'],
  // 'Fun'
  ['Games', 'Ornaments', 'Toys'],
  // 'Electrical'
  ['Games', 'Ornaments', 'Toys'],
  // 'Educational'
  ['Biological models', 'Chemical models', 'Mathematical', 'Physical models']
];
window.onload = function()
{
  var ss2 = new xSubSelect('sel20', 'sel21', null, ss2Values, ss2OnChange);
}
function ss1OnChange(s0, s1, s2)
{
  alert(
        s0.options[s0.selectedIndex].value + ' / '
        + s1.options[s1.selectedIndex].value + ' / '
        + s2.options[s2.selectedIndex].value
  );
}
function ss2OnChange(s0, s1)
{
  alert(
        s0.options[s0.selectedIndex].value + ' / '
        + s1.options[s1.selectedIndex].value
  );
}
function xSubSelect(sSelId0, sSelId1, sSelId2, aValues, fnOnChange)
{
  var s0 = document.getElementById(sSelId0);
  var s1 = document.getElementById(sSelId1);
  var s2 = sSelId2 ? document.getElementById(sSelId2) : null;
  if (s0 && s1)
  {
        s0.onchange = function()
        {
          var i, len, val;
          // clear existing options for s1
          len = s1.options.length;
          for (i = 0; i < len; ++i)
          {
                s1.options[0] = null;
          }
          // insert new options for s1
          len = aValues[s0.selectedIndex].length;
          for (i = 0; i < len; ++i)
          {
                val = aValues[s0.selectedIndex][i];
                s1.options[i] = new Option(s2 ? val[0] : val);
          }
          // update s2
          if (s2)
          {
                s1.onchange();
          }
        };
        if (s2)
        {
          s1.onchange = function()
          {
                var i, len;
                // clear existing options for s2
                len = s2.options.length;
                for (i = 0; i < len; ++i)
                {
                  s2.options[0] = null;
                }
                // insert new options for s2
                len = aValues[s0.selectedIndex][s1.selectedIndex].length;
                for (i = 1; i < len; ++i)
                {
                  s2.options[i - 1] = new Option(aValues[s0.selectedIndex][s1.selectedIndex][i]);
                }
          };
          s2.onchange = function()
          {
                if (fnOnChange)
                {
                  fnOnChange(s0, s1, s2);
                }
          };
        }
        else
        {
          s1.onchange = function()
          {
                if (fnOnChange)
                {
                  fnOnChange(s0, s1);
                }
          };
        }
        s0.onchange(); // first init
  }
}
</script>

PHP Code:
<?php
         if (isset($_POST['submit'])) {
        
   $subject_id = $_POST['sel20'];
   $category_id = $_POST['sel21'];
  
   $output_form = 'no';
  
  } else {
   $output_form = 'yes';
  }
 
  if ($output_form == 'yes') {
         ?>
                        <table>
                                <tr>
                                        <td>
                                                <form name='form2' method="post" action="<?php echo $_SERVER['PHP_SELF']; ?>">
                                                        <label for="sel20">Subject and category:</label>
                                                        <br />
                                                        <select id='sel20' name'sel20'>
                                                          <option>Please choose a subject</option>
                                                          <option value="3D Printer">3D Printer</option>
                                                          <option value="Home">Home</option>
                                                          <option Value="Mechanical">Mechanical</option>
                                                          <option value="Fun">Fun</option>
                                                          <option value="Electrical">Electric</option>
                                                          <option value="Educational">Educational</option>
                                                        </select>
                                                        <br />
                                                        <select id='sel21' name='sel21'>
                                                        </select>
                                                        <p class="signup_mgrey_10px"><a href="request_category">My category is not there?</a></p>
                                                        <input type="submit" name="submit" value="Upload" />
                                                </form>
                                        </td>
                                        <td>
                                        <img src="../images/upload_guide.png" alt="Upload your 3D model" />
                                        </td>
                                </tr>     
                        </table>
                        <?php
   }
  
   if ($output_form == 'no') {
        //Write data to databse
        $query = "INSERT INTO models (subject_id, category_id) VALUES ('$subject_id', '$category_id')";
        mysqli_query($connection, $query)
          or die ('Data not inserted.');
   }
   ?>

The JavaScript part is from an example including 2 interdependent forms. So there might be code for both forms, since i don't know which parts i can delete.

When i write to my database it only writes the category_id. The subject_id won't get set. I tried echoing out $subject_id right before writing the $query without any luck.

Can anyone spot the problem?

Thanks in advance.