Ввод нескольких записей на одной HTML-странице - PullRequest
Новая
       0

Ввод нескольких записей на одной HTML-странице

0 голосов
/ 03 ноября 2019

Я создаю форму JS, в которой мне нужно 3 входа от пользователя, и после ввода 3 входов, нажав кнопку «Добавить запись», он должен отображать их на одной и той же странице один за другим (строка за строкой) для каждой кнопки. нажмите кнопку. С моим кодом он записывает каждую новую входную запись в той же строке, а не в следующей. Как это сделать ?

Мой результат:
Andrew Arts 2007 Evelyn Computers 2006

Ожидаемый результат:

Andrew Arts 2007

Evelyn Computers 2006 

function doSubmit() {


  document.getElementById('f1').innerHTML += document.myform.name.value + " ";
  document.getElementById('f1').innerHTML += document.myform.major.value + " ";
  document.getElementById('f1').innerHTML += document.myform.year.value + " ";



  return false;

}
<body>

  <form name="myform">
    <p>
      Name: &nbsp;&nbsp;&nbsp;<input name="name" size="30" type="text" /> course: <input name="major" size="30" type="text" /> Year : &nbsp;&nbsp;&nbsp;<input name="year" size="4" type="text" />
    </p>

    <input type="button" value="Add record" onClick='doSubmit(); return false' />

  </form>
  <p id='f1'></p>
</body>

Ответы [ 2 ]

0 голосов
/ 03 ноября 2019

Я бы предложил создать новый элемент p для каждого отправленного ввода. Вы также не хотите сохранять пользовательский ввод в innerHTML, потому что это может привести к атакам сценариев между сайтами. Чтобы предотвратить это, вы можете использовать innerText вместо этого. Вот пример того, как вы можете достичь всего этого с помощью своего кода: 

function doSubmit() {
    const newInputParagraph = document.createElement("p");

    newInputParagraph.innerText += document.myform.name.value + " ";
    newInputParagraph.innerText += document.myform.major.value + " ";
    newInputParagraph.innerText += document.myform.year.value + " ";

    document.getElementById("inputs").appendChild(newInputParagraph);
}

И вам нужно добавить контейнер для результатов ввода (простой div) в вашу разметку, например, так: 

<form name="myform">
    <p>
        Name: &nbsp;&nbsp;&nbsp;<input name="name" size="30" type="text" /> course: <input name="major" size="30" type="text" /> Year : &nbsp;&nbsp;&nbsp;<input name="year" size="4" type="text" />
    </p>

    <input type="button" value="Add record" onClick='doSubmit(); return false' />
</form>

<div id="inputs"></div>
0 голосов
/ 03 ноября 2019

Вы используете тег <br> для разрыва строки внутри тега <p>.

Вам просто нужно внести небольшое изменение в function: 

function doSubmit() {

    document.getElementById('f1').innerHTML += document.myform.name.value + " ";
    document.getElementById('f1').innerHTML += document.myform.major.value + " ";
    document.getElementById('f1').innerHTML += document.myform.year.value + " ";
    document.getElementById('f1').innerHTML +='<br />'

    return false;
  }

Если вы хотите стилизовать значения формы, было бы хорошо добавить тег <p>для каждого значения формы. Это потребует небольшого изменения, как показано ниже: 

function doSubmit() {

    document.getElementById('form-value').innerHTML += '<p>'+ document.myform.name.value + " " + document.myform.major.value + " " + document.myform.year.value + " " + "</p>";

    return false;

}

Ваш HTML: 

<body>

<form name="myform">
    <p>
        Name: &nbsp;&nbsp;&nbsp;<input name="name" size="30" type="text" /> course: <input name="major" size="30"
            type="text" /> Year : &nbsp;&nbsp;&nbsp;<input name="year" size="4" type="text" />
    </p>

    <input type="button" value="Add record" onClick='doSubmit(); return false' />

</form>
<div id="form-value">

</div>

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

Нет похожих вопросов

...