php - 单选按钮调用 javascript 函数以在表单提交之前显示输入标记。相同功能后无法显示相同的输入标签

Question

javascript代码适用于第一次调用以显示输入标签

function selbustbla(k)
{
if(k == 1)
{
 document.getElementById("bustbl1").style.display = "none";
 document.getElementById("bustbl11").style.display = "block";
 }
 if(k == 2)
 {
 document.getElementById("bustbl1").style.display = "block";
 document.getElementById("bustbl11").style.display = "none";
 }
}

调用 javascript 的表单和单选按钮。一个电话就OK了。提交后，相同的功能无法显示输入标签。

<form id="frm1" action="<?php echo $_SERVER['PHP_SELF']?>" method="POST" >
<table>
<tr><td name="registration" id="registration"><strong>Register </strong></td></tr>
<tr>
<td><input type="radio" name="rdo" id="aupair" onclick="selbustbla(2)" value="aupair" <? if(isset($_POST['rdo']) && $_POST['rdo'] == 'aupair') echo "checked"; ?> />First</td>
<td><input type="radio" name="rdo" id="babysitter" onclick="selbustbla(1)" value="babysitter" <? if(isset($_POST['rdo']) && $_POST['rdo'] == 'babysitter') echo "checked";?> />Second</td>
</tr>
</table>
<table id="bustbl1" name="bustbl1" style="display:none" >
<tr>
<td name="personal" id="personal" ><strong>Personal </strong>details</td>
</tr>
<tr>
<td>Title:&nbsp;</td>           
<td><input id = 'inputtitle' name = 'inputtitle' size = '4' maxlength = '4' type = 'text'></td></tr></table>
<table id="bustbl11" name="bustbl11" style="display:none" >
<tr><td name="businessdetail" id="businessdetail" ><strong>Business </strong>details</td></tr>
<tr><td>Contact Name:&nbsp;</td>            
<td><input id = 'businesscontact' name = 'businesscontact' type = 'text' size = '40' maxlength = '65'></td></tr></table>
<input type = "submit" name = "Button"  value = "Register" margin-bottom: .5em" >
</form>

Answer 1

我猜您是在谈论提交表单后的不一致问题，例如：您选择第二个单选按钮“ babysitter ”并提交表单，然后您发现在显示表bustbl1而不是bustbl11时选中了第二个单选按钮。

一旦用户进入页面，您将需要调用另一个脚本以使用正确的状态初始化页面。

<script type="text/javascript">
window.onload = function (){ 
    var isFirstItemSelected = document.getElementById('aupair').checked;
    if(isFirstItemSelected)
        selbustbla(2); // display 'bustbl1' table and hide another one
    else
        selbustbla(1); // display 'bustbl11' table and hide another one
}
</script>