Modify the appearance of the submit button when the input field is focused

Question

Modify the appearance of the submit button when the input field is focused

Is there a way to change the button color when an input field is in focus? I'm open to using either JavaScript or CSS for this. Thanks in advance for any assistance.

.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>

javascript jquery html css forms

Answer 1

Answer №1

To determine the current state using jQuery's focus and blur callbacks, follow this script:

$("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>

Answer 2

To determine the current state using jQuery's focus and blur callbacks, follow this script:

$("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>

Answer 3

Answer №2

Give this a shot

$(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>

Answer 4

Give this a shot

$(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>

Answer 5

Answer №3

Alter the code below to modify the background-color of the submit button when any field is focused

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

Restore the background-color of the submit button if a field loses focus

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

See it in action on JSFiddle

Answer 6

Alter the code below to modify the background-color of the submit button when any field is focused

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

Restore the background-color of the submit button if a field loses focus

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

See it in action on JSFiddle

Answer 7

Answer №4

Here's a way to achieve this:

I opted for a more detailed approach when selecting the items, but feel free to simplify if you prefer. I just wanted to provide clarity on the selection process.

Additionally, let's update the input type from text to email field by using 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>

Answer 8

Here's a way to achieve this:

I opted for a more detailed approach when selecting the items, but feel free to simplify if you prefer. I just wanted to provide clarity on the selection process.

Additionally, let's update the input type from text to email field by using 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>

Modify the appearance of the submit button when the input field is focused

Answer №1

Answer №2

Answer №3

Answer №4

Similar questions

The Facebook API's JavaScript SDK displays the status as 'connected' even after logging out

What is the best way to retrieve combined reducers in react-redux?

Developing a side panel for navigation

How can I use Angular 6 to design an interactive user interface with drag-and-drop functionality?

Steps for transforming a JSON into a Class to generate objects

Vue JS - Issue with data reactivity not being maintained

The angular2 error message indicating a property cannot be read if it is

Error encountered with STRIPE PAYMENT GATEWAY: "Customer cus_xxxx is missing card with ID tok_visa"

How to access the directive object within the controller in AngularJS

Ways to have Express display a randomly selected question from my personal JSON file

Avoiding redundancy by establishing the loading state in a redux reducer

Is there a method to make this package compatible with Angular version 16?

Initiating a web-based compiler directly through a browser using any method possible

Struggling to locate the earliest date within a nested array of objects

Searching for a way to retrieve all information based on the parent in a dynamically dependent Laravel system?

How can I set a specific value for a variable that is located within an array?

The term 'TextInput' is not recognized in React Native and cannot be found

Navigate to a new page seamlessly without the need for refreshing the current page in Django

Is there a never-ending loop caused by a jquery/jqtouch getJSON call?

How can I ensure that my content stays fixed at the bottom of a scrolling div in Material UI React?