JQuery: Textfeld (input): Wie erreiche ich, dass bei Selektion von 2020/2021 das Jahr 2018 auf der Seite herauskommt?

Ich will, dass wenn man 2020/2021 aussucht, das Jahr 2018 herauskommt. Aber nicht in einem neuen Tab, sondern auf der Webseite!

das Jahr 2018 soll nicht in einem neuen Fester stehen, sondern einfach auf dem Formular

$("select[name=Symp]").change(function () {
  if ($(this).val().length > 0) {
    var sj = $(this).val().toString().split('/');
    alert((parseFloat(sj[0]) - 2));
  }
});

<div class="row" style="height: 28px;">
  <div class="form-inline">
    <div class="col-xs-12">
      <div class="form-group">
        <label for="Symp"><h4><b>im Schuljahr:</b></h4></label>
        {if $pdf}
          <input type="text" class="form-control" style="width:3cm"; name="Symp" value="{$values.Symp}">
        {else}
          <select class="form-control" name="Symp">
            <option value="" selected=""></option>
            <option value="2020/2021">2020/2021</option>
            <option value="2021/2022">2021/2022</option>
            <option value="2022/2023">2022/2023</option>
          </select>
        {/if}
      </div>
    </div>
  </div>
</div>

Answer 1

[regex9]

Angenommen, die Ausgabe soll in einem Paragraph stattfinden. Dann brauchst du ein p-Element, welches via Selektor leicht ansprechbar ist.

Beispiel:

<p id="output"></p>

Mit jQuery kannst du dessen Text so setzen:

$("#output").text(parseInt(sj[0]) - 2);

Um die Ausgabe stattdessen in ein Textfeld zu setzen:

$("#output").val(parseInt(sj[0]) - 2);

Dabei sollte auch in diesem Fall das Textfeld via Selektor eindeutig selektierbar sein. Ob du für eine eindeutige Markierung des Elements eine ID verwendest, wie in meinen obigen Beispielen oder andere Selektorausdrücke, sei dir überlassen.

Zum Schluss möchte ich dich noch auf Fehler in deinem Markup hinweisen.

1) Ein Label stellt eine Feldbeschriftung dar. Ein Überschriftenelement (h4) findet darin keinen Platz. Wenn es dir darum geht, die Schriftgröße zu verändern, verwende CSS (font-size). Die Schriftdicke kannst du auch gleich noch via CSS setzen, dann ist auch das b-Element überflüssig.

HTML:

<label class="school-year" for="Symp">im Schuljahr:</label>

CSS:

.school-year {
  font-size: 18px;
  font-weight: 700;
}

2) Dein Label verweist auf kein Feld bzw. auf keine existente ID. So wäre es richtig.

<label class="school-year" for="Symp">im Schuljahr:</label>
{if $pdf}
  <input type="text" class="form-control" style="width:3cm" id="Symp" value="{$values.Symp}">
{else}
  <select class="form-control" id="Symp">
    <!-- ... -->

3) Das Semikolon in deinem input-Element:

style="width:3cm";

gehört entweder hinter cm (als Abtrennung des width-Properties zu folgenden CSS-Properties) oder ganz raus. Außerhalb des Attributwerts darf es jedenfalls nicht stehen.

4) Ein leeres Label ist für ein option-Element nicht zulässig. Schreibe entweder etwas hinein oder setze ein Leerzeichen. So:

<option label=" " selected value=""></option>

5) Du hast in einem Kommentar noch deine Seite mit dem erwähnten Formular verlinkt. Wenn ich dort in den Seitenquelltext schaue, sehe ich noch etliche weitere Fehler, die du beheben solltest (falsche Feldverknüpfungen; Einsatz von Elementen, die nicht zum HTML5-Standard gehören; falsche Kind-Elternbeziehungen; usw.), um eine problemlose Bedienbarkeit zu gewährleisten. Vor allem für den Fall, dass dieses Formular tatsächlich für öffentliche Zwecke genutzt werden soll.

Der W3C-Validator kann dir beim Aufspüren und Korrigieren der Fehler helfen.

Answer 2

[whgoffline]

Was meinst du mit rauskommt?

Woher ich das weiß: Studium / Ausbildung – Informatikstudent

Comments

[maetin944]

https://dev2.cmsfs.de/ga-mikroprojekt-schuelerbefoerderung/

Das ist die Webseite. wenn man z.B. 2020/2021 auwählt, dann soll 2018 rauskommen, aber auf dem Formular z.B. ganz untem im Formular