在活动中 JavaScript

Question

我需要创建登录页面，您需要在其中输入促销代码才能继续。有 3 种不同的操作：输入正确的代码并重定向到另一个页面，输入错误的代码并重定向到错误页面，将字段留空。每个动作都应该调用自己的对话框来获取消息。我不是程序员所以我在互联网上搜索并找到了一些东西。

这是我用的JavaScript

// REDIRECT
function checkCode(){

// CODE CORRECT
if(document.getElementById('code').value === '123456'){
    //alert('Correct code 1'); 
    location.href = "http://google.com";
} 

// EMPTY CODE
else if (document.getElementById('code').value === ''){
    //alert('You have left field blank. Try again.'); 
    //location.href = "http://google.com";
} 

// WRONG ACTION
else {
    //alert('Wrong code');
    location.href = "fail.html";
    return false;
}
}

//DIALOG SUCCESS
$( function dialogSuccess() {
    $( "#dialog-success" ).dialog({ autoOpen: false });
    $( "#opener" ).click(function dialog() {
        $( "#dialog-success" ).dialog( "open" );
    });
});

//DIALOG EMPTY
$( function dialogError() {
    $( "#dialog-error" ).dialog({ autoOpen: false });
    $( "#opener" ).click(function dialog() {
        $( "#dialog-error" ).dialog( "open" );
    });
});

//DIALOG EMPTY
$( function dialogEmpty() {
    $( "#dialog-empty" ).dialog({ autoOpen: false });
    $( "#opener" ).click(function dialog() {
        $( "#dialog-empty" ).dialog( "open" );
    });
});

// MULTIPLE FUNC    

function checkFunc() {
    checkCode();
    dialogSuccess();
}

和HTML本身：

<form name=method="post" action="">

        <div class="listen">
            <h2>Enter 6-digit code:</h2>
        </div>
        <div class="listen">
            <input type="text" maxlength="6" id="code" placeholder="XXXXXX" name="6digit" />
        </div>
        <div class="listen">
            <input class="orangebutton" id="opener" type="button" value="Proceed" onclick="checkFunc()" />
        </div>
    </form>

<div id="dialog-empty" title="Error">
    <p>You have left field blank. Try again.</p>
</div>

<div id="dialog-error" title="Error">
    <p>You have entered wrong code. Try again.</p>
</div>

<div id="dialog-success" title="Success">
    <p>Congratulations! You will be proceeded to google.com.</p>
</div>

所以基本上我需要如果我输入正确的代码函数 dialogSuccess() 在//代码正确时调用，如果我输入错误的代码，函数调用 dialogError 从//错误的操作中调用。如果我将字段留空，则在//空代码中调用函数 dialogEmpty。或者另一种方法是更改提交按钮上的 id "opener"。如果在重定向之前代码正确和错误操作，那么有一些延迟会很好。

Answer 1

我不确定你为什么需要它。但是像这样的东西可以做你想做的事：

// REDIRECT
$("#opener").on('click', function(){
  var code = $('#code').val();
  $("#dialog-success, #dialog-empty, #dialog-error").addClass("hidden")
  if(code === '123456'){
      dialogSuccess()
  }else if (code === ''){
      dialogEmpty();
  }else {
      dialogError()
  }
})


//DIALOG SUCCESS
function dialogSuccess() {
  $("#dialog-success").removeClass("hidden");
}

//DIALOG EMPTY
function dialogError() {
  $("#dialog-error").removeClass("hidden");
}

//DIALOG EMPTY
function dialogEmpty() {
  $("#dialog-empty").removeClass("hidden");
}

.hidden{
  display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form method="post" action="">

        <div class="listen">
            <h2>Enter 6-digit code:</h2>
        </div>
        <div class="listen">
            <input type="text" maxlength="6" id="code" placeholder="XXXXXX" name="6digit" />
        </div>
        <div class="listen">
            <input class="orangebutton" id="opener" type="button" value="Proceed" />
        </div>
    </form>

<div id="dialog-empty" title="Error" class="hidden">
    <p>You have left field blank. Try again.</p>
</div>

<div id="dialog-error" title="Error" class="hidden">
    <p>You have entered wrong code. Try again.</p>
</div>

<div id="dialog-success" title="Success" class="hidden">
    <p>Congratulations! You will be proceeded to google.com.</p>
</div>

Here is the fiddle.

Answer 2

如果您正在使用 jquery 脚本，最好只使用 jquery。看起来您正在使用 jquery 对话框并希望根据条件打开。这是你想要的代码。

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
  <link rel="stylesheet" href="/resources/demos/style.css">
  <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
  <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script>
function checkCode(){
var value=$("#code").val();

if( value=== '123456'){
     $( "#dialog-success" ).dialog( "open" );
    //location.href = "http://google.com";
} 

else if (value === ''){
  
    $( "#dialog-empty" ).dialog( "open" );
    //location.href = "http://google.com";
} 

else {
   $( "#dialog-error" ).dialog( "open" );
   // location.href = "fail.html";
    return false;
}
}

// MULTIPLE FUNC    
$( function() {
 $( "#dialog-success" ).dialog( {
  autoOpen: false
});
 $( "#dialog-error" ).dialog( {
  autoOpen: false
} );
 $( "#dialog-empty" ).dialog({
  autoOpen: false
} );
});

function checkFunc() {
    checkCode();
}
</script>
</head>
<body>

<form name=method="post" action="">

        <div class="listen">
            <h2>Enter 6-digit code:</h2>
        </div>
        <div class="listen">
            <input type="text" maxlength="6" id="code" placeholder="XXXXXX" name="6digit" />
        </div>
        <div class="listen">
            <input class="orangebutton" id="opener" type="button" value="Proceed" onclick="checkFunc()" />
        </div>
    </form>

<div id="dialog-empty" title="Error">
    <p>You have left field blank. Try again.</p>
</div>

<div id="dialog-error" title="Error">
    <p>You have entered wrong code. Try again.</p>
</div>

<div id="dialog-success" title="Success">
    <p>Congratulations! You will be proceeded to google.com.</p>
</div>
</body>
</html>

在活动中 JavaScript

On event JavaScript

javascript

jquery

function

call