删除隐藏元素和表单提交之间的空间答案

【问题标题】：Remove space between the hidden elements and form submit删除隐藏元素和表单提交之间的空间
【发布时间】：2013-06-05 17:56:49
【问题描述】：

我有一个表单，用户根据出现的州和城市选择框或文本框选择国家。

如果在国家/地区选择INDIA，那么它应该使用州和城市选择填充选择框，否则城市和州的文本框将写入。我能够实现这一点，但它有两个问题 -

第一个是当用户选择任何一个国家时，隐藏部分都有空间
第二个表格只提交给其他国家，不提交给印度

脚本和html可能有什么问题？下面是代码 -

<script type="text/javascript">
    function loadbox()
    {
    //var cnty=document.getElementById('country').slected;
    var x=document.getElementById("country1").selectedIndex;
    var y=document.getElementsByTagName("option")[x].value;
    if(y==22)
    {
    document.getElementById("selectbox").style.visibility = "visible";
    document.getElementById("textbox4cnty").style.visibility = "hidden";
    }
    else {
    document.getElementById("selectbox").style.visibility = "hidden";
    document.getElementById("textbox4cnty").style.visibility = "visible";
    }
    }
    </script>

html部分

    <label for="country">COUNTRY</label>
<select id="country1" name="country1" onChange="loadbox()">         
<option value="" selected="selected" />SELECT</option>
<?php
$sql="SELECT * FROM  `country` ";
$result = mysql_query($sql);
while($row=mysql_fetch_array($result))
{
 ?>
<option value="<?php echo $row['country_id']; ?>">
<?php echo $row['country_name']; ?></option>
<?php                                            
  }
 ?>                                  
<option value="others">Others</option>
</select>         
<div id="selectbox" style="visibility:hidden">
<label for="State">STATE </label>
<select id="state1" name="state1"
onchange="getCity('select_city.php?state_id='+this.value)">
<option value="">SELECT</option>
<?php
$sql1="SELECT * FROM  `state`  ";
$result1 = mysql_query($sql1);
 while($row1=mysql_fetch_array($result1))
{
?>
<option value="<?php echo $row1['state_id']; ?>">
<?php echo $row1['state_name']; ?></option>
<?php
}
?>
</select>
<label for="STREET">CITY </label>
<select id="city1" name="city1">
<option value="">select</option>
 </select> <br/>
<div>
<div id="textbox4cnty" style="visibility:hidden">
<label for="State">STATE </label>
<input type="text" placeholder="STATE" name="state1" required><br />
<label for="STREET">CITY </label>
<input type="text" placeholder="CITY" name="city1" required><br />
</div>

【问题讨论】：

使用display:none 代替可见性
但它在选择完成时没有任何变化，仍然不可见

标签： html mysql error-handling

【解决方案1】：

改变

if(y==22)

    {

    document.getElementById("selectbox").style.visibility = "visible";

    document.getElementById("textbox4cnty").style.visibility = "hidden";

    }

    else {

    document.getElementById("selectbox").style.visibility = "hidden";

    document.getElementById("textbox4cnty").style.visibility = "visible";

    }

到

if(y==22)

    {

    document.getElementById("selectbox").style.visibility = "visible";

    document.getElementById("textbox4cnty").style.visibility = "hidden";

    document.getElementById("selectbox").disabled=false;
    document.getElementById("textbox4cnty").disabled=true;

    }

    else {

    document.getElementById("selectbox").style.visibility = "hidden";

    document.getElementById("textbox4cnty").style.visibility = "visible";

    document.getElementById("selectbox").disabled=true;
    document.getElementById("textbox4cnty").disabled=false;

    }

【讨论】：

【解决方案2】：

您的代码有问题。您使用页面上所有选项的通用选择

以下是我如何在不深入挖掘并保留内联事件处理程序的情况下将其从头顶上编码出来。它应该不引人注目，但一次只做一件事

function loadbox(sel)     {
  var isIndia=sel.options[sel.selectedindex].text==="INDIA";
  document.getElementById("selectbox").style.display = (isIndia)?"":"none";
  document.getElementById("textbox4cnty").style.display = (isIndia)?"none":"";
  // and because you do not have ID on the second field names state1
  document.getElementsByName("state1")[0].disabled=!isIndia; 
  document.getElementsByName("state1")[1].disabled=isIndia;
  document.getElementsByName("city1")[0].disabled=isIndia;
}

使用

<select id="country1" name="country1" onChange="loadbox(this)">

和

<div id="selectbox" style="display:none">

和

<div id="textbox4cnty" style="display:none">

【讨论】：