У меня есть форма с текстовым полем и двумя кнопками (Перва - отправляет сообщение, вторая - очищает текущий список). Пример работы показан по ссылке на jsfeedle. Форма отправляется, если я нажимаю на кнопку "Отправить", или когда нажимаю Enter, если нахожусь на поле ввода.
Я хочу проверять значение поля на непустоту. Сейчас если я нажимаю на Enter, то поле валидируется, но если нажимаю на кнопку - то нет. Как мне добавить валидацию и при нажатии на кнопку "Отправить", и при нажатии на Enter?
Спасибо!
P.S. Приведу ниже часть кода, так как система не дает отправлять ссылку без сопровождения кодом.
<form action="" method="post" id="chatbot-form">
<div class="input-group">
<input type="hidden" name="csrf_token" value="{{ csrf_token() }}" />
<input required type="text" class="form-control" placeholder="Введи сообщение" name="messageText" id="messageText" autocomplete="off">
<div class="input-group-append" id="button-addon4">
<button class="btn btn-primary" type="button" id="chatbot-form-btn">Отправить</button>
<button class="btn btn-info" type="button" id="chatbot-form-btn-clear">Очистить</button>
</div>
</div>
</form>
1) Меняем type="button"
на type="submit"
2) Убираем обработчик клика (либо с нутри его вытри submit
)
$(function() {
$('#chatbot-form-btn-clear').click(function(e) {
e.preventDefault();
$('.mesgs').find('.msg_history').html('');
});
$('#chatbot-form').submit(function(e) {
e.preventDefault();
var message = $('#messageText').val();
$(".msg_history").append('<div class="outgoing_msg"><div class="sent_msg question"><p>' + message + '</p></div></div>');
var csrf_token = "{{ csrf_token() }}";
$.ajaxSetup({
headers: {
'X-Csrf-Token': csrf_token
}
});
$.ajax({
type: "POST",
url: "/ask",
data: $(this).serialize(),
success: function(response) {
$('#messageText').val('');
var answer = response.answer;
const chatPanel = document.getElementById("chatPanel");
$('.feedbackDiv').remove();
$(".msg_history").append('<div class="incoming_msg">' +
'<div class="incoming_msg_img"> <img src="static/chatbot_avatar.png"> </div>' +
'<div class="received_msg">' +
'<div class="received_withd_msg answer">' +
'<p>' + answer + '</p>' +
'</div>' +
'</div>' +
'</div>' +
'<div class="feedbackDiv"> (Оценить ответ: ' +
'<div class="btn-group btn-group-sm" role="group">' +
'<button class="btn btn-secondary" type="button" id="bad-ans-btn" onclick="AnswerFunc(this.id)">' +
'<i class="fa fa-thumbs-o-down fa-border" aria-hidden="true"></i>' +
'</button>' +
'<button class="btn btn-primary" type="button" id="good-ans-btn" onclick="AnswerFunc(this.id)">' +
'<i class="fa fa-thumbs-o-up fa-border" aria-hidden="true"></i>' +
'</button>' +
'</div>' +
') </div>' +
'</div>');
$(".msg_history").stop().animate({
scrollTop: $(".msg_history")[0].scrollHeight
}, 1000);
},
error: function(error) {
console.log(error);
}
});
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="col-md-10 offset-md-1">
<div class="inbox_msg">
<div class="mesgs">
<div class="msg_history">
</div>
<form action="" method="post" id="chatbot-form">
<div class="input-group">
<input type="hidden" name="csrf_token" value="{{ csrf_token() }}" />
<input required type="text" class="form-control" placeholder="Введи сообщение" name="messageText" id="messageText" autocomplete="off">
<div class="input-group-append" id="button-addon4">
<button class="btn btn-primary" type="submit" id="chatbot-form-btn">Отправить</button>
<button class="btn btn-info" type="button" id="chatbot-form-btn-clear">Очистить</button>
</div>
</div>
</form>
</div>
</div>
</div>
Фрилансер или Digital-агентство - Как сделать правильный выбор?
Подскажите пожалуйста, как сделать так, чтоб в ST3 на одном экране отображались сразу 2 окна, чтоб не постоянно не переключаться между ними