Set value to input field with jQuery

Question

I want to add some value in an input field with jQuery. The problem is with the ID of the input field. I am using the id such as options[input2]. In that case my code does not work. If I use ID like input2, then it works fine. I need to use options[input2], how can I fix the code?

HTML:

<div>
    <h3>Working</h3>
    <input id="input1" type="text" value="" />
    <input class="button" type="button" value="Add value" />
</div>
<div>
    <h3>Not working</h3>
    <input id="options[input2]" type="text" value="" />
    <input class="button" type="button" value="Add value" />
</div>

jQuery:

$('.button').click(function(){
    var fieldID = $(this).prev().attr("id");
    $('#' + fieldID).val("hello world");
});

Demo:

http://jsfiddle.net/4XR8M/

[] characters are not valid in html id property

yoavmatchulsky
– yoavmatchulsky

2013-09-06 10:18:50 +00:00
Commented Sep 6, 2013 at 10:18 — yoavmatchulsky
– yoavmatchulsky, Commented Sep 6, 2013 at 10:18

Dipesh Parmar · Accepted Answer · 2013-09-06 10:15:03Z

26

You can do it as below.

$(this).prev('input').val("hello world");

Live Demo

answered Sep 6, 2013 at 10:15

Dipesh Parmar

27.3k8 gold badges65 silver badges92 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

faize Over a year ago

This is not really working anymore, try clicking on live demo, it just replace the input rather than adding value to the input

Satpal · Accepted Answer · 2013-09-06 10:15:57Z

3

You can simply use

 $(this).prev().val("hello world");

JSFiddle Demo

answered Sep 6, 2013 at 10:15

Satpal

134k13 gold badges168 silver badges171 bronze badges

2 Comments

faize Over a year ago

This is not really working anymore, try clicking on live demo, it just replace the input rather than adding value to the input

Satpal Over a year ago

@faize, Just checked fiddle. It's working as expected. Can you share more information?

Oskar Hane · Accepted Answer · 2013-09-06 10:23:22Z

3

You have to escape [ and ]. Try this:

$('.button').click(function(){
    var fieldID = $(this).prev().attr("id");
    fieldID = fieldID.replace(/([\[\]]+)/g, "\\$1");
    $('#' + fieldID).val("hello world");
});

Demo: http://jsfiddle.net/7RJtf/1/

answered Sep 6, 2013 at 10:23

Oskar Hane

1,88213 silver badges8 bronze badges

Comments

Sully · Accepted Answer · 2020-05-06 01:26:07Z

0

$.each(obj, function(index, value) {
    $('#looking_for_job_titles').tagsinput('add', value);
    console.log(value);
});

answered May 6, 2020 at 1:26

Sully

4175 silver badges14 bronze badges

1 Comment

Borja Over a year ago

While this code may provide a solution to the question, it's better to add context as to why/how it works. This can help future users learn, and apply that knowledge to their own code. You are also likely to have positive feedback from users in the form of upvotes, when the code is explained.

Rahapouyan kian · Accepted Answer · 2021-11-30 01:26:57Z

0

You can simply use $(this).prev().val("hello world");

answered Nov 30, 2021 at 1:26

Rahapouyan kian

1

Comments

Ahmad · Accepted Answer · 2023-03-18 10:57:40Z

0

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.3/jquery.min.js"></script>
<script>
$(document).ready(function(){
  $("#10").click(function(){
    $("input:text").val("10");
  });
  $("#20").click(function(){
    $("input:text").val("20");
  });
  $("#30").click(function(){
    $("input:text").val("30");
  });
  $("#40").click(function(){
    $("input:text").val("40");
  });
  $("#50").click(function(){
    $("input:text").val("50");
  });
  
});
</script>
</head>
<body>

<p>Name: <input type="text" name="user"></p>

<button id="10">Apply Discount 10%</button><br>
<button id="20">Apply Discount 20%</button><br>
<button id="30">Apply Discount 30%</button><br>
<button id="40">Apply Discount 40%</button><br>
<button id="50">Apply Discount 50%</button><br>

</body>
</html>

answered Mar 18, 2023 at 10:57

Ahmad

1

1 Comment

Community Over a year ago

Your answer could be improved with additional supporting information. Please edit to add further details, such as citations or documentation, so that others can confirm that your answer is correct. You can find more information on how to write good answers in the help center.

Azmal · Accepted Answer · 2024-05-16 11:36:16Z

0

<input type="text" class="form-control" placeholder="Enter Amount" id="input">

<div>
 <span class="amt-block setText" data-amt="10">10</span>
 <span class="amt-block setText" data-amt="20">20</span>
 <span class="amt-block setText" data-amt="30">30</span>
 <span class="amt-block setText" data-amt="40">40</span>
 <span class="amt-block setText" data-amt="50">50</span>
</div>

<script> 
    $(".setText").click(function(event) { 
        amount = $(this).data('amt');
        // console.log(amount);
        $('#input').val(amount); 
    }); 
</script>

answered May 16, 2024 at 11:36

Azmal

665 bronze badges

Collectives™ on Stack Overflow

Set value to input field with jQuery

7 Answers 7

1 Comment

2 Comments

Comments

1 Comment

Comments

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

7 Answers 7

1 Comment

2 Comments

Comments

1 Comment

Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related