Что не так с моим кодом (относительно JS)?

Question

[SheikhRamil]

сделал это

<div class="container">
            <h2>Create your Google Account
            </h2>
        <div class="padding">
            <form onsubmit="submit('firstName', 'lastName', 'email', 'password', 'confirm');">
                <input type="text" id="firstName" class="firstName" placeholder="  First name"   onclick="firName();">
                <input type="text" id="lastName" class="lastName" placeholder="  Last name"  onclick="laName();">
                <br>
                <input type="email" id="email" class="email" placeholder="  Username"  onclick="firName();">
                <br>
                <span>You can use letters, numbers & periods                                                                                                                                                                                                                                    
                </span>
                <br>
                <span class="a"><a href="#" class="a">Use my current email address instead</span>
                <br>
                <input type="password" id="password" class="password" placeholder="  Password"  onclick="firName();">
                <input type="password" id="confirm" class="confirm" placeholder="  Confirm"  onclick="firName();">
                <p class="f">Use 8 or more characters with a mix of letters, numbers & <br>symbols</p>
                <p></p>
                <a href="file:///C:/Users/sds63/Desktop/HTML%20CSS/getElementById.html" class="s">Sign in instead</a>
                <input type="submit" value="Next" class="submit">
            </form>
        </div>
      </div>

body {
    width: 99%;
    height: 100%;
}
.container {
    width: 59%;
    height: 510px;
    border: 1px solid #d6d3d3;
    border-radius: 8px;
    margin: 30px auto;
}
h2 {
    margin: 80px 0 12px 35px;
    padding: 0px 0px 29px 0px;
    font-family: Arial, Helvetica, sans-serif;
    font-weight: lighter;
    letter-spacing: -.6px;
    font-size: 1.6em;
}
.padding {
    margin-left: 32px;
    margin-right: 347px;
}
input {
    border: 1px solid #d6d3d3;
    border-radius: 4px;
    padding: 10px 0;
    font-family: Arial, Helvetica, sans-serif;
}
.firstName {
    width: 162px;
    margin-right: 12px;
    margin-bottom: 21px;
    padding-left: 10px; 
}
.lastName {
    width: 162px;
    padding-left: 10px; 
}
.email {
    width: 352px;
    position: relative;
    margin-bottom: 6px;
    padding-left: 10px; 
}
.container::after {
    content: "@gmail.com"; /* Добавляемый текст */ 
      color: #333; /* Цвет текста */  
      font-size: 90%; /* Размер шрифта */ 
      padding: 2px; /* Поля вокруг текста */
      position: absolute;
      top: 250px;
      left: 575px; 
      font-family: Arial, Helvetica, sans-serif;
      font-size: 89%;
}
span {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 74%;
    font-weight: lighter;
    color: #444343;
    letter-spacing: .1px;
}
.a {
    text-decoration: none;
    position: relative;
    top: 4px;
    font-weight: bold;
    font-size: 89%;
    color: #5367cc;
    font-family: Arial, Helvetica, sans-serif;
}
.password {
    width: 142px;
    margin: 30px 12px 0 0;
    padding-left: 10px; 
}
.confirm {
    width: 142px;
    padding-left: 10px; 
}
.f {
    font-size: 85%;
    font-weight: normal;
    color: #333;
}
.s {
    text-decoration: none;
    float: left;
    margin-top: 42px;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 93%;
    font-weight: 500;
    color:  #2e50f8;
}
.submit {
    min-width: 89px;
    float: right;
    margin-top: 33px;
    background: #3052ff;
    cursor: pointer;
    transition: .1s;
    color: white;
    font-weight: 600;
    border: none;
}
.submit:hover {
    box-shadow: 0 0 1px 0px blue, 1px 1px 1px 1px blue inset;
    background:rgb(30, 53, 255);
}

