JavaScript: добавление строки запроса в URL на основе значений полей ввода, если установлено? - PullRequest
Новая
       14

JavaScript: добавление строки запроса в URL на основе значений полей ввода, если установлено?

0 голосов
/ 01 марта 2019

У меня есть 5 полей ввода в форме, и я хотел бы добавить их соответствующие параметры и значения, если они установлены, в строку запроса

Что я пытаюсь сделать, это заставить добавить ? перед первым параметром в конце domain.tld, если его нет, и показать конкретный параметр со значением первого входа, затем, если другой вход, добавить & и следующий параметр со значениемзатем & и остальные параметры и значения в виде строки запроса структурируются и добавляют параметры и их значения только в том случае, если есть значение, вставленное в их соответствующие входы по идентификатору элемента.

В задачу необходимо добавить строку запроса с параметрами и их значениями, если и только если для них имеется соответствующий ввод.Не уверен, почему это не работает.Это бы хорошо работало с PHP strpos () (уже имеющим аналогичную функциональность для перенаправления в другом месте, и это работает), а indexOf () в JavaScript является своего рода эквивалентом PHP strpos () , верно?То, что я пробовал, приведено ниже.

Почему-то мне не хватает продолжения, и я думаю, что части ** url = url + ** будет достаточно.В конце я хочу показать URL в элементе textarea.Просто добавьте параметры в URL и покажите результат в texarea для копирования по клику для использования.Уже есть щелчок, чтобы скопировать разобрался.

function parammeterize() {
  var paramter0 = document.getElementById('parameter0').value;
  var parameter1 = document.getElementById('parameter1').value;
  var parameter2 = document.getElementById('parameter2').value;
  var parameter3 = document.getElementById('parameter3').value;
  var parameter4 = document.getElementById('parameter4').value;

  var url = 'https://domain.tld';

  if (paramter0) {
    if (indexOf(url, '?') !== false) {
      var symbol_insert = '&';
    } else {
      var symbol_insert = '?';
    }
    url = url + symbol_insert + 'paramter0=' + paramter0;
  }
  if (parameter1) {
    if (indexOf(url, '?') !== false) {
      var symbol_insert = '&';
    } else {
      var symbol_insert = '?';
    }
    url = url + symbol_insert + 'parameter1=' + parameter1;
  }
  if (parameter2) {
    if (indexOf(url, '?') !== false) {
      var symbol_insert = '&';
    } else {
      var symbol_insert = '?';
    }
    url = url + symbol_insert + 'parameter2=' + parameter2;
  }
  if (parameter3) {
    if (indexOf(url, '?') !== false) {
      var symbol_insert = '&';
    } else {
      var symbol_insert = '?';
    }
    url = url + symbol_insert + 'parameter3=' + parameter3;
  }
  if (parameter4) {
    if (indexOf(url, '?') !== false) {
      var symbol_insert = '&';
    } else {
      var symbol_insert = '?';
    }
    url = url + symbol_insert + 'parameter4=' + parameter4;
  }
}
document.getElementById('parammed_url').innerHTML = url;

document.getElementById('add_parameters').addEventListener('click', parammeterize);
<div id="parameters" class="panel-collapse collapse">
  <ul class="list-group">
    <li class="list-group-item">
      <label class="parameter">parameter0 0:</label> <input type="text" class="select-selected" id="parameter0" name="parameter0" maxlength="64">
    </li>
    <li class="list-group-item">
      <label class="parameter">parameter 1:</label> <input type="text" class="select-selected" id="parameter1" name="parameter1" maxlength="64">
    </li>
    <li class="list-group-item">
      <label class="parameter">parameter 2:</label> <input type="text" class="select-selected" id="parameter2" name="parameter2" maxlength="64">
    </li>
    <li class="list-group-item">
      <label class="parameter">parameter 3:</label> <input type="text" class="select-selected" id="parameter3" name="parameter3" maxlength="64">
    </li>
    <li class="list-group-item">
      <label class="parameter">parameter 4:</label> <input type="text" class="select-selected" id="parameter4" name="parameter4" maxlength="64">
    </li>
  </ul>
  <button id="add_parameters" name="submit" class="btn btn-primary">
        APPLY
        </button>
</div>

Ответы [ 5 ]

0 голосов
/ 01 марта 2019

Обратите внимание, что если вы не хотите применять специальную обработку к вашим входам, все, что вы делаете, строго эквивалентно этому (добавлено type="submit" к кнопке для отправки формы): 

