如何根据文本输入修复jquery网站重定向

时间：2019-06-14 00:50:07

标签： javascript jquery html css

假设某客户希望通过访问我们的网站来访问其网络邮件。当他们进入自己的域并单击“登录”时，将显示一个表单，它们将被自动重定向到[domain] / webmail。

这是针对运行MySQL 5，PHP 7.1的新WordPress网站。我尝试删除表单标签，希望这可能是问题的根本原因。但是，问题仍然存在。当他们输入自己的域时。

我可以确认不需要使用表单标签，因为我拥有有效的脚本，但是在尝试集成时会遇到错误。

实施表单标签时，会将用户重定向到同一页面，但带有/？最后查询。

无效代码：

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
body {font-family: Arial, Helvetica, sans-serif;}
* {box-sizing: border-box;}

/* Button used to open the contact form - fixed at the bottom of the page */
.open-button {
  background-color: #555;
  color: white;
  padding: 16px 20px;
  border: none;
  cursor: pointer;
  opacity: 0.8;
  position: fixed;
  bottom: 23px;
  right: 28px;
  width: 280px;
}

/* The popup form - hidden by default */
.form-popup {
  display: none;
  position: fixed;
  bottom: 0;
  right: 15px;
  border: 3px solid #f1f1f1;
  z-index: 9;
}

/* Add styles to the form container */
.form-container {
  max-width: 300px;
  padding: 10px;
  background-color: white;
}

/* Full-width input fields */
.form-container input[type=text], .form-container input[type=password] {
  width: 100%;
  padding: 15px;
  margin: 5px 0 22px 0;
  border: none;
  background: #f1f1f1;
}

/* When the inputs get focus, do something */
.form-container input[type=text]:focus, .form-container input[type=password]:focus {
  background-color: #ddd;
  outline: none;
}

/* Set a style for the submit/login button */
.form-container .btn {
  background-color: #4CAF50;
  color: white;
  padding: 16px 20px;
  border: none;
  cursor: pointer;
  width: 100%;
  margin-bottom:10px;
  opacity: 0.8;
}

/* Add a red background color to the cancel button */
.form-container .cancel {
  background-color: red;
}

/* Add some hover effects to buttons */
.form-container .btn:hover, .open-button:hover {
  opacity: 1;
}
</style>
</head>
<body>

<h2> Form</h2>

<button class="open-button" onclick="openForm()">Open Form</button>
<div class="form-popup" id="myForm">
  <div class="form-container">
    <h1>Login</h1>
<form>

    <label><b>Email</b></label>
        <div>
             <input type="text" class="form-control webmail-input" placeholder="Your domain name">
        </div>
        <div>
            <button class="btn webmail-btn">Webmail Login</button>
        </div>
    <button type="button" class="btn cancel" onclick="closeForm()">Close</button>
  </div>
    </form>
</div>

  <script>
function openForm() {
  document.getElementById("myForm").style.display = "block";
}

function closeForm() {
  document.getElementById("myForm").style.display = "none";
}





jQuery(document).ready(function($){

    function stripDomainTotally(the_domain) {
        //remove www http https
        the_domain = the_domain.replace('https://','');
        the_domain = the_domain.replace('http://','');
        the_domain = the_domain.replace('www.','');
        return the_domain;
    }

    function getWebmail(domain){
        var strip_domain = stripDomainTotally(domain);
        if(strip_domain != ""){
            window.location.href = "https://"+strip_domain+"/webmail";
        }
    }

    $('.webmail-click').click(function () {
        if($('.webmail-drop').css('display') == 'none'){
            $('.webmail-drop').fadeIn("fast");
        }else{
            $('.webmail-drop').fadeOut("fast");
        }
    });
    $('.webmail-input').keyup(function (e) {
        if (e.which == 13) {
            var domain = $('.webmail-input').val();
            getWebmail(domain);
            return false;
        }
    });
    $('.webmail-btn').click(function () {
        var domain = $('.webmail-input').val();
        getWebmail(domain);
    });

    $(document).on('click touchstart', function (event) {
        if ($(event.target).is('.webmail-drop *, .webmail-drop')){

        }else if ($(event.target).is('.webmail-click *, .webmail-click')){

        }else{
            $('.webmail-drop').fadeOut("fast");
        }
    });
});
</script>

</body>
</html>

工作代码：

<div class="webmail-drop">

        <div class="col-xs-8">
            <input type="text" class="form-control webmail-input" placeholder="Your domain name">
        </div>
        <div class="col-xs-4">
            <button class="webmail-btn">Webmail Login</button>
        </div>
</div>

