在第一页加载时隐藏字段，而不是在php发布之后
Hide fields on first page load, not after php post
当我第一次访问index.php时，我想要一个隐藏一些字段的javascript。进行选择后，会显示一些字段（取决于选择）。但在index.php上，有一个表单。当我按下"提交"时，我想留在同一页上，但字段必须保持原样。。
但现在我所有的字段都隐藏了（就像第一页加载时一样）？
我的代码：
<script type="text/javascript">
function firstLoad()
{
<!-- HIDE FIELDS ON DOC START -->
$(".diameterRound").hide();
$(".lengthSquare").hide();
$(".lengthRectangle").hide();
$(".material").hide();
$(".thickness").hide();
$(".calculate").hide();
}
window.onload=firstLoad;
</script>
<form method="post" action="<?=$_SERVER['PHP_SELF'];?>">
有人能帮我吗？我对javascript了解不多。。
编辑，我的脚本和表单：
<script type="text/javascript">
function firstLoad()
{
<!-- HIDE FIELDS ON DOC START -->
$(".diameterRound").hide();
$(".lengthSquare").hide();
$(".lengthRectangle").hide();
$(".material").hide();
$(".thickness").hide();
$(".calculate").hide();
}
$(document).ready(function()
{
<!-- GET SELECTED SHAPE -->
$selectedshape=$("input:radio[name='shape']:checked").val();
$('input[type="radio"]').click(function()
{
<!-- ROUND -->
if($(this).attr("value")=="round")
{
$(".diameterRound").show();
$(".material").show();
$(".thickness").show();
$(".calculate").show();
$(".lengthSquare").hide();
$(".lengthRectangle").hide();
<!-- images shape selection goed zetten -->
document.getElementById('roundShape').src = "css/images/roundSelect.jpg";
document.getElementById('oblongShape').src = "css/images/oblong.jpg";
document.getElementById('rectShape').src = "css/images/rect.jpg"
document.getElementById('squareShape').src = "css/images/square.jpg";
}
<!-- SQUARE -->
if($(this).attr("value")=="square")
{
$(".lengthSquare").show();
$(".material").show();
$(".thickness").show();
$(".calculate").show();
$(".diameterRound").hide();
$(".lengthRectangle").hide();
<!-- images shape selection goed zetten -->
document.getElementById('roundShape').src = "css/images/round.jpg";
document.getElementById('oblongShape').src = "css/images/oblong.jpg";
document.getElementById('rectShape').src = "css/images/rect.jpg";
document.getElementById('squareShape').src = "css/images/squareSelect.jpg";
}
<!-- RECTANGLE -->
if($(this).attr("value")=="rectangle")
{
$(".lengthRectangle").show();
$(".material").show();
$(".thickness").show();
$(".calculate").show();
$(".lengthSquare").hide();
$(".diameterRound").hide();
<!-- images shape selection goed zetten -->
document.getElementById('roundShape').src = "css/images/round.jpg";
document.getElementById('squareShape').src = "css/images/square.jpg";
document.getElementById('oblongShape').src = "css/images/oblong.jpg";
document.getElementById('rectShape').src = "css/images/rectSelect.jpg";
}
<!-- OBLONG -->
if($(this).attr("value")=="oblong")
{
$(".lengthRectangle").show();
$(".lengthSquare").hide();
$(".diameterRound").hide();
<!-- images shape selection goed zetten -->
document.getElementById('roundShape').src = "css/images/round.jpg";
document.getElementById('squareShape').src = "css/images/square.jpg";
document.getElementById('rectShape').src = "css/images/rect.jpg";
document.getElementById('oblongShape').src = "css/images/oblongSelect.jpg";
}
});
});
window.onload=firstLoad;
</script>
<form method="post" action="<?=$_SERVER['PHP_SELF'];?>">
<label>
<h2>Step 1: Select your shape</h2>
</label>
<!-- SHAPE SELECTION -->
<div class="row 50%">
<div class="3u 12u(mobilep)">
<label>
<input type="radio" name="shape" value="round" />
<img id="roundShape" src="css/images/round.jpg">
</label>
</div>
<div class="3u 12u(mobilep)">
<label>
<input type="radio" name="shape" value="square" />
<img id="squareShape" src="css/images/square.jpg">
</label>
</div>
<div class="3u 12u(mobilep)">
<label>
<input type="radio" name="shape" value="rectangle" />
<img id="rectShape" src="css/images/rect.jpg">
</label>
</div>
<div class="3u 12u(mobilep)">
<label>
<input type="radio" name="shape" value="oblong" />
<img id="oblongShape" src="css/images/oblong.jpg">
</label>
</div>
</div>
<!-- ROUND - DIAMETER -->
<div class="row 50% diameterRound">
<div class="12u diameterRound">
<input type="text" name="diameterRound" class="diameterRound" id="diameterRound" placeholder="Diameter (mm)" />
</div>
</div>
<!-- SQUARE - LENGTH -->
<div class="row 50% lengthSquare">
<div class="12u lengthSquare">
<input type="text" name="lengthSquare" class="lengthSquare" id="lengthSquare" placeholder="Length (mm)" />
</div>
</div>
<!-- RECTANGLE OBLONG - LENGTH WIDTH -->
<div class="row 50% lengthRectangle">
<div class="6u lengthRectangle">
<input type="text" name="lengthRectangle" class="lengthRectangle" id="lengthRectangle" placeholder="Length (mm)" />
</div>
<div class="6u">
<input type="text" name="widthRectangle" class="widthRectangle" id="widthRectangle" placeholder="Width (mm)" />
</div>
</div>
<div class="row 50% material">
<div class="12u material">
<select class="material" name="material" id="material" >
<option value="" disabled selected>Select your material</option>
<OPTION value="448.38">Mild steel = 45 kg/mm2</OPTION>
<OPTION value="797.12">Stainless steel A4316 = 80 kg/mm2</OPTION>
<OPTION value="523.11">Stainless steel 304 = 52.5 kg/mm2</OPTION>
<OPTION value="199.28">Aluminium = 20 kg/mm2</OPTION>
<OPTION value="1394.96">Hardox 450 = 140 kg/mm2</OPTION>
<OPTION value="1245.50">Raex 400 = 125 kg/mm2</OPTION>
<OPTION value="348.74">Copper = 35 kg/mm2</OPTION>
<OPTION value="548.02">50D Steel = 55 kg/mm2</OPTION>
<OPTION value="617.77">Domex 420 = 62 kg/mm2</OPTION>
<OPTION value="637.69">S355 structual steel = 64 kg/mm2</OPTION>
</select>
</div>
</div>
<div class="row 50% thickness">
<div class="12u thickness">
<input type="text" name="thickness" class ="thickness" id="thickness" placeholder="Thickness of the material (mm)" />
</div>
</div>
<div class="row 50% calculate">
<div class="12u calculate">
<label>
<ul class="actions calculate">
<li><input id="calculate" type="submit" class="button alt" value="Calculate" /></li>
</ul>
</label>
</div>
</div>
</form>
在这里您提交的页面不带ajax，所以当您提交表单时，它将重新加载页面并再次执行。这里firstLoad（）函数再次调用，它将隐藏元素。
解决方案
或者使用ajax进行表单提交。ajax不会重新加载页面，所以您的元素看起来与选择相同
或
根据提交时的帖子数据，对隐藏元素设置一些条件。
默认情况下，您可以通过将它们的css设置为display:none
相关文章：
- PHP/Ajax/jquery/JON-在Ajax Post之后将echo文本中的一部分作为变量返回
- 在第一页加载时隐藏字段，而不是在php发布之后
- 数组在JavaScript中不是null，但在PHP'Ajax之后的s$_POST
- 使用Jquery和PHP在POST Ajax之后返回(一个空字符串）
- 在3°之后保留SESSION php;页面刷新
- 在“onexit”或“onsubmit”之后，查询mysql并填充表单字段，而无需离开页面php js
- 在 Ajax 之后重新加载 PHP 代码
- 我需要一些关于PHP的帮助，并在“?”之后更新URL
- 在javascript http post请求之后处理不同的php响应
- 在javascript之后从php加载的动态图像需要运行
- 尝试将 URL 中 # 之后的字符串传递给 PHP 变量
- PHP 删除 & (和） 符号之后的所有内容
- 祖尔布基金会均衡器在阿贾克斯之后调整大小
- 在更新数据库中的一行之后，再次运行php行
- 在Hashtag之后获取变量，并将其存储为PHP变量
- php中onclick之后的mySQL请求
- 使用ajax发送一个JS变量，但我怎么能使用PHP变量之后到我的主文件
- jQuery AJAX在第一个PHP条件之后不显示输出
- 在带有参数的php脚本之后调用jquery函数
- 在 php javascript 之后动态插入行
