CODEWITHSUNDEEP
javascriptjqueryhtmlcssforms
Katy H.
Katy H.

Reputation: 224

change style of input submit on focus of input field

I am trying to change the button color when any input field is on focus. Okay to use javascript or CSS. Thanks for the help.

.redbutton {
  background-color:red;
  }
<form accept-charset="UTF-8" method="post" action="http://go.pardot.com/l/213532/2016-08-08/jr9" class="form" id="pardot-form">

  <p class="form-field  first_name pd-text required required-custom">
    <label class="field-label" for="213532_2892pi_213532_2892">First Name *</label>
    <input type="text" name="213532_2892pi_213532_2892" id="213532_2892pi_213532_2892" value="" class="text" size="30" maxlength="40" onchange="" />
  </p>

  <p class="form-field  last_name pd-text required required-custom">
    <label class="field-label" for="213532_2894pi_213532_2894">Last Name *</label>
    <input type="text" name="213532_2894pi_213532_2894" id="213532_2894pi_213532_2894" value="" class="text" size="30" maxlength="80" onchange="" />
  </p>

  <p class="form-field  email pd-text required required-custom">
    <label class="field-label" for="213532_2896pi_213532_2896">Email *</label>
    <input type="text" name="213532_2896pi_213532_2896" id="213532_2896pi_213532_2896" value="" class="text" size="30" maxlength="255" onchange="piAjax.auditEmailField(this, 213532, 2896, 14168);" />
  </p>


  <p class="submit">
    <input type="submit" accesskey="s" value="SUBMIT" />
  </p>


</form>

Upvotes: 2

Views: 1909

Answers (4)

Mihai T
Mihai T

Reputation: 17697

you can do this like so :

i selected the items in a more detailed way, but you can simplify if you want. i just wanted to be more clear as to what i am selecting

ALSO change the type of input from the email field, from text to input type="email"

$("p:not(:last-child) input").focus(function() {
     $(this).parent("p").siblings("p").find("input[type='submit']").addClass("redbutton")
     
});
$("p:not(:last-child) input").focusout(function() {
    $(this).parent("p").siblings("p").find("input[type='submit']").removeClass("redbutton")
 });
.redbutton {
  background-color:red;
  }
  
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form accept-charset="UTF-8" method="post" action="http://go.pardot.com/l/213532/2016-08-08/jr9" class="form" id="pardot-form">

  <p class="form-field  first_name pd-text required required-custom">
    <label class="field-label" for="213532_2892pi_213532_2892">First Name *</label>
    <input type="text" name="213532_2892pi_213532_2892" id="213532_2892pi_213532_2892" value="" class="text" size="30" maxlength="40" onchange="" />
  </p>

  <p class="form-field  last_name pd-text required required-custom">
    <label class="field-label" for="213532_2894pi_213532_2894">Last Name *</label>
    <input type="text" name="213532_2894pi_213532_2894" id="213532_2894pi_213532_2894" value="" class="text" size="30" maxlength="80" onchange="" />
  </p>

  <p class="form-field  email pd-text required required-custom">
    <label class="field-label" for="213532_2896pi_213532_2896">Email *</label>
    <input type="email" name="213532_2896pi_213532_2896" id="213532_2896pi_213532_2896" value="" class="text" size="30" maxlength="255" onchange="piAjax.auditEmailField(this, 213532, 2896, 14168);" />
  </p>


  <p class="submit">
    <input type="submit" accesskey="s" value="SUBMIT" />
  </p>


</form>

Upvotes: 1

Amar Singh
Amar Singh

Reputation: 5622

Below code you change the background-color of the submit button is any field is focus

 $("input").not("input[type=submit]").focus(function(){


      $("input[type=submit]").css("background-color","green")
    })

Reset the background-color of the submit button if field loose focus

$("input").not("input[type=submit]").blur(function(){


  $("input[type=submit]").css("background-color","")
})

Working Fiddle

Upvotes: 1

eisbehr
eisbehr

Reputation: 12452

You can use focus and blur callback of jQuery. Decide the currect state on the inside and do whatever you want to ...

$("input[type=text]").on("focus blur", function() {
    if( $("input[type=text]:focus").length > 0 ) {
        $("input[type=submit]").addClass("redbutton");
    }
    else {
        $("input[type=submit]").removeClass("redbutton");
    }
});
.redbutton {
  background-color:red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form accept-charset="UTF-8" method="post" action="http://go.pardot.com/l/213532/2016-08-08/jr9" class="form" id="pardot-form">

  <p class="form-field  first_name pd-text required required-custom">
    <label class="field-label" for="213532_2892pi_213532_2892">First Name *</label>
    <input type="text" name="213532_2892pi_213532_2892" id="213532_2892pi_213532_2892" value="" class="text" size="30" maxlength="40" onchange="" />
  </p>

  <p class="form-field  last_name pd-text required required-custom">
    <label class="field-label" for="213532_2894pi_213532_2894">Last Name *</label>
    <input type="text" name="213532_2894pi_213532_2894" id="213532_2894pi_213532_2894" value="" class="text" size="30" maxlength="80" onchange="" />
  </p>

  <p class="form-field  email pd-text required required-custom">
    <label class="field-label" for="213532_2896pi_213532_2896">Email *</label>
    <input type="text" name="213532_2896pi_213532_2896" id="213532_2896pi_213532_2896" value="" class="text" size="30" maxlength="255" onchange="piAjax.auditEmailField(this, 213532, 2896, 14168);" />
  </p>

  <p class="submit">
    <input type="submit" accesskey="s" value="SUBMIT" />
  </p>
</form>

Upvotes: 1

Head In Cloud
Head In Cloud

Reputation: 2051

Try this

$(document).ready(function(){
  $("input").focus(function(){
    $("input[type='submit']").addClass("changeBg");
});
  $("input").focusout(function(){
    $("input[type='submit']").removeClass("changeBg");
});
});
.redbutton {
  background-color:red;
  }
.changeBg{background:yellow;}
  <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
  <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<form accept-charset="UTF-8" method="post" action="http://go.pardot.com/l/213532/2016-08-08/jr9" class="form" id="pardot-form">

  <p class="form-field  first_name pd-text required required-custom">
    <label class="field-label" for="213532_2892pi_213532_2892">First Name *</label>
    <input type="text" name="213532_2892pi_213532_2892" id="213532_2892pi_213532_2892" value="" class="text" size="30" maxlength="40" onchange="" />
  </p>

  <p class="form-field  last_name pd-text required required-custom">
    <label class="field-label" for="213532_2894pi_213532_2894">Last Name *</label>
    <input type="text" name="213532_2894pi_213532_2894" id="213532_2894pi_213532_2894" value="" class="text" size="30" maxlength="80" onchange="" />
  </p>

  <p class="form-field  email pd-text required required-custom">
    <label class="field-label" for="213532_2896pi_213532_2896">Email *</label>
    <input type="text" name="213532_2896pi_213532_2896" id="213532_2896pi_213532_2896" value="" class="text" size="30" maxlength="255" onchange="piAjax.auditEmailField(this, 213532, 2896, 14168);" />
  </p>


  <p class="submit">
    <input type="submit" accesskey="s" value="SUBMIT" />
  </p>


</form>

Upvotes: 1

Related Questions