Использование scroll-ID вместе DOM-события - PullRequest
Новая
       29

Использование scroll-ID вместе DOM-события

0 голосов
/ 30 апреля 2020

Я использую 2 "контактную форму 7" на моей странице и использую DOM-событие для передачи данных из одной формы в другую. Поскольку форма, которая получает данные, расположена немного дальше вниз по странице, я дал ей привязку / CSS -ID, чтобы она автоматически прокручивалась вниз к форме. 

document.addEventListener( 'wpcf7submit', function( event ) {
if ( '16172' == event.detail.contactFormId ) {
location.replace('https://mypage.com/?field1='+jQuery('#field1').val()+'&field2='+jQuery('#field2').val()+'&field3='+jQuery('#field3').val()+'&field4='+jQuery('#field4').val()+'&field5='+jQuery('#field5').val()+'&field6='+jQuery('#field6').val()+'&field7='+jQuery('#field7').val() + '#form');
}
}, false );

Передача данных работает нормально, если я используйте его без привязки в конце URL, поэтому просто "https://mypage.com/". Если я добавлю якорь, он не прокручивается, но и не передает никаких данных.

Есть идеи, как заставить это работать? Я использую Elementor Pagebuilder (Bridge Theme).

С уважением

Редактировать: Попробуйте с сериализацией: 

document.addEventListener( 'wpcf7submit', function( event ) {
if ( '16172' == event.detail.contactFormId ) {
var parameters = $('#16172).serialize();
location.replace( 'https://mypage.com/?' + $('#16172').serialize() + '#form'); 
}
}, false );

1 Ответ

1 голос
/ 30 апреля 2020

Проблема в вашем исходном вопросе заключалась в том, что в вашем созданном URL была добавлена ​​привязка hashtag перед списком параметров: 

location.replace('https://mypage.com/#form?field1='+jQuery('#field1').val()+'&field2='+jQuery('#field2').val()+'&field3='+jQuery('#field3').val()+'&field4='+jQuery('#field4').val()+'&field5='+jQuery('#field5').val()+'&field6='+jQuery('#field6').val()+'&field7='+jQuery('#field7').val());

Привязка hastag должна быть последней частью вашего URL - string: 

location.replace('https://mypage.com/?field1='+jQuery('#field1').val()+'&field2='+jQuery('#field2').val()+'&field3='+jQuery('#field3').val()+'&field4='+jQuery('#field4').val()+'&field5='+jQuery('#field5').val()+'&field6='+jQuery('#field6').val()+'&field7='+jQuery('#field7').val() + '#form');

Чтобы продвинуться немного дальше: вы можете упростить создание строки и также позаботиться о url-кодировании. Вместо добавления каждого отдельного поля ввода к вашей строке с помощью 

'?field1='+jQuery('#field2').val() + 'field2=' ...

вы можете использовать serialize() в вашем элементе формы, чтобы получить строку в кодировке uri. Точно, что вам нужно: 

// assuming your from has the id="myform"
var parameters = $('#myForm').serialize();
// creates a string like field1=value1&field2=value2&field3=value3 ...

Теперь вам просто нужно добавить свой hastag якорь и ваш хост: 

location.replace( 'https://mypage.com/?' + $('#form').serialize() + '#form' );
...