function submit(g, l, e, p, c) {
    var fName = document.getElementById(g).value;
    var lName = document.getElementById(l).value;
    var email = document.getElementById(e).value;
    var password = document.getElementById(p).value;
    var confirm = document.getElementById(c).value;

    document.write(fName + " " + lName + " " + "<br>" + email + "<br>" + password + " " + confirm);

}

я хочу чтобы когда пользователь заполнил поля, данные показывалы на новой странице.Когда нажимаю на сабмит - js код не работает,подскажите что не так сделал? спасибо

Comments

[Andrey Vasilev]

и как ты планируешь просто так перенести данные с одной страницы на другую?

[Steppp]

Так надо обработчик вешать addEventListenet(`submit`)
Где ты взял этот код? Это старье!!!

Andrey Vasilev, А данные можно перенести через локальное хранилище (lockalStorgate) или куки

[SheikhRamil]

Andrey Vasilev, не перенести, через doucment.write, когда выполнится функция - будет чистая страница с данными - если перезагрузить то все вернется в изначальное положение

[SheikhRamil]

Steppp, куда вешать addEventListenet(`submit`)? куда надо перезаписать (еще не ознакомлен)

[Steppp]

Ramil_ Bayramov_, addEventListenet(`submit`) вешаешь на форму! И после нажатия на кнопку Next данные с формы отправляешь куда нужно! Или в локальное хранилище или на сервер

[Steppp]

Ramil_ Bayramov_, Извини, не увидел! У тебя и так на форме висит submit! Я думал ты находишь все поля, там что то делаешь, у тебя хоть и старый синтаксес кода, но не правильный! Надо так!

function submit(g, l, e, p, c) {
 document.write(`${g} ${l}
 ${e}
 ${p} ${c}`);

}

что то типа того должнобыть! Я не помню как точно! Смотри что в console.log() приходит

Answer 1

[Станислав Харахнин]

Есть проблема с именем функции и ее прерыванием.

1. Переименуйте функцию submit во что то другое, например, в submitForm
2. Прервите отправку самой формы. Добавьте например return false;

<form onsubmit="submitForm('firstName', 'lastName', 'email', 'password', 'confirm'); return false;">

3. У вас добавлены функции при клике не поля формы. В примере они отсутствуют. Обратите на это внимание
firName() и laName()

Вот итоговый пример с исправлениями

<div class="container">
    <h2>Create your Google Account
    </h2>
    <div class="padding">
        <form onsubmit="submitForm('firstName', 'lastName', 'email', 'password', 'confirm'); return false;">
            <input type="text" id="firstName" class="firstName" placeholder="  First name"   onclick="firName();">
            <input type="text" id="lastName" class="lastName" placeholder="  Last name"  onclick="laName();">
            <br>
            <input type="email" id="email" class="email" placeholder="  Username"  onclick="firName();">
            <br>
            <span>You can use letters, numbers & periods
                </span>
            <br>
            <span class="a"><a href="#" class="a">Use my current email address instead</a></span>
            <br>
            <input type="password" id="password" class="password" placeholder="  Password"  onclick="firName();">
            <input type="password" id="confirm" class="confirm" placeholder="  Confirm"  onclick="firName();">
            <p class="f">Use 8 or more characters with a mix of letters, numbers & <br>symbols</p>
            <p></p>
            <a href="file:///C:/Users/sds63/Desktop/HTML%20CSS/getElementById.html" class="s">Sign in instead</a>
            <input type="submit" value="Next" class="submit">
        </form>
    </div>
</div>

<script>
    function submitForm(g, l, e, p, c) {
        var fName = document.getElementById(g).value;
        var lName = document.getElementById(l).value;
        var email = document.getElementById(e).value;
        var password = document.getElementById(p).value;
        var confirm = document.getElementById(c).value;

        document.write(fName + " " + lName + " " + "<br>" + email + "<br>" + password + " " + confirm);

    }

    function firName() {}
    function laName() {}
</script>