Изменение размера элемента формы после отправки

Question

Я работаю над системой, которая использует форму для ввода некоторых данных в базу данных. Система работает должным образом, за исключением проблемы с отображением формы после ее отправки. Когда форма отправлена, страница перезагрузится и покажет информацию, представленную в виде текста-заполнителя внутри полей формы, а кнопка «Сохранить изменения» будет отображаться как «Изменения сохранены!» на несколько секунд. Однако некоторые свойства ширины входных полей также изменяются. Конкретно мои элементы формы половинной ширины.

Ширина для этих элементов определяется как ширина: calc(50% - 24px), что составляет 265px. Кроме того, для этих элементов есть отступ 5px и граница 2px. Это дает общую ширину 279px, как и ожидалось. Однако при отправке формы и перезагрузке страницы общая ширина элемента выглядит как 265px, сохраняя отступы 5px и границу 2px, но уменьшая внутреннюю ширину до 251px. Нигде в моем коде нет ничего, что когда-либо изменяло бы ширину, и проверка с помощью инструментов dev показывает, что ширина, отступы и границы, которые я определил, все еще там. Это имеет довольно раздражающий эффект смещения обоих элементов после отправки формы. Переход на другую страницу и обратно решает проблему.

Я попытался использовать! Важный и проверил весь код (JavaScript), который выводится из PHP, когда отправка успешна, которая взаимодействует с формой, способной что-то менять, и ничего должен иметь это влияние. Я только изменяю цвет и текст кнопки отправки.

Любая помощь будет принята с благодарностью!

Редактировать 1: Приведенный ниже код является фрагментом всей формы. , исключая PHP. Я изменил код так, что нажатие кнопки «Сохранить изменения» не отправляет форму, но покажет изменение для кнопки «Отправить», так как в противном случае при отправке форма будет отображаться vani sh. Ошибка не возникает в фрагменте кода, однако в результате не «перезагрузки» страницы.

function success() {
  var button = document.getElementById('clientInfoBtn');
  var normalColor = button.style.backgroundColor;
  var normalValue = button.value;
  button.style.backgroundColor = '#33cc33';
  button.value = 'Changes Saved!';
  setTimeout(function() {
    button.style.backgroundColor = normalColor;
    button.value = normalValue;
  }, 3000);
  return false;
}

.standardFormBox {
  margin-bottom: 20px;
  width: 600px;
}

.standardFormBoxInner {
  border: 1px solid silver;
  padding: 10px;
  display: flex;
  flex-wrap: wrap;
}

.standardFormHeading {
  font-family: "Helvetica";
  font-size: 16pt;
  color: white;
  background-color: #1975FF;
  margin: 0;
  padding: 10px;
}

.standardFormBtn {
  color: white;
  font-size: 14pt;
  background-color: #1975FF;
  border: none;
  padding: 10px 10px;
  margin-bottom: 15px;
}

.standardFormBtn:hover {
  cursor: pointer;
  background-color: #0052cc;
}

.standardFormInput {
  font-size: 14pt;
  font-family: "Trebuchet MS";
  margin-bottom: 10px;
  padding: 5px;
}

.sfiMultiLabel {
  font-size: 14pt;
  font-family: "Trebuchet MS";
}

.sfiHalf {
  width: calc(50% - 24px);
}

.sfiText {
  font-size: 14pt;
  margin: 0;
}

.sfiTextHalf {
  width: calc(50% - 10px);
}

.sfiTextFull {
  width: 100%;
}

.sfiFull {
  width: 100%;
}

.sfiLeft {
  margin-right: 20px;
}

<form name="accountInfoForm" method="POST">
  <div class="standardFormBox">
    <p class="standardFormHeading">Business Billing Information</p>
    <div class="standardFormBoxInner">
      <p class="sfiText sfiTextHalf">Business Name</p>
      <input type="text" name="cBusiness" placeholder="" class="standardFormInput sfiFull">
      <p class="sfiText sfiTextHalf">Name On Bank Account</p>
      <input type="text" name="cName" placeholder="" class="standardFormInput sfiFull">
      <p class="sfiText sfiTextHalf">Billing Email</p>
      <input type="email" name="cEmail" placeholder="" class="standardFormInput sfiFull">
      <p class="sfiText sfiTextHalf">Street Address</p>
      <input type="text" name="cStreet" placeholder="" class="standardFormInput sfiFull">
      <p class="sfiText sfiTextHalf">City</p>
      <input type="text" name="cCity" placeholder="" class="standardFormInput sfiFull">
      <p class="sfiText sfiLeft sfiTextHalf">State</p>
      <p class="sfiText sfiTextHalf">ZIP</p>
      <input type="text" name="cState" placeholder="" class="standardFormInput sfiLeft sfiHalf">
      <input type="text" name="cZip" placeholder="" class="standardFormInput sfiHalf">
      <p class="sfiText sfiTextHalf">Phone Number</p>
      <input type="text" name="cPhone" placeholder="" class="standardFormInput sfiFull">
    </div>
  </div>
  <input type="submit" name="clientChangeInfo" value="Save Changes" class="standardFormBtn" id="clientInfoBtn" onclick="return success()">
</form>