Cómo establecer el valor del texto de entrada usando jQuery


350

Tengo un texto de entrada que es este:

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

Que producen siguiendo 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>

Quiero establecer el valor de este texto de entrada usando jquery, así que hice esto:

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

sin embargo, no funciona ... ¿cuál es el error en mi sintaxis?


1
utilicé el texto de entrada dentro de un formulario ...
raberana

Respuestas:


529

Su selector está recuperando el cuadro de texto que lo rodea en <div class='textBoxEmployeeNumber'>lugar de la entrada dentro de él.

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

Actualizar después de ver HTML de salida

Si el código ASP.NET genera de manera confiable el HTML <input>con un atributo de identificación id='EmployeeId', puede simplemente usar:

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

De lo contrario, deberá verificar en la consola de errores de su navegador que no tiene otros errores de script que causen que esto falle. El primer ejemplo anterior funciona correctamente en esta demostración.


intenté eso, no funciona ... intenté también .textBoxEmployeeNumber input = [type = "text"] ... no
funcionó

@using (Html.BeginForm ()) {@ Html.ValidationSummary (true) <fieldset> <legend> Reservation </legend> ......... <div class = "editor-label"> @Html. LabelFor (model => model.EmployeeId, "Número de empleado") </div> <div class = "editor-field textBoxEmployeeNumber"> @ Html.EditorFor (model => model.EmployeeId) @ Html.ValidationMessageFor (model => model .EmployeeId) </div> ..........
raberana

<div class = "editor-label"> <label for = "EmployeeId"> Número de empleado </label> </div> <div class = "editor-field textBoxEmployeeNumber"> <input class = "text-box single-line "data-val =" true "data-val-number =" El campo EmployeeId debe ser un número ". data-val-required = "El campo EmployeeId es obligatorio". id = "EmployeeId" name = "EmployeeId" type = "text" value = "" /> <span class = "field-validation-valid" data-valmsg-for = "EmployeeId" data-valmsg-replace = "true" > </span> </div>
raberana

@ RojBeraña ¿El navegador lee el código dentro de su función $ (document) .ready? coloque la alerta allí: <script type = "text / javascript" language = "javascript"> alert ('ingresado'); $ (function () {$ ('# EmployeeId'). val ("fgg");}); </script>
karaxuna

Tiene un problema similar, el valor es visible en el navegador, pero cuando verifico el código con F12, hay value=""un archivo vacío en la base de datos después de guardar.
Sebastian Xawery Wiśniowiecki

67

Usando jQuery, podemos usar el siguiente código:

Seleccione por nombre de entrada:

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

Seleccione por clase de entrada:

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

Seleccione por id de entrada:

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

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

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

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

5

Para elemento con id

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

Puede establecer el valor como

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

Documentación aquí .


4

esto es para clases

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

para identificadores

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

ahora si tienes un iput en una forma que puedes usar

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

0

Aquí hay otra variación para una carga de archivos que tiene un botón de arranque más bonito que el botón de exploración de carga de archivos predeterminado. Este es el 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>

Aquí está el guión:

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

0

En js puro será más simple

EmployeeId.value = 'fgg';

Al usar nuestro sitio, usted reconoce que ha leído y comprende nuestra Política de Cookies y Política de Privacidad.
Licensed under cc by-sa 3.0 with attribution required.