how to change text box value with jQuery?

Question

I would like to change the value of the textboxes when the user clicks the submit button with Jquery. I tried it with

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

and

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

but neither method worked.

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

Be sure to disable the default event on the submit button if you are going to use it to detect the click event. e.preventDefault(); — Kyo, Mar 08 '14 at 05:49
There is no 'textbox' element. Also, you're using improper quote marks for the prior code. That is likely causing your script to error out and fail. — Daedalus, Mar 08 '14 at 05:50
Cant believe that such a simple question which has actually some small syntax error gets so big response of 11 answers anf also give a golden badge !! Simply wow !! — frunkad, Mar 17 '15 at 09:07
If you're seeing this now looking, suggest you also look at [this question](https://stackoverflow.com/questions/11873721/jquery-val-change-doesnt-change-input-value). Attr saved my day where val did not. — JeopardyTempest, Jun 22 '18 at 08:02

score 28 · Answer 1 · edited Mar 27 '19 at 11:47

28

You could just use this very simple way

<script>
  $(function() {

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

  });
</script>

edited Mar 27 '19 at 11:47

adiga

34,372
9
61
83

answered Mar 08 '14 at 05:36

Tosin Onikute

3,883
6
38
61

score 4 · Answer 2 · edited Mar 27 '19 at 11:46

4

If .val() is not working, I would suggest you to use the .attr() attribute

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

edited Mar 27 '19 at 11:46

adiga

34,372
9
61
83

answered Dec 19 '14 at 10:53

Ronak Rathod

430
4
14

But it does not change the textbox – Apr 03 '15 at 04:25

Code3d · Answer 3 · 2016-03-05T13:13:04.230

3

Document ready function was missing thats why the code was not working. For example:

$(function(){

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

});

edited Mar 05 '16 at 13:13

answered Mar 08 '14 at 05:41

Code3d

73
5

score 2 · Answer 4 · edited Mar 17 '15 at 08:39

2

You may try following this:

You forgot to add quote : $(#ch1).val("adfsadf") ;

This supposed to be : $('#ch1').val("adfsadf") ;

edited Mar 17 '15 at 08:39

Ahosan Karim Asik

3,219
1
18
27

answered Mar 17 '15 at 08:22

Chintan Hingrajiya

670
7
10

score 1 · Answer 5 · answered Jul 17 '14 at 23:47

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

score 1 · Answer 6 · answered Dec 22 '15 at 19:04

1

Simple and easy :

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

answered Dec 22 '15 at 19:04

Qasim Bataineh

687
6
3

Nithin John · Answer 7 · 2017-05-18T08:31:09.983

1

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

edited May 18 '17 at 08:31

answered May 18 '17 at 07:50

Nithin John

897
3
8
21

score 1 · Answer 8 · edited Mar 27 '19 at 14:00

1

This will change the value when button is clicked:

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

edited Mar 27 '19 at 14:00

MrMaavin

1,611
2
19
30

answered Mar 27 '19 at 12:26

Ashwin Kumar

61
1
11

score 0 · Answer 9 · edited Mar 08 '14 at 06:06

0

Try this jsfiddle:

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

edited Mar 08 '14 at 06:06

jvperrin

3,368
1
23
33

answered Mar 08 '14 at 05:46

Sajad Karuthedath

14,987
4
32
49

thecodeparadox · Answer 10 · 2014-03-08T05:54:23.150

0

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

textbox is not a valid selector.

Also, when you hit the submit button it will submit the form as default behavior. So don't forget to stop default form submission.

Better if you do like this:

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

  // write all your codes

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

Don't forget to user jQuery DOM ready $(function() { .. });

edited Mar 08 '14 at 05:54

answered Mar 08 '14 at 05:49

thecodeparadox

86,271
21
138
164

What about the other problems? – Daedalus Mar 08 '14 at 05:55
@Daedalus answer stick with the issue OP asked. OP need to figure out something, should do some study.SO is not place to show detail tutorial. – thecodeparadox Mar 08 '14 at 05:58

Sumit Pathak · Answer 11 · 2014-03-08T07:27:49.560

0

you simply do like this hope will help you

$(document).ready(function(){   

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

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

})
})

here you can see the demo

http://jsbin.com/dolebana/1

edited Mar 08 '14 at 07:27

answered Mar 08 '14 at 05:51

Sumit Pathak

671
1
6
25

score 0 · Answer 12 · answered Mar 08 '14 at 05:53

Because you're trying to add a click event to a submit input you will need to prevent the normal flow that this will do that is submit the form.

You can also use $(document).ready()

But since you have your script tag at the end of the page the DOM is already loaded.

To prevent the default you will need something like this:

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

})

If the element wasn't a submit input it will be as simple as

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

})

See this Fiddle

score 0 · Answer 13 · answered Mar 08 '14 at 05:54

Use ready event of document :

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

And it is better to use bind method for event handeling. because you don't want to call click action in every load of page

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

score 0 · Answer 14 · answered Mar 08 '14 at 05:58

0

if you want to change the text of "input",use:

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

and if you want to change the text in "label","span","div", you can use

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

answered Mar 08 '14 at 05:58

yzc

11
2

score 0 · Answer 15 · answered Feb 20 '18 at 09:00

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

score 0 · Answer 16 · edited Mar 27 '19 at 11:44

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>

Please elaborate as to why your solutions should work and what the OP was doing wrong. Just pasting code doesn't clarify the doubt in all cases. — Exception_al, Feb 20 '18 at 09:21

score 0 · Answer 17 · edited Mar 27 '19 at 11:43

0

Try this out:

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

edited Mar 27 '19 at 11:43

adiga

34,372
9
61
83

answered Mar 27 '19 at 11:41

Ashwin Kumar

61
1
11

1

While this code may answer the question, providing additional context regarding why and/or how this code answers the question improves its long-term value. – adiga Mar 27 '19 at 11:43

how to change text box value with jQuery?

17 Answers17