RAUSHAN KUMAR RAUSHAN KUMAR - 1 month ago 5
CSS Question

Not changing the background color of input button loaded inside the iframe

I am using material-design in my project. I a loading my html file inside the iframe. My html file is

<form action="#" method="post" name="sign up for beta form">
<div class="header">
<p id="sampleTitle" contenteditable="true">Sign Up For Beta</p>
</div>
<div class="description">
<p contenteditable="true">Milkshake is almost ready. If you're interested in testing it out, then sign up below
to get exclusive access.</p>
</div>
<div class="input">
<input type="text" class="button" id="email" name="email" placeholder="NAME@EXAMPLE.COM">
<input type="submit" class="button" id="submit" value="SIGN UP">
</div>
</form>


I have to change the background color of the button based on user choice. For that i am using "jquery.minicolors.js" and wrote my script as...

<script type="text/javascript">
// background button color
$(document.body).on('change', '#hue-demo-btn-bg', function () {
var val = $(this).val();
console.log($(document).find('#submit'));
$(document).find('#submit').attr('style', 'background-color: ' + val + ' !important');
});
</script>


Its not changing the background color of the button also printing the empty object as


Object[ ]

Answer

As such your form is loaded with iframe you have to use jQuery('#PLACE_IFRAME_ID').contents() selector to get iframe content.

And to make change in the background color of submit button please use below code.

jQuery('#PLACE_IFRAME_ID').contents().find('#submit').attr('style', 'background-color: ' + val + ' !important');

Note : In place of #PLACE_IFRAME_ID place your iframe's id in the selector.

Please go through the working demo :

// background button color
$(document.body).on('change', '#hue-demo-btn-bg', function () {
  var val = $(this).val();  
  jQuery('#IframeID').contents().find('#submit').attr('style', 'background-color: ' + val + ' !important');
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ifrmae id="IframeID">
  <form action="#" method="post" name="sign up for beta form">
    <div class="header">
      <p id="sampleTitle" contenteditable="true">Sign Up For Beta</p>
    </div>
    <div class="description">
      <p contenteditable="true">Milkshake is almost ready. If you're interested in testing it out, then sign up below
        to get exclusive access.</p>
    </div>
    <div class="input">
      <input type="text" class="button" id="email" name="email" placeholder="NAME@EXAMPLE.COM">
      <input type="submit" class="button" id="submit" value="SIGN UP">
    </div>
  </form>  
  </iframe>

<select id="hue-demo-btn-bg">
  <option value="">select</option>
  <option value="red">red</option>
  <option value="orange">Orange</option>
  <option value="blue">Blue</option>
</select>

Comments