Как позволить пользователю отправить форму на нужный ему url?

Question

[Zubastik_1]

К примеру еть форма на страничке. В ней поле с урлом. Пользователь должен вбить свой url. Как сделать чтобы после сабмита данная форма отправилась на введённый пользователем url (то есть как то подставить этот адрес в код скрипта отправляющего форму аяксом)?

Answer 1

[alvvi]

Если вы уже забиндили инпут на свойство инстанса, то что мешает просто подставить его в методе который обрабатывает отправку:

const url = `http://toster.ru/${this.userUrl}`;
$.ajax({
  url,
  // ... все остальное
})

Если же у вас проблемы с чем-то более фундаметнальным, то документация в помощь.

Comments

[Zubastik_1]

не совсем догнал идею ) ${this.userUrl} это что , откуда берётся?

[alvvi]

Zubastik_1, у вас в тэгах Vue стоит, откуда берется this.userUrl написано на первой странице документации. Это просто свойство на инстансе, которое содержит значение инпута и которое вы биндите с помощью v-model.
А более подробно про формы написано здесь

${} внутри строки с `` это просто плейсхолдер для того чтобы использовать переменную, https://developer.mozilla.org/en-US/docs/Web/JavaS...

[Zubastik_1]

Cпасибо теперь понял, пошёл пробовать ))

[Zubastik_1]

Не соображу никак. Не подскажете по коду что не так?

<div id="app">
        {{ answer }}
        <input v-model="userUrl">
      </div>

      <script>

        var vm = new Vue({
          el: '#app',
          data: {
            answer: ''
          },
          created: function () {
            this.loadQuote()
          },
          methods: {
            loadQuote: function() {
                this.status = 'Loading...';
                var vm = this;
                const url = `http://toster.ru/${this.userUrl}`;
                axios.get(url)
                .then(function (response) {
                  vm.answer = response.data
                })
                .catch(function (error) {
                  vm.answer = 'error';
                });
            }
          }
        })

      </script>

[alvvi]

Zubastik_1,
много чего
во-первых, data желательно всегда делать функцией возвращающей объект

new Vue({
  data() {
    return { 
      answer : '', 
      userUrl: '' 
    }
  }
})

во-вторых,
v-model="userUrl"
модель привязали к userUrl, а сам userUrl в data не инициализировали - не порядок
в-третьих, что такое
this.status = 'Loading...';
? у вас свойства status в data тоже нет.
ну и наконец,
`http://toster.ru/${this.userUrl}`
такого url НЕ СУЩЕСТВУЕТ, это был только пример, там должен быть конкретно нужный вам url, не важно формируете ли вы его из this.userUrl или может быть вам нужен весь url введенный пользователем (тогда достаточно просто сделать get(vm.userUrl).

В общем, советую подучить все же js пока что, имхо, вы рановато в Vue полезли)

[Zubastik_1]

Илья Ростопка, спасибо большое буду пробовать

Answer 2

[leni_m]

var url = $(input).val();
$.ajax({
            url: url
        })

мб так?

Comments

[Zubastik_1]

не совсем понимаю, $(input).val() при загрузке страницы будет пустой

[leni_m]

Zubastik_1, ну а у вас ajax отправляется при загрузке страницы?)
Вы же написали после сабмита, а обычно до сабмита пользователь заполняет поля

[Zubastik_1]

но до сабмита надо чтобы уже в action стоял введённый пользователем урл

[leni_m]

Zubastik_1, Вы бы код скинули лучше

$(form).on('submit', function () { // или $('submit').on('click', ...)   или $('submit').click(...) 
    // код здесь будет выполняться до сабмита
    // например ajax запрос
    // return false; - останавливает дефолтную отправку формы, а весь код выше выполнится,
})

не понимаю зачем вам action формы, если вы выполняете ajax запрос и там вместо action - url. Тоже самое.
Но если на то пошло например в коде,который выполняется до сабмита:

var url = $(input).val();
$(form).attr("action", url);