Klonen mit jQuery – in Echtzeit

Mit Hilfe von jQuery lässt sich die Eingabe eines bspw. Suchfelds ganz einfach in Echtzeit klonen bzw. in andere Felder duplizieren. Um zu verdeutlichen, was ich meine, hier ein kleines Video:
[SWF]/wp-content/uploads/2010/08/jQuery_klonen.swf, 267, 158[/SWF]

Die Eingabe muss natürlich nicht unbedingt wie hier in zwei weitere Felder hin geklont werden. Sie kann auch bspw. an versteckte Formelemente weitergegeben werden und etc.

Beispielcode:

html:


<div class="pick">
  <input type="text" name="keywords" value="Suche:" 
       class="inputTEXT" maxlength="30" size="17" >
</div>


<div id="search_panel">
  <div style="float:right;">
    <form method="get" rel="nofollow" action="/advanced_search_result1.php" 
        name="quick_find_header">
      <table>
        <tr>
          <td>Produktsuche</td>
          <td><input type="text" name="keywords" class="inputTEXT" 
                   maxlength="30" size="20" ></td>
          <td><button type="submit">
                    <img src="/images/searchbutton.jpg"/>
                  </button></td>
        </tr>
      </table>
    </form>
  </div>
  
  <div style="float:right;">
    <form method="get" rel="nofollow" action="/advanced_search_result2.php" 
         name="quick_find_header">
      <table>
        <tr>
          <td>Artikelsuche</td>
          <td><input type="text" name="keywords" class="inputTEXT" 
                       maxlength="30" size="20" ></td>
          <td><button type="submit">
                     <img src="/images/searchbutton.jpg"/>
                  </button>
          </td>
        </tr>
      </table>
    </form>
  </div>
</div>

CSS:

#search_panel {
  height: 86px; 
  background: #fff; 
  display: none;
}
.pick {
  width: 125px;
  padding: 5px 0;
}

JS:

<script type="text/javascript">
jQuery(document).ready(function() {
  var i=0;
  jQuery(".pick").click(function(){
    //empty the "Suche" phrase inside the input
    jQuery('.pick input').val('');
  });

  jQuery('.pick input').keyup(function () {
    //slide down only at the first keyup event
    if(i==0){
      jQuery("#debug").slideToggle("slow");
    } 
    i=1;
    //clone all entries from actual element
    jQuery('.inputTEXT').val($(this).val());
  });
});
</script>

Schreibe einen Kommentar

Pflichtfelder sind mit * markiert.