Wie überprüfe ich mit jQuery, ob ein input-Feld leer ist?

Hallo,

wie der Titel schon verrät suche ich nach einer Möglichkeit, zu prüfen, ob ein input-Feld leer ist. Hier mein jetziger Code:

    if($('#kundennummer').val() == ''){
        $('#kundennummer').bind( "clickoutside", function(event){
            $('.kundennummer').show();
        });
   }

Ich prüfe also, ob der Wert im Feld #kundennummer leer ist. Wenn ja, soll das zugehörige <label>-Element .kundennummer angezeigt werden, wenn ich auf einen Punkt außerhalb des input-Felds (das regelt ein Plugin) klicke. Letzteres funktioniert wunderbar, allerdings auch, wenn das input-Feld eben nicht leer ist.

Ich habe auch schon zig verschiedene andere Varianten aus dem Netz ausprobiert, funktioniert hat bisher aber keine. Hat jemand einen Lösungsvorschlag für dieses Problem?

Danke, Nico

3 Antworten

CanadaSeb

22.05.2011, 08:50

Also ich würde es jetzt einfach so machen:

<input type="text" name="kundennummer" id="kundennummer" onchange="if(this.value == '') { document.getElementById('label').style.display = 'inline'; } else { document.getElementById('label').style.display = 'none'; }">
<label for="kundennummer" id="label">Kundennummer eingeben</label>

Erfolgreich getestet.

Mit HTML5 kann man es noch einfacher machen:

<input type="text" name="kundennummer" required>

Bei einem HTML5-fähigen Browser erscheint beim Abschicken des Formulars dann so eine Sprechblase mit einem Hinweis.

KreuzKoelln

12.07.2014, 18:17

woops habs schon beantwortet

KreuzKoelln

28.06.2014, 18:00

ui ui das sieht nicht gut aus. und den code bitte in http://jsfiddle.net/ erstellen. danke

mach es mal so hier

var field =$.trim( $('#KN').val() );

if(field){
    true
}else{
    false   
}

die if abfrage bewertet null und leer als false. $.trim() entfernt spaces, falls ein user nur spaces eingegeben hat oder zuviele spaces am ende und am anfang der daten.

Hi zusammen,

ich versuche mit JavaScript ein paar input-Felder zu validieren.

Leider wird die Seite nicht abgeschlossen, nachdem alle Felder befüllt wurden.
Hat jemand eine Idee?

Ich muss immer, nachdem alle Felder befüllt sind, nochmals in irgendein input-Feld klicken, damit es geht.

Hier mein Code:

$(document).ready(function() {
  $('input').on('click',function() {
    // Validation
    var vorname_firma = $("input[name='vorname']").val();
    var strasse = $("input[name='strasse']").val();
    var plz = $("input[name='plz']").val();
    var ort = $("input[name='ort']").val();

    if (vorname_firma != "" && strasse != "" && plz != "" && ort != "") {
      $(function() {
        $('#tab3').trigger("click");
      });
    }
  });
});

...zur Frage

jquery function ausführen beim klick auf den eine oder den anderen button?

hallo, ich habe eine jquery function und möchte, dass sie beim klicken auf den eine button und beim klicken auf den anderen button ausgeführt wird.

skript:

$(document).ready(function() {
                $(".kommentarabschicken").click(function(){
                        if($(".kommentareingabe").val() != "") {

                            $.ajax({
                                type: "POST",
                                url: "kommentare.php",
                                data: "kommentareingabe=" + $(".kommentareingabe").val(),
                                cache: false,
                                success: function(html){
                                        $(".scroll").html(html);
                                        $(".kommentareingabe").val();
                                }
                                });
                        }
                        return false;
                    });
                });

jetzt wird sie ausgefürt bei klicken auf kommentarabschicken. Sie soll auch ausgeführt werden, wen man auch kommentaroeffnen klickt. (evtl. wenn die Seite geladen wird)

Vielen Dank im Vorraus!!

...zur Frage

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>

...zur Frage

Javascript input zum rechnen?

Hallo,

ich habe bis hierher einen Taschenrechner gebaut. Bisher kann man folgendes tun: Man kann auf einen Button drücken und dieser Wert wird dann in einem textarea angezeigt. Nun ist es ja so, dass ich nicht einfach den value vom textarea nehmen kann und ihn einfach ausrechnen lassen kann. Deshalb meine Frage: Wie kann ich nun diesen Wert ausrechnen und anzeigen lassen? Mein bisheriger Code:

Html

<textarea name="displa" id="display" cols="40" rows="7"></textarea>
    <button value="1">1</button>
    <button value="2">2</button>
    <button value="3">3</button>
    <button value="4">4</button>
    <button value="5">5</button>
    <button value="6">6</button>
    <button value="7">7</button>
    <button value="8">8</button>
    <button value="9">9</button>
    <button value="+">+</button>
    <button value="-">-</button>
    <button value="*">*</button>
    <button value="/">/</button>
    <button onclick="summe">=</button>

Javascript

$("button").click(function() {
    const firedButtonValue = $(this).val();
    var show = $("#display").val($("#display").val() + firedButtonValue);
  });


  function summe() {
    $('#display').val() = Number(show);
  }

...zur Frage

AJAX: Wie kann ich den Inhalt der textarea verändern?

Hallo,

ich habe eine textarea, in der man Text eingibt. Per AJAX wird dieses Feld dann verändert:

function function() {
  jQuery.ajax({
    url: "change.php",
    data: {
      "text": $("#text").val(),
    },
    type: "POST",
    success:function(data) {
      $("#text").val(data);
    },
    error:function() {
    }
  });
}

Doch das Problem ist, dass die komplette echo-Ausgabe vom PHP-Skript dann da drin steht.

Das Skript sieht etwa so aus:

<?php
  echo "<p>Dein neues input-Feld:</p>";
  echo '<textarea id="output">'.$NeueAusgabe.'</textare>';
  echo "<p>richtig ? </p>";
?>

Ich will aber nur den Inhalt der Variable dann darin austauschen und das hier noch zur textarea hinzufügen:

onClick="this.select();"

Wie geht das?

...zur Frage

Jquery - parameter an post-Formular übergeben?

Hallo zusammen:

auf meiner Seite habe ich mehrere Input felder, die nicht alle vom form tag umschlossen sind.

ich möchte beim absenden eines Formulars noch 3 weitere input eingaben übergeben. Wie kann ich das realisieren? derzeit habe ich die zusätzlichen werte mittels type hidden im Formular ergänzt. Das möchte ich aber nicht, weil man die daten sieht und dies nicht sein soll.

...zur Frage

Warum ist $_POST hier leer?

Hi, arbeite gerade an nem Kontaktformular, welches mit JQuery und Ajax gesendet werden soll. Hier der Code:

let form = $(this);
let actionUrl = "assets/php/contact.php";

$.ajax({
    type: "POST",
    url: actionUrl,
    contentType: "application/json",
    data: form.serialize(),
    success: function (backendError) {
        console.log(backendError);
        errorHandler(backendError);
    },
    error: function () {
        console.log("failure");
        alert("Internal Error occured. Please try again later");
    }
});

hier der PHP Code zum senden:

<?php
if ($_SERVER["REQUEST_METHOD"] == "POST") {
    try {
        $errors = array();
        $name = "";
        $email = "";
        $human = "";
        $message = "";

        if (empty($_POST["name"])) {
            $errors[] = "name";
        } else {
            $name = $_POST["name"];
        }

        if (empty($_POST["email"])) {
            $errors[] = "email";
        } else {
            $email = $_POST["email"];
        }

        if (empty($_POST["human"])) {
            $errors[] = "human";
        }

        if (empty($_POST["message"])) {
            $errors[] = "message";
        } else {
            $message = $_POST["message"];
        }

        if (count($errors) === 0) {
            $to = "my@email.de";
            $subject = "Kontaktformular - " . $name;
            $message = "";
            $additional_headers = array(
                "From" => $email,
                "Reply-To" => $email,
                "X-Mailer" => phpversion()
            );

            mail($to, $subject, $message, $additional_headers);
            $response["error"] = false;
            echo json_encode($response);
            exit;
        } else {
            $response["error"] = $errors;
            echo json_encode($response);
            exit;
        }
    } catch (Exception $exception) {
        // in Log File Time + Error + IP
        exit;
    }
}

mein Problem: das POST Array is leer. Habs mir mal ganz oben ausgeben lassen, und stand nix drin, obwohl jquery die inputfelder per POST an das PHP File sendet. Ich denke, dass ich irgendwas bei der $ajax methode falsch gemacht habe, und es deshalb net funktioniert. bin am verzweifeln :) danke für jede Hilfe!

