JavaScript, чтобы проверить и открыть страницу

Question

Я пытаюсь использовать форму с одним вводом, которая будет запрашивать 4-буквенный «секретный» код (например, «a123»).Сценарий проверит, существует ли соответствующая страница (например: https://example.com/a123). Если она существует, страница открывается (в _self). Если этого не происходит, отображается сообщение об ошибке.

Код нижене дает ожидаемого результата, он просто обновляет страницу независимо от того, совпадает ли мой код или нет, хотя URL получает добавленный параметр (например: https://example.com/secret-code/?code=a123).

Функции в заголовке:

function checkUrl(url) {
        var request = false;
        if (window.XMLHttpRequest) {
                request = new XMLHttpRequest;
        } else if (window.ActiveXObject) {
                request = new ActiveXObject("Microsoft.XMLHttp");
        }

        if (request) {
                request.open("GET", url);
                if (request.status == 200) { return true; }
        }

        return false;
}

function validateCode() {
    var x = document.forms["secret"]["code"].value;
	if (x == "") {
        document.getElementById("alertmsg").innerHTML = "Enter a code.";
    }
    if (checkUrl("https://www.example.com/" + x)) 
        {
			window.open("https://www.example.com/" + x,"_self");
        } else {
			document.getElementById("alertmsg").innerHTML = "Invalid Code. Try again.";
        }
}

Форма в теле:

<form name="secret" onsubmit="validateCode()">
Code secret : <input type="text" name="code" size="4" maxlength="4" text-transform="uppercase"/>
<div id="alertmsg" style:"color:red;font-weight:bold"></div>
<input type="submit" value="Validate" />
</form>

Я в тупике.Спасибо за помощь в поиске проблемы ...

Answer 1

Добавление другого ответа.

1. Удалено form тег.
2. Изменен тип кнопки на button с submit.
3. Добавлено onclick событие button для вызова validateCode() функции.
4. Изменен способ получения значения секретного кода x;
5. Возникла другая проблема с пустыми данными (пустая строка), что должно быть в случае else.Теперь обработано.

function checkUrl(url) {
  var request = false;
  if (window.XMLHttpRequest) {
    request = new XMLHttpRequest;
  } else if (window.ActiveXObject) {
    request = new ActiveXObject("Microsoft.XMLHttp");
  }

  if (request) {
    request.open("GET", url);
    request.send();
    if (request.status == 200) {
      return true;
    }
  }

  return false;
}

function validateCode() {
  var x = document.getElementById('code').value;
  if (x == "") {
    document.getElementById("alertmsg").innerHTML = "Enter a code.";
  } else {
    if (checkUrl("https://www.example.com/" + x)) {
      window.open("https://www.example.com/" + x, "_self");
    } else {
      document.getElementById("alertmsg").innerHTML = "Invalid Code. Try again.";
    }
  }
  return false;
}

Code secret : <input id="code" type="text" name="code" size="4" maxlength="4" text-transform="uppercase" />
<div id="alertmsg" style: "color:red;font-weight:bold"></div>
<input type="button" value="Validate" onclick="validateCode()" />

Answer 2

Я сделал несколько изменений, но не проверял код, потому что у него cross проблема происхождения.

Надеюсь, это сработает для вас.

1. Добавлено return в <form name="secret" onsubmit="return validateCode()">
2. Добавлена ​​функция return false; в validateCode().Поскольку вы столкнулись с проблемой перезагрузки страницы из-за отправки формы.
3. Добавлен request.send();, поскольку вы просто устанавливали open ссылку, но не отправляли запрос.

function checkUrl(url) {
  var request = false;
  if (window.XMLHttpRequest) {
    request = new XMLHttpRequest;
  } else if (window.ActiveXObject) {
    request = new ActiveXObject("Microsoft.XMLHttp");
  }

  if (request) {
    request.open("GET", url);
    request.send();
    if (request.status == 200) {
      return true;
    }
  }

  return false;
}

function validateCode() {
  var x = document.forms["secret"]["code"].value;
  if (x == "") {
    document.getElementById("alertmsg").innerHTML = "Enter a code.";
  }
  if (checkUrl("https://www.example.com/" + x)) {
    window.open("https://www.example.com/" + x, "_self");
  } else {
    document.getElementById("alertmsg").innerHTML = "Invalid Code. Try again.";
  }
  return false;
}

<form name="secret" onsubmit="return validateCode()">
  Code secret : <input type="text" name="code" size="4" maxlength="4" text-transform="uppercase" />
  <div id="alertmsg" style: "color:red;font-weight:bold"></div>
  <input type="submit" value="Validate" />
</form>