Использование 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();
});
});
Я не буду это форматирование. Изображение до того, как я нажимаю кнопку:
Но я получаю следующее (как потеря всего css, так как html очищается в классе 'submit-control'):
РЕДАКТИРОВАТЬ:
Элементы в Google Chrome до нажатия кнопки:
После: