Wie ein Textfeld dynamisch ohne Laden der Seite erstellen Onclick

Ich habe diese Form: -Wie ein Textfeld dynamisch ohne Laden der Seite erstellen Onclick

<form action=""> 
    <table border="0"> 
     <td colspan="2" class="instruction">Select your desired option to search.</td> 
    </table> 
     <table> 
     <tr> 
      <td><label> 
      <input onClick="generatenew();" type="radio" name="search_option" value="code" id="search_option_0"> 
      Customer Code</label></td> 
      <td><label> 
      <input type="radio" name="search_option" value="company" id="search_option_1"> 
      Customer Company</label></td> 
      <td><label> 
      <input type="radio" name="search_option" value="name" id="search_option_2"> 
      Customer Name</label></td> 
      <td><label> 
      <input type="radio" name="search_option" value="email" id="search_option_3"> 
      Customer Email</label></td> 
     </tr> 
     </table> 
     <input class="Button" name="search_submit" type="submit" value="Search"> 
    </form>

Jetzt nach den letzten </table> ich mag eine Textbox auf Auswahl von jedem der Optionstaste erstellen. Bedeutet, dynamisch ohne Seitenladung.

Quelle

2012-03-31 Django Anonymous

Valid HTML nicht erlaubt Ihnen Eingabeelement direkt nach zu setzen, müssen Sie es platzieren, nachdem – rkosegi

k so, wie ich nach '' –

Javascript allein:

// Create the element 
var input = document.createElement("input"); 
input.type = 'text'; 
input.name = 'inputName'; 
input.value = 'some value'; 
input.size = 10; 
input.maxLength = 10; 
input.className = 'someClass'; 

// append the element 
var btn = document.getElementsByName('search_submit')[0]; // get the button to insert the element before it; 
btn.parentElement.insertBefore(input, btn);

Same Prozess mit jQuery:

$('input[name="search_submit"]').before('<input type="text" name="inputName" size="10" maxlength="10" class="someClass" />');

jsfiddle here

Hier ist die jsfiddle für den Klick auf die Radios, mit einem Scheck, um nur einmal zu generieren.

Quelle

2012-03-31 14:44:35 rcdmk

können Sie es mir bitte auf http://jsfiddle.net/ –

demonstrieren Sicher, aber das ist ein funktionierendes Beispiel. – rcdmk

@KooiInc achten Sie auf meinen Code Kumpel. Ich füge das Element direkt nach dem '', vor dem Senden ein. – rcdmk

mit Standard-Javascript müssen Sie eine andere Div-Box nach der erstellen und dann ist es innerHtml mit dem Eingabeelement HTML, das Sie wollen.

mit jQuery haben Sie spezielle Funktionen wie .nach oder .append, die ähnliche Aufgaben ausführt.

Quelle

2012-03-31 14:26:05

Ich würde auch Sie jQuery (http://jquery.com/) empfehlen, aber Sie können auch diesen Artikel sehen, es könnte Ihnen helfen, das Problem zu verstehen .. http://www.javascriptkit.com/javatutors/dom2.shtml

Quelle

2012-03-31 14:27:45

ein Textfeld erstellen kann, aber ich hörte, dass AJAX ist dazu in der Lage es. Liege ich falsch? –

Nun, Sie sagten, Sie wollen es ohne eine Seitenladung. Das macht Javascript (und jQuery). Ajax ist für die Kommunikation von Javascript und Server. Sie haben nach dem Hinzufügen eines neuen Elements zum DOM gefragt. Das passiert auf der Client-Seite. –

@AbhilashShukla Mit AJAX können Sie eine URL aufrufen und ihre Ausgabe in eine Variable laden und in das Dokument einfügen. – rcdmk

  <html> 
      <body> 
      <table border=2> 
      <tr> 
      <td>PASSWORD</td> 
      <td><input type="radio" name="radGroup" id="rad1" onchange="showElement('1')"> 
      DEFAULT PASSWORD 
      <input type="radio" name="radGroup" id="rad1" onchange="showElement('2')"> 
      NEW PWD</td></tr> 
      <tr><td></td><td> 
      <span id="elementNum1" style="display:none;cisibility:hidden;"> 
      <input type="text" id="txt1" value="jct123" /> your default 
      </span> 
      <span id="elementNum2" style="display:none;cisibility:hidden;"> 
      <input type="text" id="txt2" value="" />conform 
      </span> 
      </td> 
      </tr> 
      <script type="text/javascript"> 
      function showElement(iElementToShow) 
      {  
      var oPage; 
      var bContinueLooping=true; 
      var iElement=1; 
      while (bContinueLooping) 
      { 
       try 
       { 
        oPage=document.getElementById('elementNum'+iElement); 
        oPage.style.display='none'; 
        oPage.style.visibility='hidden'; 
        iElement++; 
       } 
       catch(oError) 
       { 
        bContinueLooping=false; 
       } 
      } 
      oPage=document.getElementById('elementNum'+iElementToShow); 
      oPage.style.visibility='visible'; 
      oPage.style.display='inline'; 
      } 
      </script> 
      </table> 
      </body> 
      </html>

Quelle

2014-05-06 10:31:36

Willkommen bei Stack Overflow! Diese Antwort ist in der minderwertigen Review-Warteschlange aufgetaucht, vermutlich weil Sie es nicht getan haben Erklären Sie einige der Inhalte: Wenn Sie dies (in Ihrer Antwort) erklären, werden Sie wahrscheinlich mehr Upvotes bekommen - und der Fragesteller lernt tatsächlich etwas! –

Wie ein Textfeld dynamisch ohne Laden der Seite erstellen Onclick

Antwort

Verwandte Themen