• Das Erstellen neuer Accounts wurde ausgesetzt. Bei berechtigtem Interesse bitte Kontaktaufnahme über die üblichen Wege. Beste Grüße der Admin

[FRAGE] Formularfelder mit JQuery füllen

Maggi

New member
Hi,

Ich kenne mich in JS, sowie im Framework JQuery nicht wirklich gut aus, ich lerne aber gerne dazu.

Nachfolgend versuche ich gerade, einen funktionierenden Code auf JQuery umzustricken.

Wie würde ich den nachfolgenden Code umstricken müssen, wenn ich die Formularfelder mit Jquery manipulieren wollte? Wie man ein (einziges) Formularfeld mit der Jquery Funktion change() manipuliert, weiß ich schon, aber ich mir ist nicht ganz klar, wie ich über eine javascript funktion (also hier myEvents) mehrere Formularfelder (insb. ein selectfeld) über Jquery ändern muß.

Gruß, Michael

HTML:
<html>
 <head>
 <script type="text/javascript" src="slbox/jquery.min.js"></script>
 </head>
 <body>

<script>
function myEvents(wert1,wert2) {
//alert(wert1 + ' ' + wert2);
//document.meinform.textfield1.value = wert1;
document.forms['meinform']['textfield1'].value = wert1;
for (f = 0; f < document.meinform.Einheit1.length; f++) {
//alert(document.meinform.Einheit.options[f].value);
if (document.meinform.Einheit1.options[f].value == wert2) {
document.forms['meinform']['Einheit1'].selectedIndex = f;
}
}
}
</script>

<FORM name="meinform" ACTION="" METHOD=POST>
<INPUT TYPE=text name='textfield1'>

<select name='Einheit1'>
<OPTION VALUE="Stück">Stück</OPTION>
<OPTION VALUE="l">Liter</OPTION>
<OPTION VALUE="ml">Milliliter</OPTION>
<OPTION VALUE="kg">KG</OPTION>
<OPTION VALUE="g">Gramm</OPTION>
<OPTION VALUE="m">Meter</OPTION>
<OPTION VALUE="v">Verpackungseinheit</OPTION>
</SELECT>

</form>

<div class='button_1' id='aaa'><INPUT TYPE=submit VALUE=" klick " onclick="myEvents('Hallo','ml')"></div>
 </body>
</html>
 
