如何防止javascript函数更改html表单中的其他值_Javascript

如何防止javascript函数更改html表单中的其他值

javascript

如何防止javascript函数更改html表单中的其他值,javascript,Javascript,我的html表单中有两个select块： <select id="select1"> <option>1</option> <option>2</option> <option>3</option> </select> <select id="select2" onchange="someFunc()"> <option>A/option> <option>

我的html表单中有两个select块：

<select id="select1">
<option>1</option>
<option>2</option>
<option>3</option>
</select>

<select id="select2" onchange="someFunc()">
<option>A/option>
<option>B</option>
</select>


1.
2.
3.
A/选项>
B

我有一个validateForm（）函数，它是从表单标记@onSubmit调用的。“someFunc”函数用于填充表单中其他位置的一些innerHTML。我遇到的问题是，当我点击submit时，select1的值将恢复为其原始默认值，validateForm函数将失败

someFunc函数非常长，所以我没有发布全部内容，但本质上它所做的是检查字符串值并填充html，如：

if(select2.value = 'A'){
     document.getElementById('anotherElement').innerHTML= '<h1>a new tag</h1>';
}

if（选择2.value='A'）{
document.getElementById（'anotherElement'）。innerHTML='a new tag'；
}

除了@onChange还有其他att吗

好的，下面是一个完整的html表单，它描述了我遇到的问题：

<html>
<head>
<title>javascript q</title>
<script>
    function updateTag(){
document.getElementById('newHeading').innerHTML='<p     id="status">updated</p>';

    }


    function validateForm(){
        var s1 = document.getElementById('select1');
        var s2 = document.getElementById('select2');

        if( s1.value = 'please select' ){
                alert('please select a value from the pulldown');
                return false;
            }

        // updated html needs to have been performed and value selected
        if(document.getElementById('status') == null ){
                alert('status does not exist');
            }

    }

</script>

</head>
<body>

<h1>Javascript Q</h1>

<form id="testForm" onSubmit="return validateForm();">

<select id="select1">
    <option>please select</option>
    <option>1</option>
    <option>2</option>
    <option>3</option>
</select>

<select id="select2" onchange="updateTag()">
    <option>please select</option>
    <option>a</option>
    <option>b</option>
    <option>c</option>
</select>
<input type="submit" value="submit"/>       
<div id="newHeading">

</div>


</form>
</body>
</html>


javascript q
函数updateTag（）{
document.getElementById（'newHeading'）。innerHTML='已更新；
}
函数validateForm（）{
var s1=document.getElementById（'select1'）；
var s2=document.getElementById（'select2'）；
如果（s1.value='请选择'）{
警报（“请从下拉列表中选择一个值”）；
返回false；
}
//需要执行更新的html并选择值
if（document.getElementById（'status'）==null）{
警报（“状态不存在”）；
}
}
Javascript Q
请选择
1.
2.
3.
请选择
A.
B
C

发生的情况是，我从每个下拉列表中选择一个值，点击submit，然后select1的值恢复为其原始值，并且验证失败

希望这样更好

谢谢，

我认为它的作用是发送信息（实际上是提交信息），使字段再次变为空白。一个建议是

return false

如果只想填充一些div之类的内容，请在validateForm（）上。如果您真的希望提交，那么您可能需要这样的内容：

$('form').submit(function(e) {
     //Do your checks and innerHTML manipulation here before it sends the info away.
});

不要使用Robin Jonsson提到的return，而是应该使用preventDefault（）来阻止在点击submit时提交表单。

这是我的过失，完全是愚蠢的疏忽

if( s1.value = 'please select' ){

应该是

if( s1.value == 'please select' ){

很抱歉你的愚蠢疏忽

你能发布someFunc（）的定义吗？@EudisDuran:真的很长……我不知道该发布多少。请参见编辑的q@all：增加了更完整的表格，希望这个问题更好，对其他人更有帮助。这是不对的。return false同时执行preventDefault（）和stopPropagation（）否，它是正确的。使用

返回false是执行这两个事件处理程序的唯一时间。在普通Javascript事件处理程序中，返回false仅与事件.preventDefault（）等效好-所以我们不应该再次开始讨论-我认为这里更容易阅读：确切地说，接受的答案准确地解释了我所说的。谢谢你提供链接