web-dev-qa-db-fra.com

Comment définir la valeur du texte saisi à l'aide de jQuery

J'ai un texte d'entrée qui est ceci:

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

Qui produit html suivant

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

Je veux définir la valeur de ce texte d'entrée à l'aide de jQuery alors j'ai fait ceci:

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

cependant, cela ne fonctionne pas ... quelle est l'erreur dans ma syntaxe?

javascriptjqueryhtmlasp.net-mvc-3
332
raberana

Votre sélecteur récupère le <div class='textBoxEmployeeNumber'> entourant la zone de texte à la place de l'entrée qui le contient.

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

Mettre à jour après avoir vu la sortie HTML

Si le code ASP.NET génère de manière fiable le code HTML <input> avec un attribut id id='EmployeeId', vous pouvez simplement utiliser:

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

Sinon, vous devrez vérifier dans la console d'erreur de votre navigateur que vous ne possédez pas d'autres erreurs de script, ce qui entraînerait son échec. Le premier exemple ci-dessus fonctionne correctement dans cette démonstration.

506
Michael Berkowski

En utilisant jQuery, nous pouvons utiliser le code suivant:

Sélectionner par nom d'entrée:

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

Sélectionnez par classe d'entrée:

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

Sélectionner par identifiant d'entrée:

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

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

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

Pour élément avec identifiant

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

Vous pouvez définir la valeur comme

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

Documentation ici .

4
Aniket Thakur

c'est pour les cours

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

pour les identifiants

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

maintenant, si vous avez un iput dans un formulaire, vous pouvez utiliser

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

En pure js ce sera plus simple

EmployeeId.value = 'fgg';

EmployeeId.value = 'fgg';
<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>
0
Kamil Kiełczewski

Voici une autre variante pour un téléchargement de fichier doté d'un bouton bootstrap plus esthétique que le bouton de navigation par défaut pour le téléchargement de fichier. C'est le 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>

Voici le script:

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