Cara mengatur nilai input teks menggunakan jQuery


350

Saya memiliki teks input yang ini:

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

Yang menghasilkan html berikut

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

Saya ingin mengatur nilai input teks ini menggunakan jquery jadi saya melakukan ini:

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

namun, itu tidak berfungsi ... apa kesalahan di sintaksis saya?


1
saya menggunakan teks input di dalam formulir ....
raberana

Jawaban:


529

Pemilih Anda sedang mengambil kotak teks di sekitarnya <div class='textBoxEmployeeNumber'>daripada input di dalamnya.

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

Perbarui setelah melihat HTML keluaran

Jika kode ASP.NET secara andal menampilkan HTML <input>dengan atribut id id='EmployeeId', Anda dapat lebih mudah menggunakan:

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

Gagal ini, Anda harus memverifikasi di konsol kesalahan browser Anda bahwa Anda tidak memiliki kesalahan skrip lain yang menyebabkan ini gagal. Contoh pertama di atas berfungsi dengan benar dalam demonstrasi ini.


mencobanya, tidak berfungsi .... mencoba juga .textBoxEmployeeNumber input = [type = "text"] ... tidak berfungsi juga
raberana

@menggunakan (Html.BeginForm ()) {@ Html.ValidationSummary (true) <fieldset> <legend> Reservasi </legend> ......... <div class = "editor-label"> @Html. LabelFor (model => model.EmployeeId, "Nomor Karyawan") </div> <div class = "editor-bidang textBoxEmployeeNumber"> @ Html.EditorFor (model => model.EmployeeId) @ Html.ValidationMessageFor (model => model .EmployeeId) </div> ..........
raberana

<div class = "editor-label"> <label untuk = "EmployeeId"> Nomor Karyawan </label> </div> <div class = "editor-field textBoxEmployeeNumber"> <input class = "text-box single-line "data-val =" true "data-val-number =" Bidang EmployeeId harus berupa angka. " data-val-required = "Bidang EmployeeId diperlukan." id = "EmployeeId" name = "EmployeeId" type = "text" value = "" /> <span class = "bidang-validasi-valid" data-valmsg-untuk = "EmployeeId" data-valmsg-replace = "true" > </span> </div>
raberana

@ RojBeraña Apakah browser membaca kode di dalam $ (dokumen) Anda. Sudah berfungsi? lansiran di sana: <script type = "text / javascript" language = "javascript"> lansiran ('dimasukkan'); $ (function () {$ ('# EmployeeId'). val ("fgg");}); </script>
karaxuna

Memiliki masalah yang sama, nilainya terlihat di browser, tetapi ketika saya memeriksa kode dengan F12, ada value=""dan kosongkan dalam DB setelah disimpan.
Sebastian Xawery Wiśniowiecki

67

Menggunakan jQuery, kita dapat menggunakan kode berikut:

Pilih dengan nama input:

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

Pilih dengan kelas input:

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

Pilih dengan id masukan:

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

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

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

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

5

Untuk elemen dengan id

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

Anda dapat menetapkan nilai sebagai

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

Dokumentasi di sini .


4

ini untuk kelas

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

untuk id

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

sekarang jika Anda memiliki iput dalam bentuk yang dapat Anda gunakan

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

0

Berikut adalah variasi lain untuk unggahan file yang memiliki tombol bootstrap yang lebih bagus daripada tombol telusuri unggah file default. Ini adalah 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>

Ini skripnya:

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

0

Dalam js murni itu akan lebih sederhana

EmployeeId.value = 'fgg';

Dengan menggunakan situs kami, Anda mengakui telah membaca dan memahami Kebijakan Cookie dan Kebijakan Privasi kami.
Licensed under cc by-sa 3.0 with attribution required.