Wie fülle ich div mit Werten aus dem Formular?

Ich habe ein HTML-Formular mit einer solchen Struktur:Wie fülle ich div mit Werten aus dem Formular?

... 
<select name="Employee"> 
    <option>a</option> 
    <option>b</option> 
</select> 

<input type="checkbox" name="email" value="Yes" unchecked>Include Email Contact 
<input type="checkbox" name="phone" value="Yes" unchecked>Include Phone Contact 
Job Title: <input type="Text" name="jobTitle" size="20"><br> 
<input type="Button" value="Generate" onclick="show()" id="refresh"> 
...

Und ein div:

<div class="data"> 
    <div class="ft_name"></div> 
    <div class="ft_pos"></div> 
    <div class="ft_tbl_meta">E-Mail:</div> 
    <div class="ft_tbl_data"></div> 
    <div class="ft_tbl_meta">Phone:</div> 
    <div class="ft_tbl_data"></div> 
</div>

Wie kann ich meine Werte in div Abschnitt zeigen, indem Sie die Taste drücken, ohne die gesamte Seite neu zu laden? Ich kenne Javascript ein wenig, aber leider fand ich die Antwort noch nicht. Vielen Dank im Voraus!

Quelle

2016-08-01 Eduard Climov

Es wäre hilfreich, wenn Sie schrieb, was Sie bisher versucht! –

Also, wenn ich richtig verstehe, hast du ein Formular und bei submit möchtest du es in div als Text zeigen. Recht? – Rajesh

Hier ist eine Lösung, unaufdringliche Vanille Javascript.

Die Funktion showData() wird ausgeführt, wenn auf button geklickt wird.

Dann wird die Funktion showData():

den booleschen Wert jedes Ankreuzfeld erhält (entweder true wenn aktiviert oder false wenn nicht markiert)
umschreibt den booleschen Wert als Zeichenkette (ein Wert von true wird 'Yes' und ein Wert von false wird 'No')
schreibt das relevante Datenfeld, einschließlich der Zeichenfolge.

function showData() { 
 

 
    var emailValue = document.querySelector('input[value="email"]').checked; 
 
    var phoneValue = document.querySelector('input[value="phone"]').checked; 
 

 
    var data = document.getElementsByClassName('data')[0]; 
 
    var dataFields = data.getElementsByTagName('div'); 
 

 
    if (emailValue === true) {emailValue = 'Yes';} else {emailValue = 'No';} 
 
    if (phoneValue === true) {phoneValue = 'Yes';} else {phoneValue = 'No';} 
 

 
    for (var i = 0; i < dataFields.length; i++) { 
 

 
     switch (i) { 
 
      case (0) : dataFields[i].textContent = 'E-Mail: ' + emailValue; break; 
 
      case (1) : dataFields[i].textContent = 'Phone: ' + phoneValue; break; 
 
     } 
 
    } 
 
} 
 

 
var button = document.querySelector('input[type="button"]'); 
 
button.addEventListener('click',showData,false);

form, .data, label, input[type="button"] { 
 
display: block; 
 
} 
 

 
form, .data { 
 
float: left; 
 
width: 200px; 
 
} 
 

 
input[type="button"] { 
 
margin-top: 24px; 
 
}

<form> 
 
<label><input type="checkbox" name="contact" value="email" unchecked>Include Email Contact</label> 
 
<label><input type="checkbox" name="contact" value="phone" unchecked>Include Phone Contact</label> 
 
<input type="Button" value="Generate"> 
 
</form> 
 

 
<div class="data"> 
 
<div class="ft_tbl_meta">E-Mail:</div> 
 
<div class="ft_tbl_meta">Phone:</div> 
 
</div>

Quelle

2016-08-01 10:02:37 Rounin

Elemente der Klasse Get document.getElementsByClassName telefonisch unter (class_name) Beispiel JavaScript-Code unter

<HTML> 
<HEAD> 
<SCRIPT LANGUAGE="JavaScript"> 
function testResults (form) { 
    var x = document.getElementsByClassName("ft_name"); 
    x[0].innerHTML = form.name.value; 
    x = document.getElementsByClassName("ft_tbl_meta"); 
    x[0].innerHTML = form.email.value;  // name email is one provided in form 
    // Do same for all other classes 
} 
</SCRIPT> 
</HEAD> 
<BODY> 
<FORM NAME="myform" ACTION="" METHOD="GET">Enter something in the box: <BR> 
<input type="checkbox" name="email" value="Yes" unchecked>Include 
Email Contact 
<input type="checkbox" name="phone" value="Yes" unchecked>Include Phone Contact 
Job Title: <input type="Text" name="jobTitle" size="20"><br> 
<input type="Button" value="Generate" onclick="show(this.form)" id="refresh"> 
<INPUT TYPE="button" NAME="button" Value="Click" onClick="testResults(this.form)"> 
</FORM> 
</BODY> 
</HTML>

Quelle

2016-08-01 09:28:52 GauravKatoch

Wie erhält man die Werte aus dem Formular? – Barmar

Übergeben Sie this.form an Funktion und verwenden Sie die Formularvariable innerhalb Funktion, um auf die Felder zuzugreifen. Für ein detailliertes Beispiel überprüfen http://www.javaworld.com/article/2077176/scripting-jvm-languages/using-javascript-and-forms.html – GauravKatoch

einige IDs für Ihre divs setzen Sie möchten diesen Code nehmen/assign Werte von/nach und setzen

IncludeEmailCheckBox für Ihre "umfassen E-Mail" ist Checkbox

EmailToDiv ist für div die E-Mail erhalten

EmailFromDiv ist für Ihre Eingabe für E-Mail

IncludePhoneCheckBox für Ihre "umfassen Phone" Checkbox ist

PhoneToDiv für div ist das Telefon

PhoneFromDiv ist für Ihre Eingabe für Telefon

zu bekommen

Denken Sie daran, IDs als erforderlich zu ändern

Quelle

2016-08-01 09:31:19

hier ist Ihre Meinung (I aktualisiert) mit JQuery:

<div class="data"> 
    <div class="ft_name"></div> 
    <div class="ft_pos"></div> 
    <div class="ft_tbl_meta">E-Mail:<span id="email_here"></span></div> 
    <div class="ft_tbl_data"></div> 
    <div class="ft_tbl_meta">Phone:<span id="phone_here"></span></div> 
    <div class="ft_tbl_data"></div> 
</div>

Jetzt holen und Druckwerte:

var Employee = $("select[name=Employee]").val(); 
$('.ft_name').html(Employee); 
var email = $("input[name=email]").val(); 
$('#email_here').html(email); 
var phone = $("input[name=phone]").val(); 
$('#phone_here').html(phone); 
var jobTitle = $("input[name=jobTitle]").val(); 
$('.ft_pos').html(jobTitle);

Quelle

2016-08-01 09:37:24 eronax59

Wie fülle ich div mit Werten aus dem Formular?

Antwort

Verwandte Themen