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

Question

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

Возможно, вы слышали термин «самоуничижительный юмор». Это юмор, который минимизирует вашу важность. Устаревший класс или метод подобны этому. Это уже не важно. На самом деле так важно, что его больше нельзя использовать вообще, поскольку оно, вероятно, перестанет существовать в будущем.

Попытайтесь избежать этого

0

javascript input query-string getelementbyid indexof

задан mplungjan 1 March 2019 в 10:37

5 ответов

score 0 · Answer 1

Может быть, это то, что вы хотите 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);
}

score 0 · Answer 2

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

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>

score 0 · Answer 3

Исправлен ваш синтаксис 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>

score 0 · Answer 4

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

[ 115]

<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

ответ дан Kaddath 1 March 2019 в 10:37

У вас есть синтаксическая ошибка, как я указал в комментарии: 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

ответ дан mplungjan 1 March 2019 в 10:37

Другие вопросы по тегам: