Как создать форму динамически с помощью JavaScript?

Я хочу создать невидимую форму в любом месте HTML-страницы динамически с помощью JavaScript, а затем автоматически отправить. Я хочу создать форму, приведенную ниже:

<form name='myForm' method='post' action='http://www.another_page.com/index.htm'>
<input type='text' name='myInput' value='Values of my input'>
<input type='hidden1' value='Hidden value 1'>
<input type='hidden2' value='Hidden value 2'>
</form>

Я попытался использовать JavaScript ниже:

my_form=document.createElement('FORM');
my_form.name='myForm';
my_form.method='POST';
my_form.action='http://www.another_page.com/index.htm';
my_tb=document.createElement('INPUT');
my_tb.type='TEXT';
my_tb.name='myInput';
my_tb.value='Values of my Input';
my_tb.appendChild(my_form);
document.body.add(my_form,document.body.elements[0]);
document.my_form.submit();

Но не работает? Как я могу это сделать? Пожалуйста, помогите.

Ответы

Ответ 1

Вы добавляете элемент формы как дочерний элемент текстового поля.

my_tb.appendChild(my_form);

Должно быть

my_form.appendChild(my_tb);

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

Другая проблема - попытка ссылки на форму как document.xxx означает, что xxx - это имя формы. Но в любом случае попробуйте

my_form=document.createElement('FORM');
my_form.name='myForm';
my_form.method='POST';
my_form.action='http://www.another_page.com/index.htm';

my_tb=document.createElement('INPUT');
my_tb.type='TEXT';
my_tb.name='myInput';
my_tb.value='Values of my Input';
my_form.appendChild(my_tb);

my_tb=document.createElement('INPUT');
my_tb.type='HIDDEN';
my_tb.name='hidden1';
my_tb.value='Values of my hidden1';
my_form.appendChild(my_tb);
document.body.appendChild(my_form);
my_form.submit();

Ответ 2

              var myform = document.createElement("form");

                product = document.createElement("input");
                product.value = JSProduct;
                product.name = "Product";
                myform.action = "myForm.aspx";
                myform.method = "post";
                form1.appendChild(product);
                document.body.appendChild(form1);
                form1.submit();

Это создаст форму и имеет дочерний элементный продукт ( "Тип ввода" ), вы должны добавить дочерний элемент к родительскому элементу, например, к форме и форме для тела и документа DOM root elemnt, и вы можете добавить атрибут форма как действие и метод , это будет делать ваше дело.

Ответ 3

Вы также можете сделать ответ Saurabh Chauhan, но без добавления динамического элемента в тело Это решение является всем динамическим решением.

    var myform = document.createElement("form");
    myform.action = "myForm.aspx";
    myform.method = "post";


    product = document.createElement("input");
    product.value = "value";
    product.name = "name";

    myform.appendChild(product);
    myform.submit();

Ответ 4

Вы можете попробовать простой подход к использованию:

<script type="text/javascript">document.write("[the form HTML]");</script>

внутри тела где-то. Затем, чтобы отправить форму, добавьте:

<script type="text/javascript">document.my_form.submit();</script>

Это предотвращает ошибки при создании DOM программно.