logo标签列表

如何使用jQuery更改文本框的值？

javascriptjquery
37

我希望当用户点击提交按钮时，能够使用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>
如果您要使用提交按钮来检测单击事件，请确保禁用默认事件。e.preventDefault(); - Kyo
2
没有'textbox'元素。此外，您在之前的代码中使用了不正确的引号标记。这可能会导致脚本出错并失败。 - Daedalus
简直不敢相信一个如此简单的问题，实际上只是一些小语法错误，竟然得到了11个回答和一个金色徽章的如此巨大反响！！真是太棒了！！ - frunkad
如果你现在看到这个，建议你也看一下这个问题。Attr救了我的一天，而val没有。 - JeopardyTempest
17个回答
28

你可以使用这个非常简单的方法

<script>
  $(function() {

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

  });
</script>
4
如果.val()无法使用，建议您使用.attr()属性。
<script>
  $(function() {
    $("your_button").on("click", function() {
      $("your_textbox").val("your value");
    });
  });
</script>
但它不会改变文本框。 - user4710450
3

由于缺少文档准备函数，代码无法运行。

例如：
$(function(){

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

});
2

您可以尝试以下方法：

您忘记添加引号：$(#ch1).val("adfsadf") ;

应该是这样的：$('#ch1').val("adfsadf") ;

1
简单易懂：
 $('#email').val(YourNewValue);
1
这会在按钮被点击时更改数值：
<script>
  jQuery(function() {
    $('#b11').click(function(e) {
      e.preventDefault();
      var name = "hello";
      $("#t1").val(name);
    });
  });
</script>
1

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
};
1
Use like this on dropdown change
$("#assetgroupSelect").change(function(){
    $("#idValue").val($this.val());
})
0
<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>
0

试一下：

<script>
  $(document).ready(function() {
    $("#button-id").click(function() {
      $('#text').val("create");
    });
  });
</script>
1
虽然这段代码可能回答了问题，但是提供关于为什么和/或如何回答问题的额外上下文可以提高其长期价值。 - adiga
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接