Code:
function show(obj) {
no = obj.options[obj.selectedIndex].value;
count = obj.options.length;
for(i=1;i<=count;i++)
document.getElementById('profile'+i).style.display='none';
if(no>0)
document.getElementById('profile'+no).style.display='block';
for (j=1;j<=count;j++)
document.getElementById('error'+j).style.display='none';
if(no>0)
document.getElementById('error'+no).style.display='block';
}
function validate(id)
{
var x1=document.forms["myForm1"]["firstname"].value;
if (id ==1 && (x1==null || x1==""))
{
document.getElementById('error1').innerHTML='First name, form 1 must be filled out';
return false;
}
var x1=document.forms["myForm2"]["firstname"].value;
if (id ==2 && (x1==null || x1==""))
{
document.getElementById('error2').innerHTML='First name , form 2 must be filled out';
return false;
}
}
HTML Code:
<div><select onchange="show(this)" size="1">
<option value="1" selected="selected">first</option>
<option value="2">second</option>
</select></div>
<br>
<div id="error1"></div>
<div id="error2"></div>
<div id="profile1" onsubmit="return validate(1)" style="display: block;">
<form name="myForm1">
From 1 First name: <input type="text" name="firstname" /><br />
From 1 Last name: <input type="text" name="lastname" /><br/>
<input type="submit" value="Submit" />
</form>
</div>
<div id="profile2" onsubmit="return validate(2)" style="display:none;">
<form name="myForm2">
From 2 First name: <input type="text" name="firstname" /><br />
From 2 Last name: <input type="text" name="lastname" /><br />
<input type="submit" value="Submit" />
</form>
</div>
From the above codes, I am making a drop down system to alternate between some forms. But, I am not able to save one form , when I go to another. Also error are not very user friendly. Need to show them as an overlay. Please assist on how to achieve this. I am new to JS and I am using PHP language.
Also press on submit takes to first form, need to stay in same form when it is submitted successfully or with failure.