在表单的onSubmit中执行错误处理和重定向需要什么顺序?

时间:2019-05-20 17:02:19

标签: javascript html forms validation

我正在创建一个退出页面。我是JavaScript的新手,在确定如何执行任务以及执行顺序方面遇到了一些麻烦。这是我要完成的工作:

  1. 用户需要选择一个单选按钮选项。没有是不可选择的。如果选中了第二个或第三个单选按钮,则需要验证相应的文本框中是否有内容。
  2. 提交表单时,我需要它在表单通过验证后将其动态重定向到其他页面。
  3. 我需要将表单发布到其重定向到的任何页面上。

当前,如果验证失败,它将重新加载页面。如果选择了任何单选按钮(无论文本框如何),它将正确重定向。

我知道我一定想念一些愚蠢的东西。有人看到任何明显的错误吗?

代码:

function NewPage(form, name) {

  //get The Elements From The Form
  var getRequestForm = document.getElementById("requestForm");

  //these are the Elements From The Form
  var x = document.forms["requestForm"]["radio1"].value;
  var a = document.forms["requestForm"]["radio2"].value;
  var b = document.forms["requestForm"]["radio3"].value;
  var y = document.forms["requestForm"]["ChangeEmailAddress"].value;
  var z = document.forms["requestForm"]["Unsubscribe"].value;

  //now lets print them
  Console.log(x);
  Console.log(a);
  Console.log(b);
  Console.log(y);
  Console.log(z);

  var submit = true;

  if (x == null && a == null && b == null) {
    nameError = "Please select an option";
    document.getElementById("name_error").innerHTML = nameError;
    submit = false;
  }

  if (y == undefined && a != undefined) {
    emailError = "Please enter your email";
    document.getElementById("email_error").innerHTML = emailError;
    submit = false;
  }

  return submit;

  function removeWarning() {
    document.getElementById(this.id + "_error").innerHTML = "";
    document.getElementById("ChangeEmailAddress").onkeyup = removeWarning;
  }

  for (var i = 0, radio = form.elements; i < radio.length; i++) {
    if (radio[i].name == name && radio[i].checked) {
      form.action = radio[i].value;
    }
  }
}
  input[type=submit] {
  border: 1px solid #603795;
  color: #fff;
  background: #603795;
  padding: 18px 45px;
  Margin-left: 0px;
  border-radius: 3px;
  -webkit-appearance: none;
}

@media screen and (max-width: 600px) {
  .col-25,
  .col-75,
  input[type=submit] {
    width: 35%;
    margin-left: -0px;
  }
<div align="center">
  <div style="align: center; width: 100%; height: 100%;">
    <form action="#" method="post" id="requestForm" name="requestForm" onsubmit=" NewPage(this, 'radio');">
      <span class="error"><p id="name_error"></p></span>
      <span class="error"><p id="email_error"></p></span>

      <label class="container"> Never mind. I don't want to unsubscribe at all.
                    <input type="radio" id="radio1" name="radio" value="%%=RedirectTo(CloudPagesURL(159))=%%">
                    <span class="checkmark"></span>
                </label>

      <br><br>

      <label class="container">Actually, I just want to use another email address instead:
                    <input type="radio" id="radio2" name="radio" value="%%=RedirectTo(CloudPagesURL(160))=%%">
                    <span class="checkmark"></span>
                </label>

      <br>

      <div>
        <input type="text" size="50" id="ChangeEmailAddress" name="ChangeEmailAddress" placeholder="Email Address">
      </div>

      <br><br>

      <label class="container">Sorry, but I'd like to unsubscribe:
                    <input type="radio" id="radio3" name="radio" value="%%=RedirectTo(CloudPagesURL(161))=%%">
                    <span class="checkmark"></span>
                </label>

      <br>

      <div>
        <input type="text" id="Unsubscribe" name="Unsubscribe" size="50" placeholder="Email Address" value="%%emailaddr%%">
      </div>

      <br><br>

      <input type="submit" value="Submit" onsubmit="NewPage(this, 'radio');">

      <br><br><br>
    </form>

  </div>

  <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">

</div>

0 个答案:

没有答案