<form method="POST" action="insert.php" name="reg" onsubmit="return chkform();">
<table cellspacing="0" cellpadding="0" border="1" width="" align="center">
<tr>
<td>
<label>1. First Name</label>
</td>
<td>
<input type="text" class="" id="fname" name="fname" placeholder="First Name" onfocus="document.getElementById('err1').innerHTML='';" />
</td>
<td>
<label>2. Last Name</label>
</td>
<td>
<input type="text" class="" id="lname" name="lname" placeholder="Last Name" onfocus="document.getElementById('err2').innerHTML='';" />
</td>
</tr>
<tr>
<td align="right" colspan="2" style="color: red;font-size: 11px;">
<div class="err" id="err1" style="margin-right: 103px;"></div>
</td>
<td align="right" colspan="2" style="color: red;font-size: 11px;">
<div id="err2"></div>
</td>
</tr>
<tr>
<td>
<label>3. Mobile Number</label>
</td>
<td>
<input type="text" class="" id="m_no" name="m_no" onfocus="document.getElementById('err3').innerHTML='';" placeholder="Mobile Number" />
</td>
<td>
<label>4. Alternate Number</label>
</td>
<td>
<input type="text" class="" id="a_no" name="a_no" onfocus="document.getElementById('err4').innerHTML='';" placeholder="Alternate Number" />
</td>
</tr>
<tr>
<td align="right" colspan="2" style="color: red;font-size: 11px;">
<div id="err3" style="margin-right: 120px;"></div>
</td>
<td align="right" colspan="2" style="color: red;font-size: 11px;">
<div id="err4"></div>
</td>
</tr>
<tr>
<td>
<label>5. Email address</label>
</td>
<td colspan="3">
<input type="email" class="" id="mail" name="mail" onfocus="document.getElementById('err5').innerHTML='';" placeholder="Email id" />
</td>
</tr>
<tr>
<td align="right" colspan="2" style="color: red;font-size: 11px;">
<div id="err5" style="margin-right: 120px;"></div>
</td>
</tr>
<tr>
<td>
<label>6. Organisation/Designation</label>
</td>
<td colspan="3">
<input type="text" class="" id="designation" name="designation" onfocus="document.getElementById('err6').innerHTML='';" placeholder="Oraganisation" />
</td>
</tr>
<tr>
<td align="right" colspan="2" style="color: red;font-size: 11px;">
<div id="err6" style="margin-right: 141px;"></div>
</td>
</tr>
<tr>
<td>
<label>7. Industry</label>
</td>
<td colspan="3">
<input type="text" class="" id="industry" name="industry" onfocus="document.getElementById('err7').innerHTML='';" placeholder="Industry" />
</td>
</tr>
<tr>
<td align="right" colspan="2" style="color: red;font-size: 11px;">
<div id="err7" style="margin-right: 141px;"></div>
</td>
</tr>
<tr>
<td colspan="">
<label>8. Are you a Member?</label>
</td>
<td>
<input type="radio" class="" id="rchk1" name="member" value="yes" checked="true" onclick="chk_register()" />
<label>Yes</label>
</td>
<td>
<input type="radio" class="" id="rchk2" name="member" value="no" onclick="chk_register()" />
<label>No</label>
</td>
<td></td>
</tr>
<tr id="cit">
<td>
<label>9. Member City</label>
</td>
<td colspan="3">
<input type="text" class="" id="city" name="city" placeholder="Name of the city" />
</td>
</tr>
<tr>
<td align="right" colspan="4" style="color: red;font-size: 11px;">
<div id="err8"></div>
</td>
</tr>
<tr>
<td colspan="">
<label>10. Are you an Overseas Delegate?</label>
</td>
<td>
<input type="radio" id="rchk3" value="yes" name="overseas" checked="true" class="" onclick="chk_register1()" />
<label>Yes</label>
</td>
<td>
<input type="radio" value="no" id="rchk4" name="overseas" class="" onclick="chk_register1()" />
<label>No</label>
</td>
<td></td>
</tr>
<tr id="no">
<td>
<label>11. How did you hear about it?</label>
</td>
<td colspan="3">
<textarea id="hcon" name="convention_source" value=""></textarea>
</td>
</tr>
<tr>
<td valign="top">
<label>12. How would you be paying your delegate fee?</label>
</td>
<td valign="top">
<input type="radio" class="" value="cheque" name="fee" checked="true" />
<label>Members only)
<br>cheque payable in name of
<br>
</label>
</td>
<td>
<input type="radio" class="" value="bank transfer" name="fee" />
<label>Bank Transfer</label>
</td>
<td></td>
</tr>
<tr>
<td align="left" colspan="4" style="color: red;font-size: 11px;">
<div id="err11"></div>
</td>
</tr>
<tr>
<td colspan="4">
<input type="submit" name="sub" />
</td>
</tr>
</table>
Это моя форма, когда пользователь нажимает на ARE YOU A QUESTION IE IE или NO. В НЕТ вся строка таблицы, которая имеет идентификатор cit, становится скрытой, но когда пользователь нажимает кнопку "Да", она снова отображает всю строку таблицы но моя проблема заключается в том, когда пользователь нажимает "НЕТ" и после этого нажимает "ДА", отображается строка таблицы, но она показывает мне меньше ширины
<script>
function chk_register() {
if (document.getElementById('rchk1').checked) {
document.getElementById("cit").style.display = "block";
}
if (document.getElementById('rchk2').checked) {
document.getElementById("cit").style.display = "none";
}
}
function chk_register1() {
if (document.getElementById('rchk3').checked) {
document.getElementById("no").style.display = "block";
}
if (document.getElementById('rchk4').checked) {
document.getElementById("no").style.display = "none";
}
}
</script>
Вы устанавливаете строку таблицы <tr>
для отображения block
для ее отображения. Вместо этого вы должны использовать table-row
потому что это значение по умолчанию для <tr>
:
function chk_register(){
if (document.getElementById('rchk1').checked) {
document.getElementById("cit").style.display = "table-row";
}
if (document.getElementById('rchk2').checked) {
document.getElementById("cit").style.display = "none";
}
}
function chk_register1(){
if (document.getElementById('rchk3').checked) {
document.getElementById("no").style.display = "table-row";
}
if (document.getElementById('rchk4').checked) {
document.getElementById("no").style.display = "none";
}
}
Сторона примечания: вы должны использовать флажок onchange
event not onclick
.