<script>
jQuery(document).ready(function($){

    function stripDomainTotally(the_domain) {
        //remove www http https
        the_domain = the_domain.replace('https://','');
        the_domain = the_domain.replace('http://','');
        the_domain = the_domain.replace('www.','');
        return the_domain;
    }

    function getWebmail(domain){
        var strip_domain = stripDomainTotally(domain);
        if(strip_domain != ""){
            window.location.href = "https://"+strip_domain+"/webmail";
        }
    }

    $('.webmail-click').click(function () {
        if($('.webmail-drop').css('display') == 'none'){
            $('.webmail-drop').fadeIn("fast");
        }else{
            $('.webmail-drop').fadeOut("fast");
        }
    });
    $('.webmail-input').keyup(function (e) {
        if (e.which == 13) {
            var domain = $('.webmail-input').val();
            getWebmail(domain);
            return false;
        }
    });
    $('.webmail-btn').click(function () {
        var domain = $('.webmail-input').val();
        getWebmail(domain);
    });

    $(document).on('click touchstart', function (event) {
        if ($(event.target).is('.webmail-drop *, .webmail-drop')){

        }else if ($(event.target).is('.webmail-click *, .webmail-click')){

        }else{
            $('.webmail-drop').fadeOut("fast");
        }
    });
});
</script>

页面上的URL结束查询刷新。例如[当前页面/域] /？

当用户单击按钮并输入其域时，应将其重定向到其域/网络邮件。

1 个答案:

答案 0 :(得分：0)

问题是：用户被重定向到samepage/?，因为这是表单的默认重定向。您可以通过在表单中​​添加action = "anypage.php"来进行检查。

  • 要避免表单的默认重定向，您需要e.preventDefault();之一，如下面的代码所示，或者单击事件结束时return false;

  • 也不需要通过 Enter 检查。进行keyup事件。只需将type="submit"添加到webmail-btn按钮，它将为您完成工作

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
body {font-family: Arial, Helvetica, sans-serif;}
* {box-sizing: border-box;}

/* Button used to open the contact form - fixed at the bottom of the page */
.open-button {
  background-color: #555;
  color: white;
  padding: 16px 20px;
  border: none;
  cursor: pointer;
  opacity: 0.8;
  position: fixed;
  bottom: 23px;
  right: 28px;
  width: 280px;
}

/* The popup form - hidden by default */
.form-popup {
  display: none;
  position: fixed;
  bottom: 0;
  right: 15px;
  border: 3px solid #f1f1f1;
  z-index: 9;
}

/* Add styles to the form container */
.form-container {
  max-width: 300px;
  padding: 10px;
  background-color: white;
}

/* Full-width input fields */
.form-container input[type=text], .form-container input[type=password] {
  width: 100%;
  padding: 15px;
  margin: 5px 0 22px 0;
  border: none;
  background: #f1f1f1;
}

/* When the inputs get focus, do something */
.form-container input[type=text]:focus, .form-container input[type=password]:focus {
  background-color: #ddd;
  outline: none;
}

/* Set a style for the submit/login button */
.form-container .btn {
  background-color: #4CAF50;
  color: white;
  padding: 16px 20px;
  border: none;
  cursor: pointer;
  width: 100%;
  margin-bottom:10px;
  opacity: 0.8;
}

/* Add a red background color to the cancel button */
.form-container .cancel {
  background-color: red;
}

/* Add some hover effects to buttons */
.form-container .btn:hover, .open-button:hover {
  opacity: 1;
}
</style>
</head>
<body>

<h2> Form</h2>

<button class="open-button" onclick="openForm()">Open Form</button>
<div class="form-popup" id="myForm">
  <div class="form-container">
    <h1>Login</h1>
<form>

    <label><b>Email</b></label>
        <div>
             <input type="text" class="form-control webmail-input" placeholder="Your domain name">
        </div>
        <div>
            <button type="submit" class="btn webmail-btn">Webmail Login</button>
        </div>
    <button type="button" class="btn cancel" onclick="closeForm()">Close</button>
  </div>
    </form>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script>
function openForm() {
  document.getElementById("myForm").style.display = "block";
}

function closeForm() {
  document.getElementById("myForm").style.display = "none";
}





jQuery(document).ready(function($){

    function stripDomainTotally(the_domain) {
        //remove www http https
        the_domain = the_domain.replace('https://','');
        the_domain = the_domain.replace('http://','');
        the_domain = the_domain.replace('www.','');
        return the_domain;
    }

    function getWebmail(domain){
        var strip_domain = stripDomainTotally(domain);
        if(strip_domain != ""){
            console.log("https://"+strip_domain+"/webmail");
            //window.location.href = "https://"+strip_domain+"/webmail";
        }
    }

    $('.webmail-click').click(function () {
        if($('.webmail-drop').css('display') == 'none'){
            $('.webmail-drop').fadeIn("fast");
        }else{
            $('.webmail-drop').fadeOut("fast");
        }
    });
    
    $('.webmail-btn').click(function (e) {
        e.preventDefault();
        var domain = $('.webmail-input').val();
        getWebmail(domain);
    });

    $(document).on('click touchstart', function (event) {
        if ($(event.target).is('.webmail-drop *, .webmail-drop')){

        }else if ($(event.target).is('.webmail-click *, .webmail-click')){

        }else{
            $('.webmail-drop').fadeOut("fast");
        }
    });
});
</script>

</body>
</html>

相关问题
最新问题