Как в тэг встроить функцию submit?

Question

[AndRussia]

Здравствуйте, хлебцы! Проблема такая: Я хочу сделать сайт, на котором из-за стилей не могу расположить обычный submit с формой и я придумал решение, но как его реализовать не знаю (если вообще можно). jsfiddle: https://jsfiddle.net/f30n7jrw/
Суть в том, чтобы при нажатии на ссылку она работала как submit.
Как это сделать? Помогите пожалуйста.

Answer 1

[Иван Иванов]

а что вам мешает создать форму, внутри формы расположить вашу вёрстку и сделать input с submit невидимым. А на див который является у вас кнопкой при помощи JS, повесить событие, которое бы кликало программно на невидимый submit

Comments

[AndRussia]

Мешает незнание кода))

[Иван Иванов]

ну хорошо, сделайте вёрстку, я вам напишу код на JS. Засуньте вашу вёрстку в form сделайте так, чтобы у вас отправлялось всё по нажатию на submit, затем задайте кнопке submit opacity:0 и какой-нибудь id. С помощью position и z-index подсуньте её под вашу кнопку имитатор, чтобы она не нарушала ваши стили при наведении. Вашей кнопке-имитатору напишите атрибут onclick = "clickSubmit()". И вставьте в конце следующий код:

document.addEventListener('DOMContentLoaded', function(){

function clickSubmit(){
   var btn = document.querySelector('#id-вашего div имитирующего submit');
   var submitBtn = document.querySelector('#id-вашего submit');
  
  btn.addEventListener("click", function(event){
         submitBtn.click();
  }); 
}
});

Answer 2

[Moses Fender]

По нажатию на div.search-btn отправляй XHR на нужный адрес с value твоего input.search-txt. В чём проблема-то?

Comments

[AndRussia]

Я слишком новичок, чтобы понимать Вас)

[WapSter]

AndRussia, тогда учить js ибо это обычная простая процедура в разных вариациях делающая тоже самое, удачи новичегг)

[Moses Fender]

Во-первых, полю имя дай, иначе input смысла не имеет. Я назвал его search-query.

document.addEventListener('DOMContentLoaded', function () {
                var _searchInput = document.querySelector('[name="search-query"]');
                _searchInput.xhr = function () {
                    fetch('/url?q=' + encodeURIComponent(this.value))
                            .then(function (res) {
                                /* … */
                            })
                            .catch(function (rej) {
                                /* … */
                            });
                };
                document.querySelector('div.search-btn').addEventListener('click', function () {
                    _searchInput.xhr();
                });
            });