Javascript code style property value not updating after Ajax call

Question

I have JS code where I am changing the style of an HTML element based on an AJAX response.

So my code looks like this.

$.ajax(settings).done(function(response) {

  const button_submit = document.getElementById("submit")

  button_submit.disabled = response[0];
  button_submit.style.cursor = '\"' + response[1] + '\"';
  button_submit.style.marginTop = '\"' + response[3] + '\"';
  document.getElementById("email").style.visibility = '\"' + response[2] + '\"';
})

input[type=text],
select {
  width: 100%;
  padding: 12px 20px;
  display: inline-block;
  border: 1px solid #ccc;
  border-radius: 4px;
  box-sizing: border-box;
  font-size: 20px;
  margin-bottom: 1.2 rem;
  margin-bottom: -6%;
}

#submit {
  width: 100%;
  background: #f39d13;
  background: linear-gradient(to bottom, #f39d13 0, #c64f01 100%);
  color: white;
  padding: 14px 20px;
  margin-top: 4%;
  border: none;
  border-radius: 4px;
  font-size: 20px;
  cursor: pointer;
}

#customForm {
  border-radius: 5px;
  padding: 20px;
  margin: auto;
  width: 65%;
}

p {
  font-size: 12px;
  color: gray;
  margin-top: 5%;
  text-align: center;
}

#email {
  visibility: hidden;
  font-size: 16px;
  color: red;
  line-height: -6px;
  line-height: 1.6;
  text-align: left;
  display: block;
}

</head>
<div id="customForm">
  <form accept-charset="UTF-8" id="" action="#action" method="POST">
    <input name="inf_form_xid" type="hidden" value="dd500cb6988ssd3e0151492cb3eff8cf594" />
    <input name="inf_form_name" type="hidden" value="UYTS" />
    <input name="if_version" type="hidden" value="1.70.0.4582435" />
    <div class="if-field">
      <label for="inf_field_Email"></label>
      <input id="inf_field_Email" name="inf_field_Email" placeholder="Enter your email address " type="text" /></div>
    <div>
      <div> </div>
    </div>
    <label id="email">Please enter a valid email address.</label>

    <div class="ifn-submit">
      <button id="submit" type="submit">Send Now</button></div>

  </form>
</div>

But the style is not changing even after all of the JS function is finished.

I wonder what is wrong with my code.

The response of the AJAX is an array that I am going to put on style properties using JS.

Sample response:

['false', 'pointer', 'hidden', '-3%']

Answer 1

The string 'false' is not the same as the boolean false. The disabled property should be a boolean.

You shouldn't add quotes around the other properties. Quotes are part of the syntax in textual styles, they're not part of the property value itself.

$.ajax(settings).done(function(response) {

  const button_submit = document.getElementById("submit")

  button_submit.disabled = response[0] === 'true';
  button_submit.style.cursor = response[1]';
  button_submit.style.marginTop = response[3];
  document.getElementById("email").style.visibility = response[2];
})

input[type=text],
select {
  width: 100%;
  padding: 12px 20px;
  display: inline-block;
  border: 1px solid #ccc;
  border-radius: 4px;
  box-sizing: border-box;
  font-size: 20px;
  margin-bottom: 1.2 rem;
  margin-bottom: -6%;
}

#submit {
  width: 100%;
  background: #f39d13;
  background: linear-gradient(to bottom, #f39d13 0, #c64f01 100%);
  color: white;
  padding: 14px 20px;
  margin-top: 4%;
  border: none;
  border-radius: 4px;
  font-size: 20px;
  cursor: pointer;
}

#customForm {
  border-radius: 5px;
  padding: 20px;
  margin: auto;
  width: 65%;
}

p {
  font-size: 12px;
  color: gray;
  margin-top: 5%;
  text-align: center;
}

#email {
  visibility: hidden;
  font-size: 16px;
  color: red;
  line-height: -6px;
  line-height: 1.6;
  text-align: left;
  display: block;
}

</head>
<div id="customForm">
  <form accept-charset="UTF-8" id="" action="#action" method="POST">
    <input name="inf_form_xid" type="hidden" value="dd500cb6988ssd3e0151492cb3eff8cf594" />
    <input name="inf_form_name" type="hidden" value="UYTS" />
    <input name="if_version" type="hidden" value="1.70.0.4582435" />
    <div class="if-field">
      <label for="inf_field_Email"></label>
      <input id="inf_field_Email" name="inf_field_Email" placeholder="Enter your email address " type="text" /></div>
    <div>
      <div> </div>
    </div>
    <label id="email">Please enter a valid email address.</label>

    <div class="ifn-submit">
      <button id="submit" type="submit">Send Now</button></div>

  </form>
</div>