Копирование из формы в форму в jQuery - PullRequest
Новая
       16

Копирование из формы в форму в jQuery

6 голосов
/ 17 сентября 2009

У меня было требование скопировать все поля из одной формы в другую похожую форму. Поэтому вместо копирования поля за полем я написал подпрограмму form2form, используя jQuery. 

function form2form(aF1, aF2) { 
 var selection = "#" + aF1 + " .copy";
 $(selection).each(function() {
     document.forms[aF2].elements[$(this).attr('name')].value = $(this).val();
   });           
}

рутина работает. Процедура требует, чтобы в поле формы ввода был класс copy, иначе я не знаю, как получить все поля в форме. («#form: input») пропускает переключатель и выбирает поля.

Итак, мои вопросы.

Есть ли встроенная функция, так что мне это не нужно? Есть ли лучший способ написать выбор? Как мне изменить процедуру, чтобы не нуждаться в классе. Могу ли я передавать объекты формы, а не имя формы как текст? Есть ли вообще лучший способ?

это полная страница, которая работает: 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>test form2form in jQuery</title>
<script type="text/javascript" src="../scripts/jquery.js"></script></head>
<script type="text/javascript">
function form2form(aF1, aF2) { 
 var selection = "#" + aF1 + " .copy";
 $(selection).each(function() {
     document.forms[aF2].elements[$(this).attr('name')].value = $(this).val();
   });           
}
function testform2form () {
 form2form ('form1', 'form2' );
}
</script>
</head>
<body>
<h3>Copy form to form</h3>
<form id="form1" name="form1">
form1: f1 <input type="text" name="f1" id="f1" class="copy" value="from A"/>
f2 <input type="text" name="f2" id="f2" class="copy" value="from B" />
 <select name="fruit" id="fruit" class="copy" >
  <option value="valApple" selected="selected">Apple</option>
  <option value="valOrange">Orange</option>
 </select>
</form>
<form id="form2" name="form2">
form1: f1 <input type="text" name="f1" id="f1" class="copy" value="target A" />
f2 <input type="text" name="f2" id="f2" class="copy" value="target B" />
 <select name="fruit" id="fruit" class="copy" >
  <option value="valApple">Apple</option>
  <option value="valOrange" selected="selected">Orange</option>
 </select>
</form>
<p><a href="#" onclick="testform2form()">Copy Form to Form (form2form)</a></p>
</body>
</html>

Ответы [ 2 ]

12 голосов
/ 17 сентября 2009

> Есть ли встроенная функция, поэтому мне она не нужна?

Не совсем. Есть clone(), но это больше для копирования элемента в другое место в DOM. Вам нужно заполнить вторую форму.

> Могу ли я передавать объекты формы вместо имени формы в виде текста?

Да 

function form2form(formA, formB) {
    $(':input[name]', formA).each(function() {
        $('[name=' + $(this).attr('name') +']', formB).val($(this).val())
    })
}

Вы также можете сделать его плагином! 

(function($) {
    $.fn.copyNamedTo = function(other) {
        return this.each(function() {
            $(':input[name]', this).each(function() {
                $('[name=' + $(this).attr('name') +']', other).val($(this).val())
            })  
        })
    }
}(jQuery))

ps псевдоселектор ":input" не пропускает радио и не выбирает входы. Он явно включает элементы select и input (по крайней мере, в 1.3.2), частью которых являются radio кнопки.

1 голос
/ 09 ноября 2011

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

$('[name=' + $(this).attr('name') +']', other).attr("checked", $(this).attr("checked"));
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

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

...