Question

我正在使用一个小页面来创建一个由两个成员组成的团队，如果有人在两个字段中选择了相同的成员，它应该停止提交页面。我在使用以下代码：

<html>
<head>
    <meta name="viewport" content="width=device-width, initial-scale=1">
 <script 
 src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js">
</script>
<script 
 src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js">
  </script>
  <link rel="stylesheet" 
href= 
"https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

</head>

<form>
<select name="tm_1_id" id="tm_1_id">
<option>Sajjad</option>
<option>Mahmood</option>
<option>Ahsan</option>
<option>Usman</option>
</select>
<br>
<select name="tm_2_id" id="tm_2_id">
<option>Sajjad</option>
<option>Mahmood</option>
<option>Waqas</option>
<option>Shahnawaz</option>

</select>
<br>
 <input type="submit" name="submit" id="submit" value="Create" 
 onClick="return checkDouble();" />
 </form></html>
 <script>

    var mmbr1 = document.getElementById("tm_1_id");
    var tm1 = mmbr1.options[mmbr1.selectedIndex].value;
    var mmbr2 = document.getElementById("tm_2_id");
    var tm2 = mmbr2.options[mmbr2.selectedIndex].value;
    function checkDouble(){
    if (2>1)
        {
        alert (tm2);
 return false;
    }
 </script>

我创建了jsfiddle

如果有人能提供帮助，那将非常有帮助。我知道我的函数在调用函数时是有效的，但是不管怎样它都不适用于if和else语句。

Answer 1

试试这个。并匹配mmbr1和mmbr2所选值。并且您的功能未在}

结束时正常关闭

var mmbr1 = document.getElementById("tm_1_id");
var tm1 = mmbr1.options[mmbr1.selectedIndex].value;
var mmbr2 = document.getElementById("tm_2_id");
var tm2 = mmbr2.options[mmbr2.selectedIndex].value;

function checkDouble() {

  if (mmbr1.value == mmbr2.value) {
    alert(tm2);
    console.log('fail')
    return false;
  }
  else{
  console.log('pass')
  
  }
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>


<form action="" method="post">
  <select name="tm_1_id" id="tm_1_id">
<option>Sajjad</option>
<option>Mahmood</option>
<option>Ahsan</option>
<option>Usman</option>

</select>
  <br>
  <select name="tm_2_id" id="tm_2_id">
<option>Sajjad</option>
<option>Mahmood2</option>
<option>Ahsan2</option>
<option>Usman2</option>

</select>
  <br>
  <input type="submit" name="submit" id="submit" value="Create" onClick="return checkDouble();" />
</form>

Answer 2

分叉你的，并添加了一个事件处理程序。 https://jsfiddle.net/springfeld/25ys4vm2/ 首先发现：没有关闭功能的支架。

必须在每种情况下返回一个值，即使其死代码，我也是如此：

event.preventDefault();

即使你像checkDouble一样将函数扼杀到onsubmit上，你也必须添加一个替代方案。想想：如果2小于1怎么办？在这种情况下，该函数现在返回true，并在引擎的眼中评估正确。

{{1}}

处理程序中的

阻止它按设计运行，在您的情况下将表单提交给服务器。可以将其视为浏览器默认行为的停止标志。

但请记住：这可以被禁用的javascript覆盖。如果禁用javascript，则无需进一步检查即可提交表单值。

希望：有帮助。有一个很好的。乌

Answer 3

<html>

<head>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js">
    </script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js">
    </script>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
</head>
<form>
    <select name="tm_1_id" id="tm_1_id">
        <option>Sajjad</option>
        <option>Mahmood</option>
        <option>Ahsan</option>
        <option>Usman</option>
    </select>
    <br>
    <select name="tm_2_id" id="tm_2_id" onclick="getText()">
        <option>Sajjad</option>
        <option>Mahmood</option>
        <option>Waqas</option>
        <option>Shahnawaz</option>
    </select>
    <br>
    <input type="submit" name="submit" id="submit" value="Create" onClick="return checkDouble();" />
</form>

</html>
<script>
var mmbr2 = document.getElementById("tm_2_id");
var tm2 = mmbr2.options[mmbr2.selectedIndex].text;

function getText() {

    tm2 = mmbr2.options[mmbr2.selectedIndex].value;
};

console.log('选择的是' + tm2);

function checkDouble() {
    if (2 > 1) {
        alert(tm2);
        return false;
    }
}
</script>

enter code here

Javascript函数不使用IF ELSE语句阻止表单提交

3 个答案: