Buenas... estoy intentando crear unos campos de manera dinamica con Javascript o ajax... si bien en la web hay muchas opciones para crear
1 campo mas.. yo necesito crear un juego de campos.. es decir... asi como se muestra en el ejemplo:
Campo Normal 
Creando juego de campos 
debido a que pude lograr que cree 1 solo campo ya sea INPUT o SELECT... la idea es que me cree esos juegos de campos, es decir, 2 SELECT y 1 INPUT HIDDEN donde se ve el precio...
Si alguno sabe de la solucion, puede pasarme una mano, tiene algun script hecho o conoce un enlace para crear algo asi.. le estaria enormemente agradecido...
Les paso el que tengo.:
campos.php Código PHP:
<?php
if($_POST['hobby'])
{
$array=$_POST['hobby'];
foreach($array as $hobby)
{
if(strlen($hobby)>0)
{
echo '<h3>'.$hobby.'<h3/>';
}}}
?>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Jquery Duplicate Fields Submit Form</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript" src="1.js"></script>
<script type="text/javascript">
$(function(){
var removeLink = ' <a class="remove" href="#" onclick="$(this).parent().slideUp(function(){ $(this).remove() }); return false">remove</a>';
$('a.add').relCopy({ append: removeLink});
});
</script>
<style type="text/css">
body{ font-family:Arial, Helvetica, sans-serif; font-size:13px; }
.remove {color:#cc0000}
.input{ border: solid 1px #006699; padding:3px}
</style>
</head>
<body>
<form method="post" action="">
<p class="clone"> <input type="text" name="hobby[]" class='input'/></p>
<p><a href="#" class="add" rel=".clone">sumar campo</a></p>
<input type="submit" value=" Enviar " />
</form>
</body>
</html>
1.js
Código Javascript
:
Ver original/**
* jQuery-Plugin "relCopy"
*
* @version: 1.1.0, 25.02.2010
*
* @author: Andres Vidal
* [url=http://www.andresvidal.com]Andres A. Vidal - User Experience and Information Architecture Consultant[/url]
*
* Instructions: Call $(selector).relCopy(options) on an element with a jQuery type selector
* defined in the attribute "rel" tag. This defines the DOM element to copy.
* @example: $('a.copy').relCopy({limit: 5}); // <a href="example.com" class="copy" rel=".phone">Copy Phone</a>
*
* @param: string excludeSelector - A jQuery selector used to exclude an element and its children
* @param: integer limit - The number of allowed copies. Default: 0 is unlimited
* @param: string append - HTML to attach at the end of each copy. Default: remove link
* @param: string copyClass - A class to attach to each copy
* @param: boolean clearInputs - Option to clear each copies text input fields or textarea
*
*/
(function($) {
$.fn.relCopy = function(options) {
var settings = jQuery.extend({
excludeSelector: ".exclude",
emptySelector: ".empty",
copyClass: "copy",
append: '',
clearInputs: true,
limit: 0 // 0 = unlimited
}, options);
settings.limit = parseInt(settings.limit);
// loop each element
this.each(function() {
// set click action
$(this).click(function(){
var rel = $(this).attr('rel'); // rel in jquery selector format
var counter = $(rel).length;
// stop limit
if (settings.limit != 0 && counter >= settings.limit){
return false;
};
var master = $(rel+":first");
var parent = $(master).parent();
var clone = $(master).clone(true).addClass(settings.copyClass+counter).append(settings.append);
//Remove Elements with excludeSelector
if (settings.excludeSelector){
$(clone).find(settings.excludeSelector).remove();
};
//Empty Elements with emptySelector
if (settings.emptySelector){
$(clone).find(settings.emptySelector).empty();
};
// Increment Clone IDs
if ( $(clone).attr('id') ){
var newid = $(clone).attr('id') + (counter +1);
$(clone).attr('id', newid);
};
// Increment Clone Children IDs
$(clone).find('[id]').each(function(){
var newid = $(this).attr('id') + (counter +1);
$(this).attr('id', newid);
});
//Clear Inputs/Textarea
if (settings.clearInputs){
$(clone).find(':input').each(function(){
var type = $(this).attr('type');
switch(type)
{
case "button":
break;
case "reset":
break;
case "submit":
break;
case "checkbox":
$(this).attr('checked', '');
break;
default:
$(this).val("");
}
});
};
$(parent).find(rel+':last').after(clone);
return false;
}); // end click action
}); //end each loop
return this; // return to jQuery
};
})(jQuery);
la fuente de este código, no lo recuerdo... gracias enserio