Ajax jQuery Изменить значение кнопки ввода ввода - но потерять CSS Форматирование - PullRequest
0 голосов
/ 12 апреля 2020

Использование jQuery для изменения текста кнопки ввода отправки при нажатии на запрос Ajax. Текст изменяется по мере необходимости, но я теряю все текстовое форматирование CSS и разметку кнопки отправки html.

html:

<div class="submit-control">
<input type="submit" id="submit" value="Submit">
<div class="counter">
<span id="total"><b>0</b></span> Entered
<span id="remain"><b>2000</b></span> Remaining
</div>
</div>

CSS:

.submit-control input {

  background-color: #D3D3D3;
  color: white;
  border: 2px solid #D3D3D3;
  border-radius: 5px;
  padding: 6px 12px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 14px;
  font-family: Times, Serif;
  float:left;

}

.counter {
  color: #606060;
  border: 2px solid #D3D3D3;
  border-radius: 5px;
  padding: 6px 0px;
  margin-left: 10px;
  padding-right: 10px;
  text-decoration: none;
  display: inline-block;
  font-size: 14px;
  font-family: Times, Serif;

}

.counter  span {
margin-left: 10px;
color: #FFD700;

}

#total  {
  color: #606060;
  font-size: 14px;
}

#remain  {
  color: #606060;
  font-size: 14px;
  margin-left: 2px;
}

JQuery:

$(document).ready(function(){
    $("#submit").click(function(e){
        var msg=$("#msg").val();
        var userId = "<?php echo session_id();?>";
        $.ajax({
            url:'../serverside/insert.php',
            method:'POST',
            data:{
                msg:msg,
                userId:userId
            },
    beforeSend: function(){
        $('#submit').html("Processing...");
    },
    success: function(response){
        $('#submit').html(response);
    }
        });
    e.preventDefault();
    });
});

Я не буду это форматирование. Изображение до того, как я нажимаю кнопку:

enter image description here

Но я получаю следующее (как потеря всего css, так как html очищается в классе 'submit-control'):

enter image description here

РЕДАКТИРОВАТЬ:

Элементы в Google Chrome до нажатия кнопки: enter image description here

После: enter image description here

1 Ответ

0 голосов
/ 12 апреля 2020

Попробуйте val вместо html:

$('#submit').val("Processing...");

$('#submit').val(response);
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...