Как изменить значение текстового поля с помощью jQuery?

Я хотел бы изменить значение текстовых полей, когда пользователь нажимает кнопку отправки с помощью JQuery. Я попробовал это с помощью

$('textbox').val('Changed Value');

и

$('#dsf').val('Changed Value');

но ни один из них не работал.

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>serializeArray demo</title>
  <style>
  body, select {
    font-size: 14px;
  }
  form {
    margin: 5px;
  }
  p {
    color: red;
    margin: 5px;
  }
  b {
    color: blue;
  }
  </style>
  <script src="//code.jquery.com/jquery-1.10.2.js"></script>
</head>
<body>

<p><b>Results:</b> <span id="results"></span></p>
<form>
  <select name="single">
    <option>Single</option>
    <option>Single2</option>
  </select>
  <select name="multiple" multiple="multiple">
    <option selected="selected">Multiple</option>
    <option>Multiple2</option>
    <option selected="selected">Multiple3</option>
  </select>
  <br>
  <input type="checkbox" name="check" value="check1" id="ch1">
  <label for="ch1">check1</label>
  <input type="checkbox" name="check" value="check2" checked="checked" id="ch2">
  <label for="ch2">check2</label>
  <input type="radio" name="radio" value="radio1" checked="checked" id="r1">
  <label for="r1">radio1</label>
  <input type="radio" name="radio" value="radio2" id="r2">
  <label for="r2">radio2</label>


  <input type="submit"  value="s1" id="ch">

  <input type="submit"  value="szv" id="cd" > 

  <input type="text"   value = "abc"  id = "dsf" > 

  <input type="text"   value = "abc"  id = "dsxzcv"  > 

</form>

