CODEWITHSUNDEEP
javascriptjquery
demonslayer1
demonslayer1

Reputation: 859

how to change text box value with jQuery?

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>

Upvotes: 37

Views: 154212

Answers (17)

Ashwin Kumar
Ashwin Kumar

Reputation: 71

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>

Upvotes: 1

Tosin Onikute
Tosin Onikute

Reputation: 4002

You could just use this very simple way

<script>
  $(function() {

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

  });
</script>

Upvotes: 28

Ronak Rathod
Ronak Rathod

Reputation: 440

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>

Upvotes: 4

vikas kumar
vikas kumar

Reputation: 53

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>

Upvotes: 0

Ashwin Kumar
Ashwin Kumar

Reputation: 71

Try this out:

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

Upvotes: 0

vikas kumar
vikas kumar

Reputation: 53

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

Upvotes: 0

Nithin John
Nithin John

Reputation: 917

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

Upvotes: 1

Code3d
Code3d

Reputation: 73

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

$(function(){

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

});

Upvotes: 3

Qasim Bataineh
Qasim Bataineh

Reputation: 707

Simple and easy :

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

Upvotes: 1

Chintan Hingrajiya
Chintan Hingrajiya

Reputation: 810

You may try following this:

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

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

Upvotes: 2

Robert Markovski
Robert Markovski

Reputation: 94

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

Upvotes: 1

Sumit Pathak
Sumit Pathak

Reputation: 661

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

Upvotes: 0

Sajad Karuthedath
Sajad Karuthedath

Reputation: 15847

Try this jsfiddle:

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

Upvotes: 0

yzc
yzc

Reputation: 11

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")`

Upvotes: 0

thecodeparadox
thecodeparadox

Reputation: 87073

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

Upvotes: 0

farid bekran
farid bekran

Reputation: 2754

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 () { /* ... */ });

Upvotes: 0

Eduardo Quintana
Eduardo Quintana

Reputation: 2388

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

Upvotes: 0

Related Questions