У меня есть форма слайда, у каждого вопроса и ответа есть свой слайд, вы нажимаете Далее и появляется другой слайд с вопросом. Слайд работает отлично, я получаю все правильные атрибуты и значения формы в своем журнале консоли, но как только я отправляю его через сообщение ajax, данные отправляются вместе со всей страницей. Что я хочу сделать? Мне нужно отправить все атрибуты формы ТОЛЬКО, как вы видите в console.log, на новую страницу / успех. Пожалуйста, посмотрите на код ниже, ajax звонок происходит в 179. Спасибо
var _origin_address, _destination_address;
var _autocomplete;
var _fields = {
street_number: 'short_name',
route: 'long_name',
// locality: 'long_name',
// administrative_area_level_1: 'short_name',
// country: 'long_name',
// postal_code: 'short_name'
};
var _options = {
types: ['(regions)'],
componentRestrictions: {country: "us"}
};
jQuery(document).ready(function($) {
var _slides_element = $('#slides');
var _form = $('#container_form');
var _navigation = $('#navigation li');
var _next = $('.button-next');
var widths = [];
var total_width = 0;
var current_step = 1;
var total_steps = _form.children().length;
_slides_element.find('.slide').each(
function(elem) {
var __step = $(this);
widths[elem] = total_width;
total_width += __step.width();
}
);
_slides_element.width(total_width);
_next.on('click', function (e) {
console.log(e);
var prev = current_step;
var __this = $(this);
current_step = current_step + validate_step(prev);
_slides_element
.stop()
.animate(
{marginLeft: '-' + widths[current_step-1] + 'px'},
500,
function() {
if (current_step === total_steps) {
validate_steps_proceed();
} else {
validate_step(prev);
}
$('#container_form')
.children(':nth-child('+ parseInt(current_step) +')')
.find(':input:first')
.focus();
$('#navigation li').removeClass('selected');
$('#navigation li:nth-child(' + (parseInt(current_step)) + ')').addClass('selected visited')
}
);
e.preventDefault();
});
$(document).on('click', '#navigation li.visited a', function(e) {
var prev = current_step;
var __this = $(this);
current_step = __this.parent().index() + 1;
__this
.closest('ul')
.find('li')
.removeClass('selected');
__this
.parent()
.addClass('selected');
_slides_element
.stop()
.animate(
{marginLeft: '-' + widths[current_step-1] + 'px'},
500,
function() {
if (current_step === total_steps) {
validate_steps_proceed();
} else {
validate_step(prev);
}
$('#container_form')
.children(':nth-child('+ parseInt(current_step) +')')
.find(':input:first')
.focus();
}
);
e.preventDefault();
});
_form.find('fieldset').each(function() {
var __fieldset = $(this);
__fieldset
.children(':last')
.find(':input')
.keydown(function(e) {
if (e.which === 9) {
$('#navigation li:nth-child(' + (parseInt(current_step)+1) + ') a').click();
$(this).blur();
e.preventDefault();
}
});
});
_form.children(':first')
.find(':input:first')
.focus();
function validate_steps_proceed() {
var __total_errors = false;
for (var i = 1;i < total_steps;++i) {
var __steps_error = validate_step(i);
if (__steps_error === -1)
__total_errors = true;
}
$('#final_panel').html('');
$('#container_form').data('errors', __total_errors);
if (__total_errors) {
$('#container_form #submit_button').addClass('none').prop( 'disabled', true );
//alert('we have some errors - to be implemented where and what');
return false;
} else {
var car_needed = false;
_form.find('input, select, textarea').each(function() {
// console.log($(this).attr('name'));
// console.log($(this).val());
if ($(this).val()) {
var show_preview = false;
var preview_value = $(this).val();
if ($(this).is('[name=car_needed]') || $(this).is('[name=realtor_needed]')) {
if ($(this).is(':checked')) {
show_preview = true;
preview_value = 'True';
if ($(this).is('[name=car_needed]')) {
car_needed = true;
}
}
} else {
show_preview = true;
}
console.log('car_needede', car_needed);
if (!car_needed && $(this).is('[name^=car_]')) {
show_preview = false;
}
if (show_preview) {
$('#final_panel')
// .append($(this).attr('name') + ':', $('[name="house_type"]').val())
.append($('<p>')
.append($('<strong>')
.html($(this).data('previewText') ? $(this).data('previewText') : $(this).attr('name') + ': ')
)
.append($('<span>')
.html(preview_value)
)
)
.addClass('test');
}
// console.log($(this).attr('name'));
// console.log($(this).val());
}
var valrs = {
'atr' : $(this).attr('name'),
'vals' : $(this).val(),
};
$('#submit_button').click(function(){
console.log(valrs);
$.ajax({
url: '/success',
type: 'GET',
data: $(valrs).serialize(),
success:function(data){
$('p').append(data);
console.log('data din form',data)
},
error:function(xhr,status,error){
console.log('erroare',error)
}
});
});
});
$('#container_form #submit_button').removeClass('none').prop( 'disabled', false );
if (_origin_address && _destination_address) {
var service = new google.maps.DistanceMatrixService();
service.getDistanceMatrix({
origins: [_origin_address],
destinations: [_destination_address],
travelMode: 'DRIVING',
unitSystem: google.maps.UnitSystem.IMPERIAL
}, callback);
}
}
}
function validate_step(step) {
if (step === total_steps) {
return;
}
var __error = 1;
var __has_error = false;
_form
.children(':nth-child('+ parseInt(step) +')')
.find(':input:not(button):visible')
.each(function() {
var __this = $(this);
var value_length = $.trim(__this.val()).length;
if (value_length == '') {
__has_error = true;
__this.css('background-color', '#F6B2B2');
} else {
if (__this.is('[name=email]') && !isEmail(__this.val())) {
__has_error = true;
__this.css('background-color', '#F6B2B2');
}
if (__this.is('[name=tel]') && !isPhone(__this.val())) {
__has_error = true;
__this.css('background-color', '#F6B2B2');
}
__this.css('background-color', '#FFFFFF');
}
});
var __link = $('#navigation li:nth-child(' + parseInt(step) + ') a');
__link.parent().removeClass('error valid');
var __class = 'valid';
if (__has_error) {
__error = 0;
__class = 'error';
}
__link.parent().addClass(__class);
return __error;
}
$('#final_button').on('click', function() {
$( "#navigation li.visited a" ).not('#final_button').last().click();
});
$('#car_needed').on('change', function() {
if ($(this).is(':checked')) {
$('#car_ship_parent').removeClass('none');
} else {
$('#car_ship_parent').addClass('none');
}
});
//flatpickr(document.querySelector(`#date_from`), {
//disableMobile: true,
//defaultDate: _formatted_dates[0],
//minDate: _formatted_dates[_formatted_dates.length - 1],
//maxDate: _formatted_dates[0],
//enable: _formatted_dates,
//onChange: function(selectedDates) {
// let _date_index = _formatted_dates.indexOf(new Date(selectedDates).toISOString());
// if (_date_index >= 0) {
// s.options.page_gliders[subproduct].update({startAt: _date_index});
// s.options.page_gliders[subproduct].mount();
// }
//}
//};
$("#date_from").flatpickr({
minDate: 'today'
}
);
});
function initAutocomplete() {
var _inputs = document.getElementsByClassName('has_address_autocomplete');
console.log(_inputs);
var _search_fields = [];
for (var i = 0; i < _inputs.length; i++) {
var _autocomplete = new google.maps.places.Autocomplete(_inputs[i], _options);
_autocomplete.inputId = _inputs[i].id;
_autocomplete.addListener('place_changed', fillInAddress);
_search_fields.push(_autocomplete);
}
}
function fillInAddress() {
var _place = this.getPlace();
console.log(_place);
var _destination = 'from_';
var _realtor_panel = document.getElementById('realtor_parent');
if (this.inputId === 'trip_to') {
_destination = 'to_';
_realtor_panel.classList.add('none');
}
console.log(_place.formatted_address);
if (_destination === 'to_') {
_origin_address = _place.formatted_address;
} else {
_destination_address = _place.formatted_address;
}
for (var i = 0; i < _place.address_components.length; i++) {
var _address_type = _place.address_components[i].types[0];
if (_fields[_address_type]) {
var val = _place.address_components[i][_fields[_address_type]];
if (document.getElementById(_destination + _address_type)) {
document.getElementById(_destination + _address_type).value = val;
}
if (_destination === 'to_') {
if (_address_type === 'administrative_area_level_1' && val === 'WA') {
_realtor_panel.classList.remove('none');
}
}
}
}
}
function callback(response, status) {
if (status == 'OK') {
var origins = response.originAddresses;
var destinations = response.destinationAddresses;
for (var i = 0; i < origins.length; i++) {
var results = response.rows[i].elements;
for (var j = 0; j < results.length; j++) {
var element = results[j];
var distance = element.distance.text;
var duration = element.duration.text;
var from = origins[i];
var to = destinations[j];
}
}
if (distance) {
console.log('distanta',distance);
jQuery(function ($) {
$('#final_panel')
.append($('<p>')
.append($('<strong>')
.html('APROX DISTANCE: ', distance)
)
.append($('<span>')
.html(distance)
)
)
});
}
}
}
function isEmail(email) {
var regex = /^([a-zA-Z0-9_.+-])+\@(([a-zA-Z0-9-])+\.)+([a-zA-Z0-9]{2,4})+$/;
return regex.test(email);
}
function isPhone(phone) {
var regex = /^(?:(?:\(?(?:00|\+)([1-4]\d\d|[1-9]\d?)\)?)?[\-\.\ \\\/]?)?((?:\(?\d{1,}\)?[\-\.\ \\\/]?){0,})(?:[\-\.\ \\\/]?(?:#|ext\.?|extension|x)[\-\.\ \\\/]?(\d+))?$/i;
return regex.test(phone);
}
PS. Я не думаю, что полученная ошибка как-то связана с этой проблемой.