<script>
  function showValues() {
    var fields = $( ":input" ).serializeArray();
    $( "#results" ).empty();
    jQuery.each( fields, function( i, field ) {
      $( "#results" ).append( field.value + " " );
    });
  }

  $( ":checkbox, :radio" ).click( showValues );
  $( "select" ).change( showValues );

  $(#ch1).val("adfsadf") ;

  showValues();

  $(‘:submit’).click(function () {

   $(‘:submit’).val() = "dasf" ;

   $('textbox').val('Changed Value');

 //$('#dsf').val('Changed Value');
}
</script>

</body>
</html>

Ответы

Ответ 1

Вы можете просто использовать этот очень простой способ

<script>
  $(function() {

    $('#cd').click(function() {
      $('#dsf').val("any thing here");
    });

  });
</script>

Ответ 2

Если .val() не работает, я бы предложил вам использовать .attr()

<script>
  $(function() {
    $("your_button").on("click", function() {
      $("your_textbox").val("your value");
    });
  });
</script>

Ответ 3

Отсутствовала функция готового документа, поэтому код не работал. Например:

$(function(){

 $('#button1').click(function(){
   $('#txtbox1').val('Changed Value');
 });

});

Ответ 4

Вы можете попробовать следующее:

Вы забыли добавить цитату: $(#ch1).val("adfsadf") ;

Это должно быть: $('#ch1').val("adfsadf") ;

Ответ 5

JQuery

$(document).ready( function ) {
    $('element').val('Changed Value');
    $('element').html('Changed Value');
    $('element').text('Changed Value');
});

JavaScript:

window.onload = function() {
    element.value = 'Changed Value';
    element.innerHTML = 'Changed Value';
    element.textContent = 'Changed Value'; // All browsers except IE. For IE: innerText
};

Ответ 6

Простой и легкий:

 $('#email').val(YourNewValue);

Ответ 7

Use like this on dropdown change
$("#assetgroupSelect").change(function(){
    $("#idValue").val($this.val());
})

Ответ 8

Попробуйте jsfiddle:

$(function() {
  $('#cd').click(function () {
    $('#dsf').val('Changed Value');
  });
});

Ответ 9

$('#cd').click(function() {
  $(this).val('dasf');  // update the value of submit button
  $('#dsf').val('Changed Value') // update the text input value
});

textbox не является допустимым селектором.

Кроме того, когда вы нажмете кнопку отправки, она представит форму как поведение по умолчанию. Поэтому не забывайте останавливать отправку формы по умолчанию.

Лучше, если вы сделаете так:

$('form').on('submit', function() {

  // write all your codes

  return false; // Prevent default form submission
});

Не забудьте пользователь jQuery DOM ready $(function() { .. });

Ответ 10

вы просто делаете, как эта надежда поможет вам

$(document).ready(function(){   

  $("#cd").click(function () {   

    $('#dsxzcv').val("Changed_Value");   

})
})

здесь вы можете увидеть демонстрацию

http://jsbin.com/dolebana/1

Ответ 11

Поскольку вы пытаетесь добавить событие click для ввода ввода, вам нужно будет предотвратить нормальный поток, который будет делать это, чтобы отправить форму.

Вы также можете использовать $(document).ready()

Но поскольку у вас есть тэг script в конце страницы, DOM уже загружен.

Чтобы предотвратить по умолчанию, вам понадобится что-то вроде этого:

$("form").on('submit',function(e){
    e.preventDefault();
    $("#dsf").val("changed value")

})

Если элемент не был введенным, он будет таким же простым, как

$("#cd").click(function(){
    $("#dsf").val("changed value")

})

Смотрите Fiddle

Ответ 12

Использовать готовое событие документа:

$(document).ready(function(){ /* the click code */ });

И лучше использовать метод bind для обработки событий. потому что вы не хотите вызывать действие click при каждом загрузке страницы

  $(':submit').bind('click' , function () { /* ... */ });

Ответ 13

если вы хотите изменить текст "ввода", используйте:

     `$("#inputId").val("what you want to put")`

и если вы хотите изменить текст в "label", "span", "div", вы можете использовать

     `$("#containerId").text("what you want to put")`

Ответ 14

<style>
    .form-cus {
        width: 200px;
        margin: auto;
        position: relative;
    }
        .form-cus .putval, .form-cus .getval {
            width: 100%;
        }
        .form-cus .putval {
            position: absolute;
            left: 0px;
            top: 0;
            color: transparent !important;
            box-shadow: 0 0 0 0 !important;
            background-color: transparent !important;
            border: 0px;
            outline: 0 none;
        }
            .form-cus .putval::selection {
                color: transparent;
                background: lightblue;
            }
</style>

<link href="css/bootstrap.min.css" rel="stylesheet" />
<script src="js/jquery.min.js"></script>
<div class="form-group form-cus">
    <input class="putval form-control" type="text" id="input" maxlength="16" oninput="xText();">
    <input class="getval form-control" type="text" id="output" maxlength="16">
</div>

<script type="text/javascript">
    function xText() {
        var x = $("#input").val();
        var x_length = x.length;
        var a = '';
        for (var i = 0; i < x_length; i++) {
            a += "x";
        }
        $("#output").val(a);
     }
    $("#input").click(function(){
     $("#output").trigger("click");
    })

</script>

Ответ 15

function xText() {
  var x = $("#input").val();
  var x_length = x.length;
  var a = '';
  for (var i = 0; i < x_length; i++) {
    a += "x";
  }
  $("#output").val(a);
}
.form-cus {width: 200px;margin: auto;position: relative;}
.form-cus .putval, .form-cus .getval {width: 100%;box-sizing: border-box;}
.form-cus .putval {position: absolute;left: 0px;top:0; height:100%; color: transparent;background: transparent;border: 0px;outline: 0 none;}
.form-cus .putval::selection {color: transparent;background: lightblue;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.1/jquery.min.js"></script>
<p>Input Number or Strong Mouse Click is Hidden... </p>
<div class="form-cus">
  <input class="putval" type="text" id="input" maxlength="16" oninput="xText();" placeholder="Input Text" />
  <input class="getval" type="text" id="output" maxlength="16" />
</div>

Ответ 16

Попробуйте это:

<script>
  $(document).ready(function() {
    $("#button-id").click(function() {
      $('#text').val("create");
    });
  });
</script>

Ответ 17

Это изменит значение при нажатии кнопки:

<script>
  jQuery(function() {
    $('#b11').click(function(e) {
      e.preventDefault();
      var name = "hello";
      $("#t1").val(name);
    });
  });
</script>