<div id="parameters" class="panel-collapse collapse">
 
 <form action="https://domain.tld" method="get">
  
  <ul class="list-group">
    <li class="list-group-item">
      <label class="parameter">parameter0 0:</label> <input type="text" class="select-selected" id="parameter0" name="parameter0" maxlength="64">
    </li>
    <li class="list-group-item">
      <label class="parameter">parameter 1:</label> <input type="text" class="select-selected" id="parameter1" name="parameter1" maxlength="64">
    </li>
    <li class="list-group-item">
      <label class="parameter">parameter 2:</label> <input type="text" class="select-selected" id="parameter2" name="parameter2" maxlength="64">
    </li>
    <li class="list-group-item">
      <label class="parameter">parameter 3:</label> <input type="text" class="select-selected" id="parameter3" name="parameter3" maxlength="64">
    </li>
    <li class="list-group-item">
      <label class="parameter">parameter 4:</label> <input type="text" class="select-selected" id="parameter4" name="parameter4" maxlength="64">
    </li>
  </ul>
  <button id="add_parameters" name="submit" type="submit" class="btn btn-primary">
        APPLY
  </button>

 </form>
 
</div>

Объяснение : при использовании method="get" в теге form все входные значения будут переданы в URL при отправке в формате url?{input1_name}={input1_value}&{input2_name}={input2_value}..., точно так же, как вы делаете в обычном порядке

0 голосов
/ 01 марта 2019

Может быть, это то, что вы хотите jsFiddle . 

document.getElementById('add_parameters').addEventListener('click', parammeterize);

function parammeterize() {
  let url = 'https://domain.tld';
  let params = {};
  document.querySelectorAll('#parameters input.select-selected').forEach((element) => {
    if (element.value.length > 0)
        params[element.id] = element.value;
  });
  let esc = encodeURIComponent;
  let query = Object.keys(params)
    .map(k => esc(k) + '=' + esc(params[k]))
    .join('&');
  url += '?' + query;
  alert(url);
}
0 голосов
/ 01 марта 2019

У вас есть синтаксическая ошибка, как я указал в комментарии: indexOf не определен

