Можно ли создать форму, используя только JS? - PullRequest
Новая
       19

Можно ли создать форму, используя только JS?

0 голосов
/ 29 октября 2009

Я пытаюсь создать форму, используя только JavaScript. Я имею в виду создание формы для веб-страницы, добавление к ней элементов, установка их значений и отправка формы.
Более того, если в браузере отключен JavaScript, должна быть отправлена ​​обычная HTML-форма.

Есть ли способ добиться этого?

Спасибо всем.

Ответы [ 4 ]

2 голосов
/ 29 октября 2009

Иметь нормальную форму HTML, скрыть ее с помощью JS. Хороший способ сделать это без мерцания: 

<body>
  <script type="text/javascript">
    document.getElementsByTagName('body')[0].className = "js"
  </script>
  <style type="text/css">
    body.js #no_javascript_form { display: none; }
  </style>
  <form id="no_javascript_form">...</form>
</body>

Затем создайте <form> динамически. С помощью jQuery вы можете сделать: 

<div id="form_placeholder"></div>
<script type="text/javascript">
  $('#form_placeholder').append(
    $('<form/>')
      .append('<input type="text"/>')
      .append('<button type="submit">submit</button>')
  );
</script>
1 голос
/ 29 октября 2009

Кроме того, это также может быть достигнуто с помощью someDiv.innerHTML. 

#!javascript
var formDiv = document.getElementById('my_form_div');    // you hopefully have a better method to do this ;)
if (formDiv) {
    var HTML = '<form method="GET" action="?submit" onsubmit="return !formSubmitted()">';
    HTML += '<input type="text" name="field1" />';
    HTML += '<input type="text" name="field2" />';
    HTML += '<input type="submit" value="go" />';
    HTML += '</form>';
    formDiv.innerHTML = HTML;
}

Обратите внимание на функцию formSubmitted(). Эта функция вызывается правильно, когда пользователь отправляет форму, затем вы можете делать все, что хотите, в JS, например, отправлять значения формы через AJAX, и если вы возвращаете true (например, когда вы успешно обработали форму в JS), значение true инвертируется в false , и форма не будет отправлена ​​через браузер. Если пользователь отключил JS, форма будет просто отправлена ​​браузером стандартным способом.

Преимущество этого в том, что вы можете получить желаемую форму HTML через AJAX, сгенерированную PHP, и вы можете поместить точно такой же HTML в теги < noscript > для тех, у кого деактивирован JS, вызвав ту же функцию PHP для получите HTML: 

... some HTML
<div id="my_form_div">
<noscript>
    <?= myFormHTML() ?>    # equal to: <?php echo myFormHTML() ?>
</noscript>
... more HTML
1 голос
/ 29 октября 2009 
var input = document.createElement('input');
    input.name = 'generated_input';
    document.getElementbyId('inputs_contained').appendChild(input);

Смотрите здесь - Добавление нового текстового поля с использованием JavaScript

0 голосов
/ 29 октября 2009

Вы также можете легко добавить html для формы через javascript, используя что-то вроде append метода

в jQuery.
...