Question

因此，我尝试使用单个提交输入在一种表单上执行两项操作。我可以在电子邮件中填写表格，这是我想要的，但我想重定向到确认页面。我在这里查看了其他查询，但他们似乎没有打开页面。我看到其他人能够锚定这是我主要尝试的方法，并且我尝试在ValidateForm（）脚本中运行jquery函数，但也无法打开页面。

HTML

    <head>
        <title>Form</title>
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <script
  src="https://code.jquery.com/jquery-3.4.1.min.js"
  integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo="
  crossorigin="anonymous" type="text/javascript"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.maskedinput/1.4.1/jquery.maskedinput.js" type="text/javascript"></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

    <link rel="stylesheet" href="/css/styles.css">
    <meta charset="UTF-8">

    <script src="/js/Validate.js">

    </script>


    <style type="text/css">
  html, body{
    height: 100%;
  }

  body{
    width: 100%;
    background-image: url(/img/BpD6ruBXZqiH2Qvq4axJXZ.jpg);
    background-size: cover;
    background-repeat: no-repeat;
  }
</style>
<body>
<div class="container">
   <form name=”inputForm” onsubmit="return ValidateForm()" action="mailto:c.esteves@chcfl.org?Subject=Customer info" method="post" enctype="text/plain">

    <div class="row">
    <div class="col-25">
        Input First Name: <red>* required</red>
    </div>
    <div class="col-75">
        <input id="fnameID" type=”text” name=fName required="required"/>
    </div>
    </div>
          <br>
    <div class="row">
    <div class="col-25">
        Input Last Name: <red>* required</red>
    </div>  
    <div class="col-75">
        <input id="lnameID" type=”text” name=lName required="required"/>
          <br>
       </div>
    </div>   
    <div class="row">
    <div class="col-25">
        Input Date before today: <red>* required</red>
    </div>  
    <div class="col-75">
        <input id="birthID" type=”date” name=birth placeholder="mm/dd/yyyy" required="required"/>
          <br>
          </div>
    </div>
    <div class="row">
    <div class="col-25">
        Input E-mail: <red>* required</red>
    </div>  
    <div class="col-75">
        <input id="email" type="email" placeholder="name@domain.com" name=email required="required"/>
          <br>
          </div>
    </div>
    <div class="row">
    <div class="col-25">
        Input Phone Number: <red>* required</red>
    </div>  
    <div class="col-75">
        <input id="phone" type="phone" placeholder="+1(555)555-5555" name=phone required="required"/>
          <br>
          </div>
    </div>
          <br>

    <div class="row">
    <div class="col-25">
        Message: <br>
    </div>
        <div class="col-75">
        <textarea name=message id="message" cols="30" rows="1"></textarea> <br>
    </div>
    </div>
    <br>
    <div class="row">
    <div class="col-25">
        Security Question: <red>* required</red>
    </div>  
    <div class="col-75">
        <input id="verify" type=”text” name=verify placeholder="Dog talk and tree clothes?" required="required"/>
          <br>
          </div>
    </div>

<div class="row">
    </div>
          <a link href="http://www.analog-gamers.com/confirmationpage.html" ><input type="submit" value="send" name="submit"></a>
          <input type="reset" name="reset" value="reset"/><br>
</div>
    </form>
</body>'''




```function ValidateForm(){
 var fName = document.getElementById("fnameID").value;
 if(!ValidateNotBlank(fName,"First Name")) return false;

var lName = document.getElementById("lnameID").value;
 if(!ValidateNotBlank(lName,"Last Name")) return false;

 var bDay = document.getElementById("birthID").value;
 if(!ValidateNotBlank(bDay,"Date")) return false;

var email = document.getElementById("email").value;
if(!ValidateNotBlank(email,"Email")) return false;

if(!ValidateEmail(email,"Email")) return false;

if(!ValidateDate()) return false;

var number1 = document.getElementById("phone").value;
if(!phoneLength(number1,"phone")) return false;

if(!securityQuestiony()) return false;

    return true;

}```

Answer 1

首先删除包裹a的{{1}}。

现在，我想input可能会返回更多的验证，因此您只需要在最终条件中添加如下内容：

function verify()

如果这不起作用，请共享更多代码。

一般示例：

if (validation is ok) { document.location.assign('http://www.analog-gamers.com/confirmationpage.html');}
else { show errors }

Answer 2

如果您要重定向到“确认”页面，则可以在自己的内部添加重定向代码

ValidateForm（）

像这样：

ValidateForm(){
   e.preventDefault(); 
   window.location.replace("test.xyz");
   }

但是请记住，这将取消您的原始提交操作。

希望我的问题正确。

Answer 3

我已经定义了一个标签，其中包含不带（type = submit）输入或格式不正确的输入，可以成功启动到新站点，因此我猜想表单提交按钮禁止将其他点击事件添加到该按钮。

听完提交事件并使用JS重定向到新地址也是一种方法。

Answer 4

在当前window上添加一个短计时器，以异步方式重定向页面。

function ValidateForm () {

    // whatever validations you need

    window.redirectTimer = setTimeout({
        window.location = "http://www.stackoverflow.com";
    }, 250);

    if( !securityQuestion() ) return false;

    return true;
}

这会将重定向设置为在250毫秒内发生，并根据您的需要对其进行调整。使用回调之类的方法可以更有效地解决该问题，因为有时不赞成使用计时器，但这将需要对代码进行更复杂的更改，即，手动处理数据提交，而不仅仅是指定action。 / p>

如何使用一个提交表单执行两项单独的操作

4 个答案: