jquery приложение к форме - PullRequest
Новая
       21

jquery приложение к форме

0 голосов
/ 14 апреля 2010

1001 * JQuery * 

$(function(){
 $('#4').click(function() {
 $('<input name="if4" type="text" value="other price>"').appendTo('form');
   });
 });

HTML 

    <form>
< input name="name" type="text" value="Enter your name" /><br />
< input name="contacts" type="text" value="Contact info" /><br />
< select name="services">
< option value="1">1</option>
< option value="2">2</option>
< option value="3">3</option>
< option id="4" value="Other">4</option>
< /select><br />
< textarea name="description">Description</textarea><br />
< /form>

Что я хочу сделать:

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

Но как я могу изменить порядок появления поля ввода, потому что теперь оно появляется после текстового поля, как я могу поставить его после?

Спасибо

Ответы [ 2 ]

6 голосов
/ 14 апреля 2010 
// Inserts last in any <form>
$('<p>Test</p>').appendTo('form');

// Inserts first in any <form>
$('<p>Test</p>').prependTo('form');

// Inserts right before any <textarea> in any <form>
$('<p>Test</p>').insertBefore('form textarea');

// Inserts right after any <textarea> in any <form>
$('<p>Test</p>').insertAfter('form textarea');
0 голосов
/ 14 апреля 2010

Я думаю, вы хотите что-то подобное. Обратите внимание на измененный идентификатор для опции и идентификатор, добавленный к элементу select, чтобы разрешить позиционирование нового элемента ввода:

JQuery: 

$(function() {
    $('#opt4').click(function() {
        $('<input name="if4" type="text" value="other price">').insertAfter('#services');
    });
});

HTML: 

<form>
    <input name="name" type="text" value="Enter your name" /><br />
    <input name="contacts" type="text" value="Contact info" /><br />
    <select id="services" name="services">
        <option value="1">1</option>
        <option value="2">2</option>
        <option value="3">3</option>
        <option id="opt4" value="Other">4</option>
    </select><br />
    <textarea name="description">Description</textarea><br />
</form>
...