Problemas con dos funciones

danramglez · #1 (**permalink**) 23/10/2012, 17:00

Código HTML:

Ver original<html>
    <head> 
      <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');
        });
    </script>
 
     
        <meta charset="utf-8" />    
        <title>Ejemplo</title>   
        <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" />  
          <script>   
          $(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;                }            });    });   
          </script>
         
    </head>
 
<body>
 
<form id="myForm">
    <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>
    <div>
        <input type="button" id="btnAdd" value="Agregar otro nombre" />
        <input type="button" id="btnDel" value="Eliminar nombre" />
    </div>
</form>
 
</body>
</html>

Hola amigos quisiera saber si puedo hacer dos funciones diferentes de javascript en un textbox, una es de autocompletar y la otra que agregue un textbox nuevo, quisiera saber si se puede y que estoy haciendo mal, mil gracias.