#javascript #jquery #html
#javascript #jquery #HTML
Вопрос:
я пытаюсь получить значение одной из двух кнопок отправки из моего формуляра, но мне не удавалось в каждом случае, когда я пытался это сделать.
Надеюсь, кто-нибудь сможет мне помочь и показать, как я могу это сделать.
Это html-форма
<form id="new_contact" class="save_form" action="kontaktdetails.php?art='.$_POST['art'].'" method="post" >
<button class="btn" id="submit1" type="submit" name="save_close">Save and close<i class="fa fa-save-right"></i></button>
<button class="btn" id="submit2" type="submit" name="save_next">Save and next one<i class="fa fa-save-right"></i></button>
</form>
Это код JS, здесь мне нужно имя или идентификатор нажатой кнопки
$(document).on('submit', '.save_form', function (event) {
event.preventDefault();
// var submitbutton = !????
var formID = $(this).attr('id');
var formDetails = $('#' formID);
var fileurl = $(this).attr('action');
...
Комментарии:
1. Почему бы не сделать
$(document).on('click', 'button[type="submit"]', function() { // 'this' is button and form information is still available.. });
2. похоже
$(document)
, должен быть селектор идентификаторов для формы3. @robbmj Почему вы это предлагаете?
Ответ №1:
Попробуйте привязать событие к кнопкам отправки следующим образом:
$('.save_form').on('click', '[type=submit]', function(event) {
event.preventDefault();
var submitbutton = $(this).attr('id');
var formDetails = $(this).closest('form');
var formID = formDetails.attr('id');
var fileurl = formDetails.attr('action');
console.log(submitbutton);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<form id="new_contact" class="save_form" action="kontaktdetails.php?art='.$_POST['art'].'" method="post">
<button class="btn" id="submit1" type="submit" name="save_close">Save and close<i class="fa fa-save-right"></i>
</button>
<button class="btn" id="submit2" type="submit" name="save_next">Save and next one<i class="fa fa-save-right"></i>
</button>
</form>
Комментарии:
1. Привет, способ может быть правильным, но если я использую только событие отправки, все формы будут перехватываться из этой функции !? Как я могу сделать так, чтобы в этой функции выполнялась только форма id =»new_contact» class =»save_form»?
Ответ №2:
Есть много способов сделать это, один из них — добавить обработчик событий к кнопкам, поскольку щелчок происходит перед отправкой, а затем использовать класс или что-то еще, чтобы определить, какая кнопка была нажата внутри обработчика отправки.
Таким образом, вы все равно будете перехватывать и предотвращать отправку, которая не была инициирована с помощью кнопок.
Если вам не нужно специально перехватывать отправку, вы можете просто использовать обработчик событий для кнопок вместо отправки формы
$(document).on('click', '.save_form button', function() {
$('.save_form button').removeClass('clicked');
$(this).addClass('clicked');
});
$(document).on('submit', '.save_form', function(event) {
event.preventDefault();
var formID = $(this).attr('id');
var formDetails = $('#' formID);
var fileurl = $(this).attr('action');
var id = $(this).find('button.clicked').prop('id');
alert(id)
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form id="new_contact" class="save_form" action="kontaktdetails.php?art='.$_POST['art'].'" method="post">
<button class="btn" id="submit1" type="submit" name="save_close">Save and close<i class="fa fa-save-right"></i>
</button>
<button class="btn" id="submit2" type="submit" name="save_next">Save and next one<i class="fa fa-save-right"></i>
</button>
</form>
Комментарии:
1. я думаю, что в случае перезагрузки формы (например, из-за ошибок) этот способ не будет работать второй или несколько раз снова !?
2. Нет причин, по которым это не должно работать при перезагрузке формы, обработчики событий прикреплены к документу
Ответ №3:
допустим, у вас есть форма ниже,
<form id="sForm">
<input type="text" name="toSearch" id="toSearch" />
<input type="submit" id="mysubmit"/>
</form>
и вы хотите получить значение при отправке формы.В моем примере идентификатор ввода называется «toSearch». Просто сделайте следующее.
$('#sForm').on("submit",function(e){
var myvar = $('#toSearch').val();
//Now you can do anything you wish with the variable myvar
// Put more code here.
e.preventDefault();
});
Значение будет получено при отправке, но вы можете изменить его на Onclick или любое другое действие.
Надеюсь, это поможет