Sende span Inhalt an die Seite über Parameter

Ich arbeite derzeit auf einer Website, wo Sie Sprachen lernen können und ein Problem mit der Lückentext Funktion haben, die ich wirklich haben möchte. Zuerst verwende ich JSP, um den HTML-Code für die Site zu generieren, also muss es eine Lösung sein, die nur JS und HTML benötigt.Sende span Inhalt an die Seite über Parameter

Hier ist der Code, den ich derzeit haben:

span.edit { 
 
    background-color: #f4f4f4; 
 
\t color: #000000; 
 
\t font-weight: bolder; 
 
    border-color: #f4f4f4 #f4f4f4 #000000; 
 
    border-style: solid; 
 
    border-width: 1px; 
 
    display: inline-block; 
 
    height: 25px; 
 
    min-width: 80px; 
 
    padding: 1px; 
 
    vertical-align: baseline; 
 
} 
 

 
span.edit[contenteditable]:empty::before { 
 
    content: attr(data-placeholder); 
 
\t font-weight: lighter; 
 
    font-style: italic; 
 
\t color: #848484; 
 
} 
 

 
.sentence{ 
 
\t min-width: 250px !important; 
 
}

<div id="cloze"> 
 
\t <h2>Cloze</h2> 
 
\t <div class="text"> 
 
\t \t <p>Lorem <span contenteditable="true" data-placeholder="eingabe" id="var1" class="edit" title=""></span> dolor sit amet <span contenteditable="true" data-placeholder="eingabe" id="var2" class="edit" title=""></span>. Stet clita kasd gubergren, no sea <span contenteditable="true" data-placeholder="eingabe" id="var3" class="edit" title=""></span>.</p> 
 
\t \t <p>Dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut.</p> 
 
\t \t <a href="#">Send to site</a> 
 
\t </div> 
 
</div>

Nun meine Frage: Wie sende ich den Inhalt der Spanne-Felder auf eine Website, so dass ich die Parameter bekommen kann aus es?

Ich weiß, dass Sie ein Formular mit Eingabefeldern verwenden können, aber ich denke, es ist nicht gut, wenn Sie einen langen Text mit einigen Wörtern darin haben.

Vielen Dank für Ihre Antworten!

Quelle

2016-04-12 Maximilian Rich

Sie eine comon Klasse auf alle Bereich verwenden, können dann Throught Schleife yhis Klasse wie $ (‚classname‘). Jeder und in der Schleife, wenn Sie Inhalt von SAPN bekommen dann diese schreiben $ (this). html() –

Danke! Das hat mir sehr geholfen :) –

bitte den Kommentar wenn möglich auffrischen :) –

Ich endete mit einer Klasse auf der Schaltfläche, ausgelöst durch Klick und geparst alle Klasse 'bearbeiten' Felder. Aber ich habe immer noch ein Problem mit dem Senden der Parameter über POST an meine Site. Irgendwelche Ideen dafür?

$(".proofCloze").on("click", function(e){ 
    var parameters = ''; 
    $('.edit').each(function() { 
     parameters = parameters + "'"+$(this).attr("id") + "':'" + $(this).html() + "', "; 
    }); 
    parameters = parameters.substring(0, parameters.length-2); 
    parameters = '{'+parameters+'}'; 
    alert('Address: '+$(this).attr("href")+"\nParameter: "+parameters); 
});

Quelle

2016-04-12 12:52:34

Verwendung Taste statt Ankertag <button type="button" id="submit">Send to site</button>

var btn = document.getElementById('submit'); 

// Bind Click event to the button/trigger 
btn.addEventListener('click', function() { 
    // Retrieve the span value 
    var var1 = document.getElementById('var1').textContent; 
    var var2 = document.getElementById('var2').textContent; 
    var var3 = document.getElementById('var3').textContent; 

    // Send the parameters here 
    console.log(var1, var2, var3); 
});

Quelle

2016-04-12 06:47:01 kiro112

Verwenden $ Schnipsel von jQuery oder native Javascript Ajax-Funktion zu schreiben, die Werte an den Server-Datei, die die Spanne Daten klicken <a> Tag verarbeitet.

Stellen Sie außerdem sicher, dass Sie die Werte des Span-Elements abrufen und als POST senden, um die maximale Grenzgröße zu vermeiden.

Quelle

2016-04-12 06:59:38 jqheart

Sende span Inhalt an die Seite über Parameter

Antwort

Verwandte Themen