Replace content if input has value

Question

When an hidden input has a value that contains the letters "LO" I want to replace a button inside a form with some different html.

HTML:

<input type="hidden" name="LO123456" id="hiddenCode" value="LO123456" />
<input type="text" name="quantity" id="formProductQuantity" value="1" />
<a class="button green" href="#" onclick="$('#form').submit(); return false;">Add to cart</a>

So in above example the hidden field has "LO" in it, so how can I replace the button with

<a class="button green" href="some.html">More information</a>

What I tried:

if ($( "input[value*='LO']" ).find('.button').replaceWith('<a class="button green" href="some.html">More information</a>'));

That doesn't work though because it replace also the buttons without "LO" in the hidden field.

Any help greatly appreciated!

UPDATED

I've updated the code because there's another input field which I didn't mentioned!

You don't need the if statement at all -- it's a no-op.

Christian Ternus
– Christian Ternus

2013-10-08 19:25:51 +00:00
Commented Oct 8, 2013 at 19:25 — Christian Ternus
– Christian Ternus, Commented Oct 8, 2013 at 19:25

l2aelba · Accepted Answer · 2013-10-08 19:37:21Z

2

.find('.button') to .next('.button')

.find() = find element inside this element

.next() = find element next to this element

Use $( "input[value^='LO']")(input starts with LO)

You don't need to use if else statement

Add :hidden for more focusing

or use your input id hiddenCode (if you are sure it unique id)

Finally :

var newButton = '<a class="button green" href="some.html">More information</a>';
$("input:hidden[value^='LO']").next('.button').replaceWith(newButton);

Using ID

var newButton = '<a class="button green" href="some.html">More information</a>';
$("#hiddenCode").next('.button').replaceWith(newButton);

edited Oct 8, 2013 at 19:37

answered Oct 8, 2013 at 19:24

l2aelba

22.3k23 gold badges108 silver badges145 bronze badges

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

2 Comments

Meules Over a year ago

Thx for your quick and usefull explaination. Unfortunately your code doesn't work. I forgot to mention that there's another input field before the button. Therefore "next" doesn't work??

l2aelba Over a year ago

.next().next('.button') ? @JaapVermoolen

Alex · Accepted Answer · 2013-10-08 19:25:49Z

0

Use something like:

var v = $('#hiddenCode').val();
if (v && v.indexOf('LO') > -1) {
  $('.button').replaceWith('<a class="button green" href="some.html">More information</a>');
}

answered Oct 8, 2013 at 19:25

Alex

1,59311 silver badges14 bronze badges

Comments

R. Oosterholt · Accepted Answer · 2013-10-08 19:29:45Z

0

The if statement is not needed in: if ($( "input[value*='LO']" )....

You need next instead of find:

$( "input[value^='LO']" ).next('.button').replaceWith('<a class="button green" href="some.html">More information</a>');

Next searches for the next sibling, find searches for descendents.

answered Oct 8, 2013 at 19:29

R. Oosterholt

8,2003 gold badges56 silver badges80 bronze badges

Collectives™ on Stack Overflow

Replace content if input has value

3 Answers 3

2 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related