Отправка данных формы и действия в wordpress admin-ajax.php
У меня есть форма, которую я хочу отправить на admin-ajax:
<form method = "POST" id = "form">
<input type = "text" name = "name">
<input type = "number" name = "phone">
<input type = "email" name = "email">
<textarea name = "overview"></textarea>
<input type = "submit" name = "submit" id = "submit" value = "Submit">
</form>
Код Javascript / jQuery для отправки данных с использованием Ajax:
document.getElementById('submit').addEventListener('click', function(e){
e.preventDefault();
var form_data = $('#form').serialize();
$.ajax('http://mywebsite.com/wordpress/wp-admin/admin-ajax.php', {
method: "POST",
data: form_data + {action: 'my_action'},
success: function (response) {
console.info(response);
},
error: function (err) {
console.info('Error:' + err);
}
});
});
Также пробовал formData:
var form_data = new FormData();
form_data.append('form', $('#custom').serialize());
form_data.append('action', 'my_action');
Как отправить данные формы и действие my_action?
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 3
вам нужно изменить эту строку с data: form_data + {action: 'my_action'}, на data: {action: 'my_action', form_data:form_data},
jQuery(document).on("click","#submit", function(){
e.preventDefault();
var form_data =jQuery('#form').serializeArray();
jQuery.ajax('http://mywebsite.com/wordpress/wp-admin/admin-ajax.php', {
method: "POST",
data: {action: 'my_action', form_data:form_data},
success: function (response) {
console.info(response);
},
error: function (err) {
console.info('Error:' + err);
}
});
});
и измените тип входа submit на button.
если вы хотите использовать ajax, не нужно использовать кнопку отправки
если вы используете кнопку отправки, вы можете получить значение на $_POST
Что, если один из этих входов - образ <img src = "data:image/png;base64,iVBORw0KGgo= = " name = "picture">? Я удаляю часть кода src, так как он очень длинный
попробуйте вот так var form_data = $('#form').serializeArray(); form_data .push({ name: "<something>", value: "<somevalue>" });
вот решение для вас: stackoverflow.com/questions/10398783/…
@Sigma, он хочет отправить изображение в ajax
В примере кода я вижу только имя, телефон, адрес электронной почты и текстовую область, я полагаю, как комментарий, если он хочет отправить изображение в качестве дополнительного параметра в сериализованную форму, может быть лучшим решением является включение скрытого ввода в форму где находится изображение, а не просто отправить сериализованную форму без необходимости использования дополнительных параметров
В общем, я предпочитаю использовать этот способ, как и в вашем случае, вы используете кнопку типа отправки:
$(document).on('click', '#submit', function(){ // the id of your submit button
var form_data = $('#your_form_data_id'); // here is the id of your form
form_data.submit(function (e) {
var my_action = "my_action";
e.preventDefault();
$.ajax({
type: form_data.attr('method'), // use this if you have declared the method in the form like: method = "POST"
url: form_data.attr('action'), // here you have declared the url in the form and no need to use it again or you can also use the path like in your code
data: form_data.serialize() +'&'+$.param({ 'my_action': my_action}), // here you are sending all data serialized from the form and appending the action value you assing when declare var my_action
success: function (data) {
// after the success result do your other stuff like show in console, print something or else
},
});
});
});
Надеюсь, это поможет тебе. если что-то непонятно, смело спрашивайте, постараюсь объяснить в комментариях.
Вы должны просто передать форму в new FormData (), поэтому в вашем случае при отправке формы просто передайте new FormData (e.target);
Надеюсь, это поможет
Зачем менять тип ввода на кнопку?