...zur Frage

HTML JS Input Feld leer?

Hallo!

Ich arbeite gerade an einem Projekt für die Schule.

Es muss eine Fehlermeldung kommen wenn ein Feld noch nicht ausgefüllt ist. Wie definiere ich das?

if (x == ??)

...zur Frage

Java script if Abfrage zur Überprüfung eines leeren Feldes?

Hallo,

im folgenden ist ein Code, der beim Click auf einen Button überprüfen soll, ob das Feld mit dem Namen Mailadresse leer ist. Warum funktioniert Variante 1, aber Variante 2 nicht?

Variante 1

const Buttons=document.getElementById('Buttons'),

Mailadresse=document.getElementsByName('Mailadresse');

Buttons.addEventListener('click',pruefen);

function pruefen () {

if (Mailadresse.value == null) { window.alert ("Bitte alle Pflichtfelder ausfüllen")}

};

Variante 2

const Buttons=document.getElementById('Buttons'),

Mailadresse=document.getElementsByName('Mailadresse');

Buttons.addEventListener('click',pruefen);

function pruefen () {

if (Mailadresse.value == 0) { window.alert ("Bitte alle Pflichtfelder ausfüllen")}

};

Über eine hilfreiche Antwort würde ich mich sehr freuen.

...zur Frage

Bootstrap:Zwei Spalten mit Text Input Felder füllen, oben rechts aber leer?

Hallo Community

Mit col-md-6 kann ich ein zweispaltiges Layout machen. in jede Spalte sollen mehrere Text Input Felder rein. Nur, die erste Zeile der zweiten Spalte soll leer bleiben. Wie mache ich das am besten ?

Gruss, Trawell

...zur Frage

JQuery Tabellenzeile löschen?

Hallo miteinander,

Ich bin noch ein ziemlicher Anfänger, was JQuery angeht. Ich musste bisher in meinem Praktikum eine Tabelle mit html und css designen. Dies habe Ich auch ohne Probleme hinbekommen. Jetzt jedoch muss Ich die "Zeile hinzufügen / löschen"-Buttons auch zum Laufen bringen.

Bisher habe Ich es so geregelt, dass Ich in der Ur-Zeile keinen Löschen-Button habe und der sich mit einem Klick auf den "Hinzufügen"-Button allesamt mit einer neuen Zeile hinzufügt.

Ich habe es so programmiert, das er es in die Konsole schreibt, wenn man den Button klickt. Dies ist jedoch nicht der Fall. Habe Ich irgendeinen Fehler?

if ("") {
    $("tbody").append(Neue_Zeile);
} else {
    alert = "Du musst jedes Feld ausfüllen"
}


});

$("#button_delete").on("click",function(){

    console.log("Löschen-Button wurde geklickt");

if (""){
    $("tbody").remove(Neue_Zeile);
} else {
    alert = "Du musst erst eine Zeile hinzufügen, um sie löschen zu können"
};

})

Ganz oben wollte Ich angeben, dass er erst eine Zeile hinzufügt, wenn alle Felder ausgefüllt sind. Was soll Ich da dann nach dem "if" in die Klammer schreiben?

Genauso wie bei dem Löschen-Button. Wie kann Ich da nur die Zeile löschen, auf die der angeklickte Button liegt?

Ich danke für eure Antworten! Bitte schreibt die Antwort nicht all zu kompliziert :P

Mit freundlichen Grüßen, Robert Kessler

...zur Frage

Javascript - leere Variable prüfen?

Ich habe die letzten Tage angefangen, mich mit Programmierung in HTML und Javascript zu befassen, die ersten Dinge sind auch gelaufen, aber jetzt stehe ich vor einem Problem, wo mir weder youtube noch Google Suche ein Ergebnis liefern konnten, das funktionierte, wahrscheinlich ist es trotzdem einfach aber ich komme nicht drauf:

