AJAX Forms query

JavaScript
1

Hello,

I have the following form which I was hoping to get some help with AJAX-ifying :slight_smile:

The idea is that when the user selects the radio button for:

  • Call back, the only visible fields would be: name, telephone
  • Join mailing list, the only visible fields would be: name, email
  • Contact us, the only visible fields would be: name, email, comments.

Is this easy enough to achieve?

I think I’ll be using this: http://trevordavis.net/play/jqueryajaxform/ajaxed/ for the actual input validation, but needed some help swapping elements around.


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>

<script type="text/javascript">
function showInfo() {
	var elem = document.getElementById('telephone');
	if(document.forms[1].ctype.value == "1") {
		elem.style.display="block";
	}
	else {
		elem.style.display="none";
	}
}
</script>

</head>

<body>

<form>

<fieldset>

<legend>Options</legend>

<input type="radio" id="ctype" name="ctype" value="1" onchange="showInfo();" />Call back<br />
<input type="radio" id="ctype" name="ctype" value="2" />Join Mailing List<br />
<input type="radio" id="ctype" name="ctype" value="3" />Contact Us<br /><br />

<label for="uname">Name</label><br />
<input type="text" name="uname" id="uname" /><br /><br />

<div id="telephone" style="display:none">
<label for="telephone2">Telephone</label><br />
<input type="text" name="telephone2" id="telephone2" /><br /><br />
</div>

<label for="uname">Email</label><br />
<input type="text" name="uname" id="uname" /><br /><br />

<label for="">Comments</label><br />
<textarea></textarea><br /><br />

<input type="submit" value="Submit" />

</fieldset>

</form>

</body>
</html>

Many thanks for any pointers.

2

Please ignore.

I’m working on a solution.

Will post shortly :slight_smile:

Thank you.