Código HTML:
Ver original <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js"></script> <script type="text/javascript"> $(document).ready(function() {
$('#btnAdd').click(function() {
var num = $('.clonedInput').length; // how many "duplicatable" input fields we currently have
var newNum = new Number(num + 1); // the numeric ID of the new input field being added
// create the new element via clone(), and manipulate it's ID using newNum value
var newElem = $('#input' + num).clone().attr('id', 'input' + newNum);
// manipulate the name/id values of the input inside the new element
newElem.children(':first').attr('id', 'name' + newNum).attr('name', 'name' + newNum);
// insert the new element after the last "duplicatable" input field
$('#input' + num).after(newElem);
// enable the "remove" button
$('#btnDel').attr('disabled','');
// business rule: you can only add 10 names
if (newNum == 10)
$('#btnAdd').attr('disabled','disabled');
});
$('#btnDel').click(function() {
var num = $('.clonedInput').length; // how many "duplicatable" input fields we currently have
$('#input' + num).remove(); // remove the last element
// enable the "add" button
$('#btnAdd').attr('disabled','');
// if only one element remains, disable the "remove" button
if (num-1 == 1)
$('#btnDel').attr('disabled','disabled');
});
$('#btnDel').attr('disabled','disabled');
});
<link rel="stylesheet" href="http://code.jquery.com/ui/1.9.0/themes/base/jquery-ui.css" /> <script src="http://code.jquery.com/jquery-1.8.2.js"></script> <script src="http://code.jquery.com/ui/1.9.0/jquery-ui.js"></script> <link rel="stylesheet" href="/resources/demos/style.css" /> $(function() {
var availableTags = [
"ActionScript",
"AppleScript",
"Asp",
"BASIC",
"C",
"C++",
"Clojure",
"COBOL",
"ColdFusion",
"Daniel",
"Mary",
"Erlang",
"Fortran",
"Groovy",
"Haskell",
"Java",
"Berletzis",
"Xml",
"web",
"Lisp",
"Perl",
"PHP",
"Python",
"Ruby",
"Scala",
"Scheme"
];
function split( val ) {
return val.split( /,\s*/ ); }
function extractLast( term ) {
return split( term ).pop();
}
$( "#name" )
// don't navigate away from the field on tab when selecting an item
.bind( "keydown", function( event ) {
if ( event.keyCode === $.ui.keyCode.TAB &&
$( this ).data( "autocomplete" ).menu.active ) {
event.preventDefault(); } })
.autocomplete({ minLength: 0,
source: function( request, response ) {
// delegate back to autocomplete, but extract the last term
response( $.ui.autocomplete.filter(
availableTags, extractLast( request.term ) ) ); },
focus: function() {
// prevent value inserted on focus
return false; },
select: function( event, ui ) {
var terms = split( this.value );
// remove the current input
terms.pop();
// add the selected item
terms.push( ui.item.value );
// add placeholder to get the comma-and-space at the end
terms.push( "" ); this.value = terms.join( ", " );
return false; } }); });
<div id="input1" style="margin-bottom:4px;" class="clonedInput"> Nombre:
<p class="ui-widget"><label for="name"> <input type="text" class="text" name="name"value="<?php if (isset($posted['name'])) echo $posted['name']; ?>" id="name" />
</label> <input type="button" id="btnAdd" value="Agregar otro nombre" /> <input type="button" id="btnDel" value="Eliminar nombre" />
Buen dia podrian ayudarme con estas dos funciones de JavaScript quiero que me agregue un campo nuevo y tambien que lo autocomplete pero no puede hacer las dos gracias por su ayuda