jQuery add/remove text from input string

Question

I have a function that adds text into an input box. Basically you click a div and it activates the function by onclick="addvalue(“Name”)"

function addvalue(newdate){
    var input = $("#datestobeexcluded");
    input.val(input.val()+","+newdate);

};

But what I really need to do is to check the string inside the input value, If it’s not there to add the text, which it does, and remove it if text is already present in string.

I am not doing well with jquery at the moment. Thank you in advance

Could you please provide what you have now and the expected result? — Pavlo Zhukov
– Pavlo Zhukov, Commented May 12, 2019 at 13:22

Alon Adler · Accepted Answer · 2019-05-12 13:25:29Z

2

var input = $("#datestobeexcluded");

if(input.val().search(newdate) >= 0)
{
    input.val(input.val().replace(newdate,''));
}
else
{
    input.val(input.val()+","+newdate);
}

And if you have multiple occurrences:

input.val(input.val().replace(/newdate/g,''));

edited May 12, 2019 at 13:25

answered May 12, 2019 at 13:20

Alon Adler

4,0345 gold badges34 silver badges45 bronze badges

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

1 Comment

Pavlo Zhukov Over a year ago

This approach leads to problems with , management. I proposed better solution in my answer

Jack Bashford · Accepted Answer · 2019-05-12 13:28:17Z

1

You can use includes with RegExp:

var input = $("#datetobeexcluded");
input.val(input.val().includes(newdate) ? input.val().replace(new RegExp(newdate, "g"), "") : `${input.val()},${newdate}`);

answered May 12, 2019 at 13:28

Jack Bashford

44.3k11 gold badges56 silver badges84 bronze badges

Comments

Pavlo Zhukov · Accepted Answer · 2019-05-12 13:51:15Z

1

You may replace your inline on click binding with jQuery styled click listener.

Then you may use the next code.

const $input = $('#your-input')
$('.extra-option').click(function() {
  const inputString = $input.val()
  const content = inputString ? inputString.split(',') : []
  const stringToAdd = $(this).html()
  const stringIndex = content.indexOf(stringToAdd)
  if (stringIndex === -1) {
    content.push(stringToAdd)
  } else {
    content.splice(stringIndex, 1)
  }
  $input.val(content.join(','))
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input id="your-input" type="text" />
<div class="extra-option">Name</div>
<div class="extra-option">Company</div>
<div class="extra-option">Address</div>

At first, you need to figure out how you will provide clicked element value. Your approach is definitely wrong because you need to bind function on click, while you return undefined. For test purposes I use innerText.

At the second, you need to check if your string contains clicked div string or not. To simplify this logic, I use splitting by delimiter and then manage with an array of entries.

The last step, you need to update your input value.

I guess it's all.

Let me know if you have any question.

answered May 12, 2019 at 13:51

Pavlo Zhukov

3,3573 gold badges30 silver badges45 bronze badges

1 Comment

James Over a year ago

Thank you for your help. to solve the , comma I just added at the remove stage. I don't need it to be clean, simple and dirty is fine. But appreciate your efforts

Collectives™ on Stack Overflow

jQuery add/remove text from input string

3 Answers 3

1 Comment

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related