Question

当用户使用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>

Answer 1

你可以用这种非常简单的方式

<script>
  $(function() {

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

  });
</script>

Answer 2

如果.val()无效，我建议您使用.attr()属性

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

Answer 3

缺少文档就绪功能，这就是代码无效的原因。例如：

$(function(){

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

});

Answer 4

您可以尝试以下操作：

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

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

Answer 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
};

Answer 6

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

Answer 7

简单易行：

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

Answer 8

如果要更改“输入”的文本，请使用：

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

如果你想更改“标签”，“span”，“div”中的文字，你可以使用

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

Answer 9

使用文件的准备事件：

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

最好将bind方法用于事件处理。因为您不想在每个页面加载中调用点击操作

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

Answer 10

因为您尝试将click事件添加到提交输入中，所以您需要阻止提交表单的正常流程。

您也可以使用$(document).ready()

但是，由于您在页面末尾有脚本标记，因此已经加载了DOM。

要防止默认，您需要以下内容：

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

})

如果元素不是提交输入，那么它就像

一样简单

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

})

请参阅此Fiddle

Answer 11

你只是这样希望会帮助你

$(document).ready(function(){   

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

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

})
})

在这里你可以看到演示

http://jsbin.com/dolebana/1

Answer 12

$('#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() { .. });

Answer 13

试试这个jsfiddle：

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

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

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

Answer 16

尝试一下：

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

Answer 17

这将在单击按钮时更改值：

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

如何用jQuery更改文本框值？

17 个答案: