JQuery kullanarak giriş metninin değeri nasıl ayarlanır


351

Bu bir giriş metni var:

<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>

Hangi html aşağıdaki üretmek

<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>

Ben bu yüzden jquery kullanarak bu giriş metninin değerini ayarlamak istiyorum:

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

ancak, çalışmıyor ... sözdizimimde hata nedir?


1
bir form içindeki giriş metnini kullandım ....
raberana 16:12

Yanıtlar:


531

Seçiciniz, <div class='textBoxEmployeeNumber'>içindeki giriş yerine metin kutusunun çevresini alıyor .

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

Çıktı HTML'sini gördükten sonra güncelleme

ASP.NET kodu HTML'yi <input>bir id özniteliğiyle güvenilir bir şekilde çıkarıyorsa, id='EmployeeId'daha basitçe şunu kullanabilirsiniz:

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

Bunu başaramazsanız, tarayıcınızın hata konsolunda bunun başarısız olmasına neden olan başka komut dosyası hatalarınızın olmadığını doğrulamanız gerekir. Yukarıdaki ilk örnek bu gösteride doğru şekilde çalışır.


bunu denedim, çalışmıyor .... Ayrıca çalıştı .textBoxEmployeeNumber input = [type = "text"] ... de çalışmıyor
raberana

@using (Html.BeginForm ()) {@ Html.ValidationSummary (true) <fieldset> <legend> Rezervasyon </legend> ......... <div class = "editor-label"> @Html. LabelFor (model => model.EmployeeId, "Çalışan Numarası") </div> <div class = "editör alanı textBoxEmployeeNumber"> @ Html.EditorFor (model => model.EmployeeId) @ Html.ValidationMessageFor (model => model .ImployeeId) </div> ..........
raberana

<div class = "editor-label"> <label for = "EmployeeId"> Çalışan Numarası </label> </div> <div class = "editor-field textBoxEmployeeNumber"> <input class = "metin kutusu tek satır "data-val =" true "data-val-number =" EmployeeId alanı bir sayı olmalıdır. " data-val-required = "EmployeeId alanı zorunludur." id = "EmployeeId" name = "EmployeeId" type = "metin" değer = "" /> <span class = "alan doğrulaması-geçerli" data-valmsg-for = "EmployeeId" data-valmsg-replace = "true" > </span> </div>
raberana

@ RojBeraña Tarayıcı $ (belge) .ready içindeki kodu okuyor mu? uyarıyı buraya yerleştirin: <script type = "text / javascript" language = "javascript"> alert ('girilen'); $ (function () {$ ('# EmployeeId'). val ("fgg");}); </script>
karaxuna

Benzer bir sorun var, değer tarayıcıda görünür, ancak F12 ile kodu kontrol ettiğimde, value=""kaydettikten sonra DB'de boş ve dosyalanmış.
Sebastian Xawery Wiśniowiecki

67

JQuery kullanarak aşağıdaki kodu kullanabiliriz:

Giriş adına göre seçin:

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

Giriş sınıfına göre seçin:

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

Giriş kimliğine göre seç:

$('#textboxid').val('some value')

12
$(document).ready(function () {
    $('#EmployeeId').val("fgg");

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

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

5

Kimliğine sahip öğe için

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

Değeri şu şekilde ayarlayabilirsiniz:

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

Belgeler burada .


4

bu sınıflar için

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

kimlikler için

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

şimdi bir formda bir iput varsa u kullanabilirsiniz

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

0

İşte varsayılan dosya yükleme göz atma düğmesinden daha güzel görünümlü bir bootstrap düğmesine sahip bir dosya yüklemesi için başka bir varyasyon. Bu 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>

İşte senaryo:

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

0

Saf j'lerde daha basit olacak

EmployeeId.value = 'fgg';

Sitemizi kullandığınızda şunları okuyup anladığınızı kabul etmiş olursunuz: Çerez Politikası ve Gizlilik Politikası.
Licensed under cc by-sa 3.0 with attribution required.