Если вы настаиваете, то if (url.indexOf('?') !== -1) { нужно проверить, есть ли ?

Я предполагаю, что вы не просто хотите отправить форму, и в этом случае вам не нужна обработка, отправка формы сделает это за вас

Вот как добавить параметры в URL с помощью URL .searchParams

Добавьте это, чтобы получить поддержку Internet Explorer

<script src="https://cdn.polyfill.io/v2/polyfill.min.js"></script>

ПРИМЕЧАНИЕ: Я изменил имя для параметризации 

var url = new URL('https://domain.tld');

function parameterize() {
  document.querySelectorAll(".select-selected").forEach(function(inp) {
   url.searchParams.append(inp.name,inp.value); // if (inp.value) ...
  })
  console.log(url)
}

document.getElementById('add_parameters').addEventListener('click', parameterize);
<div id="parameters" class="panel-collapse collapse">
  <ul class="list-group">
    <li class="list-group-item">
      <label class="parameter">parameter0 0:</label> <input type="text" class="select-selected" id="parameter0" name="parameter0" maxlength="64">
    </li>
    <li class="list-group-item">
      <label class="parameter">parameter 1:</label> <input type="text" class="select-selected" id="parameter1" name="parameter1" maxlength="64">
    </li>
    <li class="list-group-item">
      <label class="parameter">parameter 2:</label> <input type="text" class="select-selected" id="parameter2" name="parameter2" maxlength="64">
    </li>
    <li class="list-group-item">
      <label class="parameter">parameter 3:</label> <input type="text" class="select-selected" id="parameter3" name="parameter3" maxlength="64">
    </li>
    <li class="list-group-item">
      <label class="parameter">parameter 4:</label> <input type="text" class="select-selected" id="parameter4" name="parameter4" maxlength="64">
    </li>
  </ul>
  <button type="button" id="add_parameters" class="btn btn-primary">
        APPLY
        </button>
</div>

jQuery Примечание. Я здесь проверяю значение.Если ничего не заполнено, вы получите исходный URL 

var url = new URL('https://domain.tld');

function parameterize() {
  $(".select-selected").each(function() {
   if (this.value) url.searchParams.append(this.name,this.value); // only if value entered
  })
  console.log(url)
}

$('#add_parameters').on('click', parameterize);
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="parameters" class="panel-collapse collapse">
  <ul class="list-group">
    <li class="list-group-item">
      <label class="parameter">parameter0 0:</label> <input type="text" class="select-selected" id="parameter0" name="parameter0" maxlength="64">
    </li>
    <li class="list-group-item">
      <label class="parameter">parameter 1:</label> <input type="text" class="select-selected" id="parameter1" name="parameter1" maxlength="64">
    </li>
    <li class="list-group-item">
      <label class="parameter">parameter 2:</label> <input type="text" class="select-selected" id="parameter2" name="parameter2" maxlength="64">
    </li>
    <li class="list-group-item">
      <label class="parameter">parameter 3:</label> <input type="text" class="select-selected" id="parameter3" name="parameter3" maxlength="64">
    </li>
    <li class="list-group-item">
      <label class="parameter">parameter 4:</label> <input type="text" class="select-selected" id="parameter4" name="parameter4" maxlength="64">
    </li>
  </ul>
  <button type="button" id="add_parameters" class="btn btn-primary">
        APPLY
        </button>
</div>
0 голосов
/ 01 марта 2019

Если вы собираете входные данные в массив, вы можете просто фильтровать и объединять их, независимо от того, сколько у вас параметров.Таким образом, вам не нужно писать новый код каждый раз, когда вы добавляете параметр, так как начало строки запроса ? всегда будет идти до объединения массива и разделителя & между элементами массива.Я перенес класс .parameter на входы, так как это имело для меня больше смысла, чем на этикетках. 

const create_uri = () => {
  const parameters = [ ...document.querySelectorAll( '.parameter' ) ];
  const root = 'https://domain.tld';
  const query_string = parameters.map( input => input.value ? `${ input.id }=${ input.value }` : '' );
  return `${ root }?${ encodeURIComponent( query_string.join( '&' )) }`;
};

const parammeterize = () => {
  const uri = create_uri();
  console.log( uri );
};

document.getElementById('add_parameters').addEventListener('click', parammeterize);
<div id="parameters" class="panel-collapse collapse">
  <ul class="list-group">
    <li class="list-group-item">
      <label>parameter 0:</label>
      <input type="text" class="select-selected parameter" id="parameter0" name="parameter0" maxlength="64">
    </li>
    <li class="list-group-item">
      <label>parameter 1:</label>
      <input type="text" class="select-selected parameter" id="parameter1" name="parameter1" maxlength="64">
    </li>
    <li class="list-group-item">
      <label>parameter 2:</label>
      <input type="text" class="select-selected parameter" id="parameter2" name="parameter2" maxlength="64">
    </li>
    <li class="list-group-item">
      <label>parameter 3:</label>
      <input type="text" class="select-selected parameter" id="parameter3" name="parameter3" maxlength="64">
    </li>
    <li class="list-group-item">
      <label>parameter 4:</label>
      <input type="text" class="select-selected parameter" id="parameter4" name="parameter4" maxlength="64">
    </li>
  </ul>
  <button id="add_parameters" name="submit" class="btn btn-primary">
  APPLY
  </button>
</div>
0 голосов
/ 01 марта 2019

Исправил ваш indexOf() синтаксис, иначе все хорошо 

function parammeterize() {
  var paramter0 = document.getElementById('parameter0').value;
  var parameter1 = document.getElementById('parameter1').value;
  var parameter2 = document.getElementById('parameter2').value;
  var parameter3 = document.getElementById('parameter3').value;
  var parameter4 = document.getElementById('parameter4').value;

  var url = 'https://domain.tld';

  if (paramter0) {
    if (url.indexOf('?') !== -1) {
      var symbol_insert = '&';
    } else {
      var symbol_insert = '?';
    }
    url = url + symbol_insert + 'paramter0=' + paramter0;
  }
  if (parameter1) {
    if (url.indexOf('?') !== -1) {
      var symbol_insert = '&';
    } else {
      var symbol_insert = '?';
    }
    url = url + symbol_insert + 'parameter1=' + parameter1;
  }
  if (parameter2) {
    if (url.indexOf('?') !== -1) {
      var symbol_insert = '&';
    } else {
      var symbol_insert = '?';
    }
    url = url + symbol_insert + 'parameter2=' + parameter2;
  }
  if (parameter3) {
    if (url.indexOf('?') !== -1) {
      var symbol_insert = '&';
    } else {
      var symbol_insert = '?';
    }
    url = url + symbol_insert + 'parameter3=' + parameter3;
  }
  if (parameter4) {
    if (url.indexOf('?') !== -1) {
      var symbol_insert = '&';
    } else {
      var symbol_insert = '?';
    }
    url = url + symbol_insert + 'parameter4=' + parameter4;
  }
  console.log(url)
}

document.getElementById('add_parameters').addEventListener('click', parammeterize);
<!DOCTYPE html>
<html>

<body>

  <div id="parameters" class="panel-collapse collapse">
    <ul class="list-group">
      <li class="list-group-item">
        <label class="parameter">parameter0 0:</label> <input type="text" class="select-selected" id="parameter0" name="parameter0" maxlength="64">
      </li>
      <li class="list-group-item">
        <label class="parameter">parameter 1:</label> <input type="text" class="select-selected" id="parameter1" name="parameter1" maxlength="64">
      </li>
      <li class="list-group-item">
        <label class="parameter">parameter 2:</label> <input type="text" class="select-selected" id="parameter2" name="parameter2" maxlength="64">
      </li>
      <li class="list-group-item">
        <label class="parameter">parameter 3:</label> <input type="text" class="select-selected" id="parameter3" name="parameter3" maxlength="64">
      </li>
      <li class="list-group-item">
        <label class="parameter">parameter 4:</label> <input type="text" class="select-selected" id="parameter4" name="parameter4" maxlength="64">
      </li>
    </ul>
    <button id="add_parameters" name="submit" class="btn btn-primary">
    APPLY
    </button>
  </div>



</body>

</html>
...