jquery 追加到表单

发布于 2024-08-29 11:44:15 字数 843 浏览 12 评论 0原文

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>

我想要做什么：

当我按下选项值 nr 4 时，会出现新的输入字段，这东西工作正常。

但是我怎样才能改变输入字段出现的顺序，因为现在它出现在文本字段之后，我怎样才能把它放在后面呢？

谢谢

原文

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>

What i want to do:

When i press on option value nr 4, there appears is new input field, this thing works fine.

But how can I to change order where input field gonna appear, because now it appears after textfield, how can i put it after ?

Thank you

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

追我者格杀勿论 2024-09-05 11:44:15

// 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');

// 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 原文

涫野音 2024-09-05 11:44:15

我想你会想要这样的东西。请注意选项的已更改 id 以及添加到 select 元素的 id，以允许定位新的输入元素：

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>

I think you'd want something like this. Note the changed id for the option, and the id added to the select element, to allow positioning of the new input element:

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>

回复收藏 0 原文

~没有更多了~