1

I have input fields with value of ON or Off which I would like to replace with CSS generated image. Is this possible? I asked a similar question but about cells in a table. And I can replace the cell values with the CSS generated images. But I've been fiddling around with INPUT Type=text fields and can't figure out a way to do the same replacement with input type fields. I have seen some here that use a pic stored in a url. But it would be great to use the CSS generated image instead of linking to a pic.

The code (html, css, js) is here.

<div class="kn-input kn-input-short_text" id="kn-input-field_95">
  <label for="field_95" class="knack-input-label"> 
    <span class="kn-input-label">Cash</span>
  </label>
  <div class="input">
    <input id="field_95" type="text" value="On">
  </div>  
</div>

<div class="kn-input kn-input-short_text" id="kn-input-field_95">
  <label for="field_97" class="knack-input-label">
    <span class="kn-input-label">Internet</span>
  </label>
  <div class="input">
    <input id="field_97" type="text" value="On">
  </div>
</div>

sOn = '<div class="button-wrap"> <div class="button-out">On</div> <div class="button-switch"></div> </div>'

$('span:contains("On")').html(sOn);

The last line of code is what works to replace cell values in a table. I don't know how to do the same for input field values.

Community
  • 1
  • 1
Nancy
  • 31
  • 2

1 Answers1

2

To replace the input fields, just do exactly that:

$("input[type='text'][value='On']").replaceWith(sOn);

Your FIDDLE updated with above line.

ZiNNED
  • 2,620
  • 20
  • 31