I need someone to write a form using html, css and jquery. I want it to have a d
ID: 3772771 • Letter: I
Question
I need someone to write a form using html, css and jquery. I want it to have a drop down that list three different forms the user can select. For example a contact info form, a email registeration form and a online order form. They dont have to have alot of fields but when you select one of the options from the drop down menu it shows that form. Each form has to have required fields and the issue I had when I uploaded it to the service to test it even though the correct form would show it was telling me that I was required to enter a value into reqiured fields from the other forms. Since I was hiding it even though the user cant see it the code still spits out "need to enter required field". To do this I want to use class="required" but I am having trouble to get it to work with the drop down menu. I can do it with checkboxs using the input type but with the select I am not sure. So any example of this that works will be great, whoever gives the first answer that runs correctly gets the points.
Explanation / Answer
Can help u with this...
<html>
<head>
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script>
function display(obj,id1,id2,id3)
{
txt = obj.options[obj.selectedIndex].value;
document.getElementById(id1).style.display = 'none';
document.getElementById(id2).style.display = 'none';
document.getElementById(id3).style.display = 'none';
if ( txt.match(id1) )
{
document.getElementById(id1).style.display = 'block';
}
if ( txt.match(id2) )
{
document.getElementById(id2).style.display = 'block';
}
if ( txt.match(id3) )
{
document.getElementById(id3).style.display = 'block';
}
}
$(document).ready(function(){
$('#category').change(function(){
var selectedValue = $('#category').val();
$('#size').removeClass('required');
$('#' + selectedValue + ' > select').addClass('required');
});
});
</script>
</head>
<body>
<form class="orderform" action="FormNext.php" method="post" name="OrderForm" id="OrderForm">
<select id="category" name="category" class="required">
<option value="">- please select -</option>
<option value="id1">Category1</option>
<option value="id2">Category2</option>
<option value="id3">Category3</option>
</select>
<div id="id1">
<select name="size" id="size" class="">
<option value="">Please Select</option>
<option value="xsmall">extra small </option>
<option value="small">small </option>
<option value="medium">medium</option>
<option value="large">large </option>
<option value="xlarge">extra large</option>
</select>
</div>
<div id="id2">
<select name="size" id="size" class="">
<option value="">Please Select</option>
<option value="xsmall">extra small </option>
<option value="small">small </option>
<option value="medium">medium</option>
<option value="large">large </option>
<option value="xlarge">extra large</option>
</select>
</div>
<div id="id3">
<select name="size" id="size" class="">
<option value="">Please Select</option>
<option value="xsmall">extra small </option>
<option value="small">small </option>
<option value="medium">medium</option>
<option value="large">large </option>
<option value="xlarge">extra large</option>
</select>
</div>
</form>