Как то можно менять form action, взаимозависимости от того что введено в input?

Question

[HAtan]

Как можно сделать, что бы при пустом поле был action="https://test-5.vbbn.in/entreprises/">
и не передавались гет параметры (?c=) и если что то есть в строке, то другой екшин (action="https://test-5.vbbn.in/entreprises/chercher/")?

<form class="search-form"  method="get"  action="action="https://test-5.vbbn.in/entreprises/">">
<input type="text" class="search-input search-input--shadow" name="c" id="c" placeholder="Je cherche" value="<?php echo get_search_query() ?>"/>
  <input type="submit" id="searchsubmit"  class="btn search-submit" value="" />
</form>

Comments

[WapSter]

Ты запутался. От того что в js передать строку с PHP кодом ничего не поменяется. Этот код просто напросто не выполниться. А так в action можно из js передать нужный url

[HAtan]

WapSter, хорошо, а как это сделать?
Поправил код, убрал php из екшена.

[HAtan]

WapSter, Что то типо такого наверное?

var button = document.querySelectorAll('#searchsubmit');
  var input = document.querySelector('#c');
  for (var i = 0; i < button.length; i++) {
    button[i].addEventListener('click', function() {
      if (input.value !== '') {
        document.getElementById('search-form').setAttribute("action","/entreprises/chercher/")
      }else{
        document.getElementById('search-form').setAttribute("action","/entreprises/")
      }
    })
  }

[Вадим]

HAtan, Да, вроде того. Однако, менять action у формы в зависимости от заполненности инпута - сомнительная затея. Например, если JS сломается - то всё, ничего не сработает. Да и к коду много вопросов:

1. querySelectorAll - а ищете элемент по id, хотя в рамках страницы id должен быть уникальным.
   
2. Опираться на индексы при навешивании событий - ненадёжная затея. Кнопки поменяются местами или ещё что и всё сломается. Вместо этого лучше использовать деллигирование. Когда событие отлавливается на родительском элементе, а в event.target уже смотрят на каком реально элементе сработало событие и выбирают соответствюущее действие. Например, опираясь на тип элемента, css класс, data-атрибут.
   
3. В цикле происходит поиск формы - работа с DOM дорогая операция. Лучше так же вынести элемент формы в переменную.
   
4. Если уж и выбираете такой метод, то вам нужно добавить обработчик submit формы. Тогда в event.target у вас будет сама форма, в которой вы можете найти значение любого нужного вам инпута, подменить у формы action и вызвать form.submit(). Никаких циклов, работы с DOM и так далее. И работать будет не только по клику на кнопку, а ещё и при нажатии на enter и так далее.
   

https://learn.javascript.ru/forms-submit

А по хорошему Вам стоило бы подумать над архитектурой.
Не менять выполняющий скрипт в action, а добавить чекбокс в форму. А на бэке уже в зависимости от значения чекбокса делаются разные действия. Никакого гемороя на фронте + независимость от работоспособности JS.

[HAtan]

Вадим, не по своему желанию приходиться такое проворачивать(

Answer 1

[Александр Никитин]

$(document).ready(function(){

//значение будет использоваться по умолчанию и при пустом поле input
var action_default="https://test-5.vbbn.in/entreprises/";

//значение будет использоваться при НЕПУСТОМ поле input
var action="https://test-5.vbbn.in/entreprises/chercher/";

//подставлять значение action при изменении input
$("#c").change(function() {

//определеяем текущее значение val поля input
var text = $("#c").val();

//определяем, пустое ли значение или нет
if(text==""){
$(".search-form").attr("action", action_default);
}else{
$(".search-form").attr("action", action);
}

});
});