刷新后保持在同一页面上
stay at the same page after refresh
>我有一个包含表单的页面,输入类型有一个 JavaScript 侦听器 选择 ,事件是 onchange,具体取决于从选择中选择的选项该页面将显示一个输入块 (div),我正在使用隐藏和显示来显示或隐藏 HTML 元素块,其中一个div (div 2) 的输入类型也带有 ajax 调用的 onchange 事件。我的第一个问题是,点击表单浏览器的验证按钮后,我希望他留在最后一个上一个div,第二个问题是刷新后的div 2不会带来任何数据,这是合乎逻辑的,因为事件正在发生变化。所以想要如果已经显示了div 2,ajax调用在刷新后工作。
这是我的 HTML 代码
<form id="boxpanel" class="form-panel" method='POST' enctype='multipart/form-data' action='<?php echo URL.htmlspecialchars('ads');?>'>
<div>
<label for='catego'><b>categories: </b><span>(*)</span></label>
<span><select name="catego" id="catego">
<option value='0'>select a category </option>
<?php
foreach($this->categories as $key => $value) { ?>
<option value=<?php echo $value['id'];?> <?php if (isset($_POST['catego']) && $_POST['catego'] == $value['id']){ echo 'selected';}else{ echo '';}?>> <?php echo $value['categorie'] ;?></option>
<?php
}
?>
</select><br /></span>
</div>
<div id="div12" class="hide">
<br />
<div>
<label for='mark'><b>cars:</b> <span>(*)</span></label>
<select name='cars' id='cars' onchange="showHint(this.value)">
<option value=0>s1</option>
<option value=2>s2</option>
<option value=3>s3</option>
</select>
</div>
<br />
<div>
<label for='categos'><b>Models:</b></label>
<select id="txtHintts" name="model" class="form-control">
</select>
</div>
<br />
</div>
<div id="div13" class="hide">
<br />
<div>
<label for='wheels'><b>wheels:</b> <span>(*)</span></label>
<select name='wheels' id='wheels'>
<option value=0>c</option>
<option value=2>v</option>
<option value=3>v</option>
</select>
</div>
<br />
<div>
<label for='wheels'><b>colors:</b> <span>(*)</span></label>
<select name='colors' id='colors'>
<option value=0>a</option>
<option value=2>d</option>
<option value=3>c</option>
</select>
</div>
<br />
</div>
</div>
这就是我制作隐藏和显示工作的方式
<script>
function catego() {
if ($('#catego').val() == 1 ) {
$('#div12').removeClass('hide');
$('#div13').addClass('hide');
}
if ($('#catego').val() == 2) {
$('#div12').addClass('hide');
$('#div13').removeClass('hide');
}
}
$('#catego').on('change', catego);
$( document ).ready(function() {
catego();
});
</script>
这是我的阿贾克斯电话
<script>
function showHint(str) {
if (str.length == 0) {
document.getElementById("txtHintts").innerHTML = "";
return;
} else {
var xmlhttp = new XMLHttpRequest();
xmlhttp.onreadystatechange = function() {
if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
document.getElementById("txtHintts").innerHTML = xmlhttp.responseText;
}
}
xmlhttp.open("GET", "/gethint?q=" + str, true);
xmlhttp.send();
}
}
</script>
删除
<select name='cars' id='cars' onchange="showHint(this.value)">
在显示/隐藏完成后在 js 中调用此方法。另外,将所有 js 事件保存在 document.ready 中。
相关文章:
- 如何获取不属于我项目的上一页的URL
- 如何在Facebook上的iframe应用程序中使后退按钮返回到上一页
- 使用Booklet Jquery插件,我如何验证最后一页是否显示
- 如何在一页网站中使用PHP重定向到一个页面
- Javascript并不是显示在每一页上
- 如何在一页上显示多个Highcharts图表
- jQuery分页下一页和上一页按钮在点击零或超过最后一页后失败
- 如何返回到上一页并用php或javascript刷新它
- 使用javascript从另一页(第三页)刷新一页(第一页)
- 移动到 php 表的下一页而不刷新
- 如何在不刷新 angularjs 的情况下返回上一页
- 页面刷新或移动到另一页后保留setTimeout()
- 如何在不刷新HTML的情况下导航到上一页
- 如何限制用户刷新页面或返回上一页
- 使用jquery(而不是angularjs)返回前一页而不刷新
- 变量丢失发送在query字符串从上一页在php中刷新
- 我的AJAX调用不能在下一页上工作,直到我点击刷新
- 使用 history.back 刷新上一页
- 在页面刷新多次JQUERY后返回上一页
- 刷新上一页