2009-09-16 29 views
5

Tenía la obligación de copiar todos los campos de un formulario a otro formulario similar. Entonces, en lugar de copiar campo por campo, escribí una rutina, form2form, usando jQuery.Copia de formulario a formulario en jQuery

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

la rutina funciona. La rutina requiere que en el campo de formulario de entrada tenga una clase de copia; de lo contrario, no sé cómo obtener todos los campos en el formulario. ("#form: input") omite el botón de opción y selecciona campos.

Así que mis preguntas son.

¿Hay una función incorporada así que no necesitaba esto? ¿Hay una mejor manera de escribir la selección? ¿Cómo modifico la rutina para no necesitar la clase? ¿Puedo pasar objetos de formulario en lugar del nombre del formulario como un texto? ¿Hay una mejor manera en general?

se trata de una página completa que funciona:

<!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> 

Respuesta

12

> ¿Existe una función integrada de modo que no necesitaba esto?

No realmente. Hay clone(), pero eso es más para copiar un elemento en otro lugar en el DOM. Necesita completar un segundo formulario.

> ¿Puedo pasar objetos de formulario en lugar del nombre del formulario como un texto?

Sí:

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

Se puede hacer un plugin también!

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

ps el selector de pseudo ":input" no salta radio o las entradas de selección. Incluye explícitamente los elementos select y input (al menos en 1.3.2), de los cuales radio son parte de los botones.

+0

sólo pensé en cuenta que esta función funciona, pero sólo si su segunda forma ya tiene entradas idénticas. Leí mal y traté de usar esto para completar una segunda forma que carecía de las entradas de la primera. – DMulligan

+0

No maneja casillas de verificación ni botones de opción –

1

Tuve que agregar esto al complemento para que funcione las casillas de verificación.

$('[name=' + $(this).attr('name') +']', other).attr("checked", $(this).attr("checked")); 
Cuestiones relacionadas