Ich möchte eine Art Checkliste erstellen, aus einem Eingabefeld soll ein Text ins nächste freie Feld eingefügt werden, dazu muss ich (nach meinem Kenntnissstand, was ich bisher gemacht habe, und was funktionierte, ohne mich dazu zusätzlich belesen zu haben), über if... else Bedingungen nacheinander prüfen ob die vorherigen Felder (text1, text2, text3... jeweils eine eigene Variable) leer sind, um das dann entweder in das Feld einzufügen oder das nächste zu prüfen...
Wenn alle verfügbaren Felder gefüllt sind, soll beim Versuch, die Eingabe zu machen in einem extra Feld eine Meldung kommen "Liste voll", bei meinen bisherigen Versuchen, obwohl kein Feld belegt ist, springt das Programm sofort zu diesem Punkt, stellt also offensichtlich nicht fest, dass die Variablen der vorherigen Felder noch NICHT belegt sind

(Das gleiche soll dann passieren, wenn ein Punkt erledigt ist, jeweils über einen Button soll dieser Punkt entfernt werden und falls nachfolgende Felder belegt sind, diese jeweils nachrücken (also wenn das nachfolgende Feld belegt ist, den Inhalt dieser Variable übernehmen, sonst Variable leeren))

...zur Frage

Ajax holt Daten, JQUERY erkennt ID nicht?

Hallo

Ich hoffe, dass Ihr mir auf die Sprünge helfen könnt.

Mittels Button wird per JQUERY Ajax aufgerufen. Von der Datenbank werden Bilder ausgegeben.

Nun habe ich vorher schon einige Funktion gebastelt, die mir erlauben das Bild zu bearbeiten, z.B. mittels keyUP die Positionen vom Bild zu verändern, Größe und Co.

Da es mehrere Bilder sind, wird in der PHP Datei eine For-schleife erstellt, wo die Inputs und Buttons mit classen (und Id->testzweck) versehen werden (echo-ausgabe).

Nun lassen sich weder die Buttons noch mit Inputs steuern, weder mit this bzw Klassen noch mit der Id.

Hat vielleicht jemand eine Idee woran es liegen könnte?

      $('#load_image').click( function (event) {
        event.preventDefault();
        $.ajax({
          type: 'POST',
          url: 'ajax/home.php',
          data: $(this).serialize(),
          success: function (title_image) {
            $('#title_image').html(title_image);
          }

        });
      });



<button id="load_image" type="submit" name="load_image" class="btn btn-primary start"> <span><i class="glyphicon glyphicon-picture"></i>Bilder Laden</span> </button>
        <div id="title_image" class="margin">
          <!-- DIVS vom PHP AJAX -->
        </div>

Ajax PHP datei

if (!$title->execute()) {
  echo "Fehler";
} else {
  $name = array();
  while ($data = $title->fetch()) {
    $name[] = $data['name'];
  }
$count = count($name);
  for ($i=0; $i < $count; $i++) {
    echo $name[$i];

/* DIVS */
    echo '    <input type="number" id="image_horizontal_edit1" value="" placeholder="Horizontal">';
    echo '    <input type="number" id="image_vertical_edit1" value="" placeholder="Vertical"><br><br>';
    echo '    <input type="number" id="image_zoom_edit1" value="" placeholder="Zoom"><br><br>';

...zur Frage

SyntaxError: Unexpected token s in JSON at position 0?

Hallo liebe Gutefragler,

Ich möchte eine Auktions-Web-App erstellen und normalerweise fügen Sie die Auktionen über ein Formular hinzu. Wenn ich das Formular korrekt ausfülle und dann auf die Schaltfläche Auktion erstellen klicke, erhalte ich eine Fehlermeldung. Normalerweise sollte man keine bekommen und man sollte die Auktionen in einer Tabelle in einer index.html bekommen.

Hier ist mein Code:

$(document).ready(function() {
  $("#create").click(function() {
    var data = {
      seller: $("#email").val(),
      name: $("#item").val(),
      html: $("#desc").val(),
      minimum_price: $("#str").val(),
      buyout_price: $("#buyout").val(),
      created_on: Date.now(),
      duration: $("#dur").val()
    }
    $.ajax({
      type: 'POST',
      url: "http://localhost:9000/auction",
      data: data,
      dataType: "json",
      contentType: "application/json",
      error: function() {
        alert('An error occurred while creating the new auction');
      },
      success: function(data) {
        $('form :input').val('');
        alert("Good");
      }
    });
  });
});

Mein Localhost sagt:

SyntaxError: Unexpected token s in JSON at position 0

Wo ist mein Fehler? Danke im Voraus!

...zur Frage

Was möchtest Du wissen?

Deine Frage stellen