Как сделать этот код проверенным перед переходом на следующую страницу? - PullRequest
0 голосов
/ 01 апреля 2020

Проблема с этим html кодом формы набора полей состоит в том, что когда я нажимаю кнопку «Отправить», она делает go на следующей странице, но если я удаляю «следующий» из класса кнопки, она проверяется, но не go на следующую страницу. Исправьте это для меня, пожалуйста.

Проблема с этим html кодом формы набора полей состоит в том, что когда я нажимаю кнопку отправки, он делает go на следующей странице, но если я удаляю «следующий "из класса кнопки он проверяет, но не go на следующую страницу. Исправьте его, пожалуйста.

Проблема с этим кодом формы html fieldset заключается в том, что когда я нажимаю кнопку отправки, делает go на следующей странице, но если я удаляю «next» из класса кнопок, он проверяется, но не go на следующей странице. Исправьте это для меня, пожалуйста.

Я повторил выше детали, потому что по какой-то причине я не смог опубликовать свой код, извините за это.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "[http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd](http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd)">
<html xmlns="[http://www.w3.org/1999/xhtml](http://www.w3.org/1999/xhtml)">
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style type="text/css">
fieldset {
border: 0;
}

</style>
</head>

<style>
* {
  box-sizing: border-box;
}

body {
  background-image: url("ok.png");
  background-repeat: no-repeat;
}

h1 {
  text-align: center;  
}

input {
  padding: 10px;
  font-size: 17px;
  font-family: Raleway;
  border: 1px solid #aaaaaa;
}

/* comment */


button {
  background-color: #4CAF50;
  color: #ffffff;
  border: none;
  padding: 10px 20px;
  font-size: 17px;
  font-family: Raleway;
  cursor: pointer;
}

button:hover {
  opacity: 0.8;
}

}


</style>


<body>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<section>
  <fieldset>
  <br><br><br><br>
    <label>Q1</label>

    <form id="myForm1">
  <div class="form-row">
    <div class="col-md-4 mb-3">

      <input type="text" class="form-control" placeholder="First Book" value="" required><br>
      <input type="text" class="form-control" placeholder="Second Book" value="" required ><br>

    </div>
</form>
  <button class="next btn btn-primary btn-block" type="submit" onclick="ShowText1();"  >Submit form</button>


<script>
    function ShowText1(){
    // find each input field inside the 'myForm' form:
    var inputs = myForm1.getElementsByTagName('input');
    // declare 'box' variable (textarea element):
    var box = document.getElementById('show');
    // clear the 'box':
    box.value = '';
    // loop through the input elements:
    for(var i=0; i<inputs.length; i++){
        // append 'name' and 'value' to the 'box':
        box.value +=inputs[i].value+'\n';
    }
}
</script>
</fieldset>
<fieldset>

    <label>Q2</label>
    <form id="myForm">
        <input id="show" type="text" name="name" placeholder="Books"/><br/>
    <input type="text" name="age"  placeholder="Age"/><br/>
    <input type="text" name="status" placeholder="Status"/><br/>

</form>
    <button ID="idsend" type="submit"  >Submit</button>

</fieldset>


</section>
</body>
</html>

<script>
var len=$("section:first").children().length;
var i=0;
var s=0;
$(".next").click(function(){
i++;
if(len==i){
var p=$(this).parent().parent('section').next();
p.show();
p.children().first().show();
len=0;
i=0;
len=p.children().length;

$(this).parent().parent().hide();

}
else{
$(this).parent().next().show();
$(this).parent().hide();
}
});
$(document).ready(function(){
$("section").hide();
$("section:first").show();
$("fieldset").hide();
$("fieldset:first").show();
});

</script>

<script>
#form section:not(:first-of-type) {
  display: none;
}

#form fieldset:not(:first-of-type) {
  display: none;
}
.hide{
  display:none;

}
</script>


1 Ответ

0 голосов
/ 01 апреля 2020

Я обнаружил ошибку, которая приводила к сбою кода, с помощью программы проверки ошибок Dreamweaver / lint. Не было закрывающего тега </div> для <div class="form-row">. Это означало, что теги <form id="myForm1"></form> не могли работать должным образом, потому что отсутствовал закрывающий </div> и это приводило в замешательство программу из-за функции кода.

Ваш код, в котором произошла ошибка:

<form id="myForm1">
  <div class="form-row">
    <div class="col-md-4 mb-3">

      <input type="text" class="form-control" placeholder="First Book" value="" required><br>
      <input type="text" class="form-control" placeholder="Second Book" value="" required ><br>

    </div>
</form>

Я также рекомендую поместить теги <script></script> в теги <head></head> или <body></body>, поскольку они будут загружаться лучше или немного быстрее, а также это обычная практика так.

Справочник, где <script></script> теги должны go: Где поместить теги в HTML разметке?

Ссылка на HTML Lint для незначительного уменьшения количества ошибок в вашем коде: https://www.freeformatter.com/html-validator.html

Чтобы использовать HTML Lint, просто скопируйте код, вставьте его на веб-сайт и нажмите «Подтвердить» HTML .

Добро пожаловать. : D

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...