验证字段完成后更改按钮文本

时间:2018-07-18 02:58:13

标签: javascript

我的表单包括大约10秒钟的搜索时间。提交按钮的标题为SEARCH,单击后我将其设置为SEARCHING。这是代码:

<input type=submit class=button 
value=&nbsp;&nbsp;&nbsp;&nbsp;Search&nbsp;&nbsp;&nbsp;&nbsp; 
onclick="javascript:formSubmit();this.value='Searching...'">

但是现在,我需要验证电子邮件字段和另一个字段是否已完成,以便按钮文本在验证后变为“仅搜索 ”。

我尝试了此方法,但是它不起作用:

<input type=submit class=button 
value=&nbsp;&nbsp;&nbsp;&nbsp;Search&nbsp;&nbsp;&nbsp;&nbsp; 
onclick="myFunction();javascript:formSubmit();this.value='Searching...'">

<script>
function myFunction() {
  if ( document.getElementsByName('numberadults')[0].value == '0' )
    alert('The number of adults must be more than zero!');   
  document.getElementById("myEmail").required = true;
  document.getElementById("demo").innerHTML = "The required property was set. The email field must now be filled out before submitting the form.";
}
</script>

这是正在验证的两个字段的html:

<select name=numberadults class=cboStyleZ>
<option value=0 selected>
0
</option>
<option value=1>
1
</option>
<option value=2>
2
</option>
<option value=3>
3
</option>
<option value=4>
4
</option>
<option value=5>
5
</option>
<option value=6>
6
</option>
<option value=--->
---
</option>
</select>

<input type="email" id="myEmail" class=cboStyleZ1 name="eaddr" 
placeholder="Your email is all we need">

2 个答案:

答案 0 :(得分:0)

<script>
function myFunction() {
//other statements if required

document.getElementById("search").value = "searching";


}
</script>
<input type=submit class=button id="search"
value="search"; 
onclick="myFunction()">

我认为这段代码可以为您提供帮助

答案 1 :(得分:0)

以下点击处理程序:

onclick="myFunction();javascript:formSubmit();this.value='Searching...'"

并未表明myFunction中的验证将如何影响表单提交和文本更改。 这里有几种为猫皮的方法,但是通常,您可以依靠if之类的控制结构或使用短路运算符根据您感兴趣的表达式的值来更改执行流程(例如: myFunction()的返回值)

HTML

onclick="if(myFunction()) { javascript:formSubmit();this.value='Searching...'} "

JS

function myFunction() {
    if ( document.getElementsByName('numberadults')[0].value == '0' ) {
        // ...
        // Display what is wrong with the form to the user
        // ...
        return false;
    }
    return true;

}