So legen Sie den Wert des Eingabetextes mit jQuery fest

350

Ich habe einen Eingabetext, der folgendermaßen lautet:

<div class="editor-label">
    @Html.LabelFor(model => model.EmployeeId, "Employee Number")
</div>

<div class="editor-field textBoxEmployeeNumber">
    @Html.EditorFor(model => model.EmployeeId) 
    @Html.ValidationMessageFor(model => model.EmployeeId)
</div>

Welche produzieren folgenden HTML

<div class="editor-label">
  <label for="EmployeeId">Employee Number</label>
</div>

<div class="editor-field textBoxEmployeeNumber">
  <input class="text-box single-line" data-val="true" data-val-number="The field EmployeeId must be a number." data-val-required="The EmployeeId field is required." id="EmployeeId" name="EmployeeId" type="text" value="" />

  <span class="field-validation-valid" data-valmsg-for="EmployeeId" data-valmsg-replace="true"></span>
</div>

Ich möchte den Wert dieses Eingabetextes mit jquery festlegen, also habe ich Folgendes getan:

<script type="text/javascript" language="javascript">
    $(function() {
        $('.textBoxEmployeeNumber').val("fgg");
    });
</script> 

es funktioniert jedoch nicht ... was ist der Fehler in meiner Syntax?

Raberana
quelle
1
Ich habe den Eingabetext in einem Formular verwendet ....
Raberana

Antworten:

529

Ihr Selektor ruft die Umgebung <div class='textBoxEmployeeNumber'>des Textfelds anstelle der darin enthaltenen Eingaben ab.

// Access the input inside the div with this selector:
$(function () {
  $('.textBoxEmployeeNumber input').val("fgg");
});

Aktualisieren Sie nach dem Anzeigen des Ausgabe-HTML

Wenn der ASP.NET-Code den HTML-Code <input>mit einem ID-Attribut zuverlässig ausgibt id='EmployeeId', können Sie einfach Folgendes verwenden:

$(function () {
  $('#EmployeeId').val("fgg");
});

Andernfalls müssen Sie in der Fehlerkonsole Ihres Browsers überprüfen, ob Sie keine anderen Skriptfehler haben, die dazu führen, dass dies fehlschlägt. Das erste Beispiel oben funktioniert in dieser Demonstration korrekt.

Michael Berkowski
quelle
versuchte das, funktionierte nicht .... versuchte auch .textBoxEmployeeNumber input = [type = "text"] ... funktionierte auch nicht
raberana
@using (Html.BeginForm ()) {@ Html.ValidationSummary (true) <fieldset> <legend> Reservierung </ leggend> ......... <div class = "editor-label"> @Html. LabelFor (model => model.EmployeeId, "Employee Number") </ div> <div class = "Editorfeld textBoxEmployeeNumber"> @ Html.EditorFor (model => model.EmployeeId) @ Html.ValidationMessageFor (model => model .EmployeeId) </ div> ..........
Rababerana
<div class = "editor-label"> <label for = "EmployeeId"> Mitarbeiternummer </ label> </ div> <div class = "Editorfeld textBoxEmployeeNumber"> <input class = "Textfeld einzeilig "data-val =" true "data-val-number =" Das Feld EmployeeId muss eine Zahl sein. " data-val-required = "Das Feld EmployeeId ist erforderlich." id = "EmployeeId" name = "EmployeeId" type = "text" value = "" /> <span class = "Feldvalidierung gültig" data-valmsg-for = "EmployeeId" data-valmsg-replace = "true" > </ span> </ div>
Raberana
@ RojBeraña Liest der Browser Code in Ihrem $ (Dokument) .ready? dort Warnung platzieren: <script type = "text / javascript" language = "javascript"> Warnung ('eingegeben'); $ (function () {$ ('# EmployeeId'). val ("fgg");}); </ script>
Karaxuna
Haben Sie ein ähnliches Problem, Wert ist im Browser sichtbar, aber wenn ich Code mit F12 überprüfe, gibt es value=""nach dem Speichern eine leere Datei in der Datenbank.
Sebastian Xawery Wiśniowiecki
67

Mit jQuery können wir den folgenden Code verwenden:

Wählen Sie nach Eingabename:

$('input[name="textboxname"]').val('some value')

Nach Eingabeklasse auswählen:

$('input[type=text].textboxclass').val('some value')

Wählen Sie anhand der Eingabe-ID:

$('#textboxid').val('some value')
Aditya P Bhatt
quelle
12
$(document).ready(function () {
    $('#EmployeeId').val("fgg");

    //Or
    $('.textBoxEmployeeNumber > input').val("fgg");

    //Or
    $('.textBoxEmployeeNumber').find('input').val("fgg");
});
Thulasiram
quelle
5

Für Element mit ID

<input id="id_input_text16" type="text" placeholder="Ender Data"></input>

Sie können den Wert als einstellen

$("#id_input_text16").val("testValue");

Dokumentation hier .

Aniket Thakur
quelle
4

Dies ist für Klassen

$('.nameofdiv').val('we are developers');

für IDs

$('#nameofdiv').val('we are developers');

Wenn Sie einen Iput in einer Form haben, die Sie verwenden können

$("#form li.name input.name_val").val('we are awsome developers');
user4920718
quelle
0

Hier ist eine weitere Variante für einen Datei-Upload mit einer besser aussehenden Bootstrap-Schaltfläche als die Standard-Schaltfläche zum Durchsuchen von Dateien. Dies ist das HTML:

<div class="form-group">
        @Html.LabelFor(model => model.FileName, htmlAttributes: new { @class = "col-md-2  control-label" })
        <div class="col-md-1 btn btn-sn btn-primary" id="browseButton" onclick="$(this).parent().find('input[type=file]').click();">browse</div>
        <div class="col-md-7">
            <input id="fileSpace" name="uploaded_file"  type="file" style="display: none;">   @*style="display: none;"*@
            @Html.EditorFor(model => model.FileName, new { htmlAttributes = new { @class = "form-control", @id = "modelField"} })
            @Html.ValidationMessageFor(model => model.FileName, "", new { @class = "text-danger" })
        </div>
    </div>

Hier ist das Skript:

        $('#fileSpace').on("change", function () {
        $("#modelField").val($('input[name="uploaded_file"]').val());
Fahrrad Dave
quelle
0

In reinen js wird es einfacher sein

EmployeeId.value = 'fgg';

Kamil Kiełczewski
quelle