In etwa so: (ungetestet)
Code:
function myEvents(wert1,wert2) {
$("input[name=textfield1]").val(wert1);

$.each($("select[name=Einheit1] option"), function(index, element) {
  if ($(element).val() == wert2) {
    $(element).prop("selectedIndex",index);
  }
});

Noch 2 Anmerkungen:
- Ich würde die ganzen Tags klein schreiben, die Großschreibung ist hässlich und alt.
- Dir fehlt ein DocType (Vielleicht auch nur nicht mit kopiert... - Nur zur Info.)
 
Zuletzt bearbeitet:
Das geht mit nativem JS sogar noch kürzer:
Code:
function myEvents(wert1,wert2){
	document.meinform.textfield1.value = wert1;
	document.meinform.Einheit1.value = wert2;
}

PS: globale Variablen sind extrem selten eine gute Idee.
PPS: Du solltest dir dringend eine einheitliche Namenskonvention angewöhnen...
"textfield1": alles klein, englisch und Zahl direkt dran
"Einheit1": Enfangsbuchstabe groß, deutsch und auch Zahl direkt dran
"button_1": wieder alles klein und englisch aber die Zahl mit "_" getrennt...

... entscheide dich.

Auch die Schreibsweise der Tags und der Attribute ist kunterbunt gemischt.


@rico: deinem Code fehlt eine schließenden geschweifte Klammer...
 
Das geht mit nativem JS sogar noch kürzer:

Hi,


erstmal danke für Eure Tips.

Zum nativen Code: Den hatte ich ja im Ausgangspost auch verwendet. Ich möchte im Code auf Jquery umsteigen, weil mein Problem eigentlich ein ganz anderes ist (und das versuche ich derzeit eigentlich zu lösen), nämlich, daß bei der Verwendung von "chosen" meine Funktion "myEvents" das Selectfeld nicht mehr vorwählt :-( Sämtliche Lösungshinweise für dieses Problem beziehen sich aber auf Jquery, daher "muß" ich hierfür zunächst meine Funktion myEvents auf Jquery ummodeln. :confused:

Anbei mal ein Codebeispiel, bei dem 1 Textfeld und 1 Dropdownfeld korrekt durch das Onclick-Event geändert werden, sowie 1 Chosen-Dropdownfeld, das NICHT durch dasselbe Event geändert wird. (copy+paste, daher noch "kunterbunt", ich werde das aber künftig beachten)

HTML:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
 <head>
 <script type="text/javascript" src="jq/jquery.min.js"></script>
<!-- chosen -->
  <script type="text/javascript" src="jq/chosen/chosen.jquery.js"></script>
  <link rel="stylesheet" href="jq/chosen/chosen.css" type="text/css" media="all">
  <link rel="stylesheet" href="jq/ui.css" type="text/css" media="all">
  <script type="text/javascript">
$(function(){
$(".chosen").chosen({
    no_results_text: "Oops, nichts gefunden!",
    allow_single_deselect: true,
    search_contains: true,
    disable_search_threshold: 10,
    placeholder_text_single: 'Bitte wählen...'
  });
});
</script>
 </head>
 <body>
<script>
function myEvents(wert1,wert2,wert3) {
document.forms['meinform']['textfield1'].value = wert1;
for (f = 0; f < document.meinform.Einheit1.length; f++) {
if (document.meinform.Einheit1.options[f].value == wert2) {
document.forms['meinform']['Einheit1'].selectedIndex = f;
}
if (document.meinform.Einheit2.options[f].value == wert3) {
document.forms['meinform']['Einheit2'].selectedIndex = f;
}
}
}
</script>

<FORM name="meinform" ACTION="" METHOD=POST>
<INPUT TYPE=text name='textfield1'>

<select name='Einheit1'>
<OPTION VALUE="Stück">Stück</OPTION>
<OPTION VALUE="l">Liter</OPTION>
<OPTION VALUE="ml">Milliliter</OPTION>
<OPTION VALUE="kg">KG</OPTION>
<OPTION VALUE="g">Gramm</OPTION>
<OPTION VALUE="m">Meter</OPTION>
</SELECT>

<select class='chosen' name='Einheit2'>
<OPTION VALUE="Stück">Stück</OPTION>
<OPTION VALUE="l">Liter</OPTION>
<OPTION VALUE="ml">Milliliter</OPTION>
<OPTION VALUE="kg">KG</OPTION>
<OPTION VALUE="g">Gramm</OPTION>
<OPTION VALUE="m">Meter</OPTION>
</SELECT>
</form>

<div><INPUT TYPE=submit VALUE=" klick " onclick="myEvents('Hallo','ml','ml')"></div>
 </body>
</html>

Ist das möglich, das "chosen"-Selectfeld mit nativem Javascript oder Jquery durch meine Funktion "myEvents" zu ändern (im Sinne von anzuwählen)?

Gruß, Michael
 
... keiner mehr? Oder kann ich vielleicht noch wichtige Infos zu meiner Frage geben, um mein Problem genauer zu fixieren?

Grüße, Michael
 
Hallo kkapsner,

danke für den Link. Finde das total klasse, daß Du extra danach gesucht hast!
Den kenne ich auch bereits, kann ihn aber leider nicht umsetzen, weil ich meine Funktion in nativem Javascript geschrieben hatte und sich dieser Thread auf Jquery stützt.
So kam ich übrigens auch auf die Idee, zuerst mal mein natives Javascript in Jquery umzumodeln, um dann anschließend zu versuchen, diesen Thread (es gibt da noch einen interessanten Link: Change the value of Chosen.js select box using jQuery - Stack Overflow)
Auch den kann ich leider nicht umsetzen, da meine Javascript, aber vor allem meine Jquery Kenntnisse hierzu nicht ausreichen.
Könntest Du mir dabei helfen?
Gruß, Michael

P.S: Irgendwie drehe ich mich im Kreis:
Wenn ich versuche, mich de Problem (bzw. dessen Lösung) darüber zu nähern, daß ich erstmal meinen funktionierenden JS-Code in Jquery Code umzustricken, sagt jeder, daß das doch auch gut über nativen JS-Code lösbar ist. Über nativen JS-Code jedoch komme ich der Lösung des "chosen-selectfield-update" Problem nicht näher, weil dessen Lösung auf Jquery aufbaut. Irgenwie beißt sich hier die Katze in den eigenen Schwanz, jedenfalls ausgehend von meinen doch eher rudimentären JS-/Jquery-Kentnissen.
 
Zuletzt bearbeitet:
Ich verstehe das Hin und Her nicht. Warum entscheidest du dich nicht einfach für eines von beidem? Es gibt doch Gründe, jQuery zu verwenden. Und wenn man es eingebunden hat macht es meisten auch Sinn, es zu verwenden, ist aber kein Muss. Mach es doch so, wie du am besten damit zurecht kommst, du musst den Code schließlich warten.
Aus meiner Erfahrung kann ich berichten, dass ich mich auch lange geweigert habe. Als ich es dann aber erstmal drin hatte wurde immer mehr damit gemacht und heute möchte ich es für viele Aufgaben nicht mehr missen.
 
@Maggi: ich meinte nicht, dass du das mit nativem JS machen musst, sondern nur, dass man es damit machen kann. Das wichtige bei der Lösung auf github ist, dass du zum einen nicht das Original chosen verwendest, sondern den Fork, denn mit dem Original ist dein Vorhaben einfach nicht machbar. Und dann ist es komplett egal, wie du den Wert des <select>s setzt, sondern das .trigger() | jQuery API Documentation ist der wichtige Teil.
 
Zuletzt bearbeitet:
Hallo kkapsner,

bist Du sicher, daß der Fork nicht bereits den Weg ins Original gefunden hat?
Ich hatte das so verstanden, aber kann auch gerne den Fork benutzen.

Und ansonsten bleibt es derzeit dabei, daß ich mich im Kreis drehe, weil ich nicht weiß, wie ich meine Funktion in jquery-code hätte umsetzen können.
Kannst Du mir hierbei helfen? Dann wäre ich einen (von 2) Schritt weiter.

Gruß, Michael
 
Ist das möglich, das "chosen"-Selectfeld mit nativem Javascript oder Jquery durch meine Funktion "myEvents" zu ändern (im Sinne von anzuwählen)?
Ja, Du kannst natürlich (!) Deine Selectbox nachträglich anfassen, auslesen, erweitern oder was Dir damit gefällt. Das Beispiel dürftest Du verstehen, da es Deine Selectbox verwendet ...
Code:
$(".chosen option[value='ml']").attr('selected',true);
... das simuliert Dir die Änderung von "default" (da nichts vorgegeben, steht bei Seitenaufruf "Stück" als Selektion in der Auswahlbox) auf "Milliliter". Du musst jetzt eigentlich nur Deine Funktion myEvents darum erweitern und "value" entsprechend Deiner Funktion ausstatten.
 
Hallo Forum,

leider kann ich mit den Antworten hier nichts anfangen, wir (bzw. ich) drehen uns im Kreis.

Trotzdem danke für Eure Mühe.

Michael
 
bist Du sicher, daß der Fork nicht bereits den Weg ins Original gefunden hat?
OK - hatte das Issue nicht ganz bis nach unten gelesen. Das ist drin.

Trotzdem bleibt es dabei. Wie du den Wert änderst, ist komplett egal. Du musst nur dann das $(".chosen").trigger('chosen:updated'); aufrufen... hast du es denn probiert?

Und ansonsten bleibt es derzeit dabei, daß ich mich im Kreis drehe, weil ich nicht weiß, wie ich meine Funktion in jquery-code hätte umsetzen können.l
Das ist völlig wurscht. Du muss dienen Code nicht auf jQuery umschreiben...

@SteelWheel und Rico: warum macht ihr das eigentlich so kompliziert und geht über die <option>s? Das geht viel eleganter/einfacher über das <select>:
Code:
$(".chosen").val("ml");
 
Du musst nur dann das $(".chosen").trigger('chosen:updated'); aufrufen... hast du es denn probiert?

Habe ich versucht, es hat aber keinen Effekt.

Vielleicht habe ich es falsch angewandt, kannst Du mal in den Code hinein schauen?

HTML:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
 <head>
 <script type="text/javascript" src="jq/jquery.min.js"></script>

<!-- chosen -->
  <script type="text/javascript" src="jq/chosen/chosen.jquery.js"></script>
  <link rel="stylesheet" href="jq/chosen/chosen.css" type="text/css" media="all">


 </head>
 <body>
    
<script>
function myEvents(wert1,wert2,wert3) {
//alert(wert1 + ' ' + wert2);
//document.meinform.textfield1.value = wert1;
document.forms['meinform']['textfield1'].value = wert1;
for (f = 0; f < document.meinform.Einheit1.length; f++) {
//alert(document.meinform.Einheit.options[f].value);
if (document.meinform.Einheit1.options[f].value == wert2) {
document.forms['meinform']['Einheit1'].selectedIndex = f;
}
if (document.meinform.Einheit2.options[f].value == wert3) {
document.forms['meinform']['Einheit2'].selectedIndex = f;
}

}
}
</script>

  <script type="text/javascript">
$(document).ready(function() {
$(".chosen").chosen({
    no_results_text: "Oops, nichts gefunden!",
    allow_single_deselect: true,
    search_contains: true,
    disable_search_threshold: 10,
    placeholder_text_single: 'Bitte wählen...'
  });
$(".chosen").trigger("chosen:updated");
});
</script>



<FORM name="meinform" ACTION="" METHOD=POST>
<INPUT TYPE=text name='textfield1'>

<select name='Einheit1'>
<OPTION VALUE="Stück">Stück</OPTION>
<OPTION VALUE="l">Liter</OPTION>
<OPTION VALUE="ml">Milliliter</OPTION>
<OPTION VALUE="kg">KG</OPTION>
<OPTION VALUE="g">Gramm</OPTION>
<OPTION VALUE="m">Meter</OPTION>
<OPTION VALUE="v">Verpackungseinheit</OPTION>
</SELECT>   

<select class='chosen' name='Einheit2'>
<OPTION VALUE="Stück">Stück</OPTION>
<OPTION VALUE="l">Liter</OPTION>
<OPTION VALUE="ml">Milliliter</OPTION>
<OPTION VALUE="kg">KG</OPTION>
<OPTION VALUE="g">Gramm</OPTION>
<OPTION VALUE="m">Meter</OPTION>
<OPTION VALUE="v">Verpackungseinheit</OPTION>
</SELECT> 
</form>

<INPUT TYPE=submit VALUE=" klick " onclick="myEvents('Hallo','ml','ml')">
 </body>
</html>

Gruß, Michael
 
Äh... du musst das Event natürlich triggern, nachdem du den Wert deiner <select> geändert hast... also am Ende der myEvents-Funktion.

PS: Formatier' doch bitte deinen Code mal gescheit...
 
Das ist jetzt der Dank, dass mehrere Leute sich über mehrere Tage Zeit genommen haben, das Problem nachzuvollziehen....
 
@Maggi: dann zeig' doch bitte noch deinen endgültigen Code, damit kommende Suchende auch noch was davon haben.

PS: Musst dich nicht gleich komplett verabschieden, nur weil dein Problem gelöst ist...;)
 
Zurück
Oben