Question

我在表单中有5个输入字段，我想将它们各自的参数和值（如果已设置）添加到查询字符串

我想做的是使它在domain.tld末尾的第一个参数之前添加？，如果没有，则显示具有第一个输入值的特定参数然后，如果有其他输入，则将＆和下一个参数与值一起添加，然后将＆以及其余的参数和值作为查询字符串的结构，仅在存在时添加参数及其值是通过元素ID插入其相应输入中的值。

在任务中，仅当且仅当它们具有各自的输入时，才需要添加带有参数及其值的查询字符串。不知道为什么它不起作用。这与PHP的 strpos（）（已经具有用于重定向到其他地方的类似功能，并且可以正常工作）和JavaScript中的 indexOf（）效果相当，与PHP的等效 strpos（），对吧？下面提供了我尝试过的内容。

以某种方式，我想念** url = url + **部分就足够了。最后，我想在textarea元素中显示URL。只需将参数添加到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>

Answer 1

正如我在评论中指出的那样，您遇到语法错误：未定义indexOf

如果您坚持要测试if (url.indexOf('?') !== -1) {，则?

我假设您不只是想要提交表单，在这种情况下您不需要任何处理，表单提交将为您完成

以下是使用URL.searchParams

将参数附加到URL的方法

添加它以获得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>

Answer 2

如果将输入收集在数组中，则无论您有多少个参数，都可以过滤并连接它们。这样，您不必每次添加参数都需要编写新代码，因为查询字符串?的开始始终位于数组联接和数组项之间的&分隔符之前。我将.paracla类别移至输入，因为它对我而言比在标签上更有意义。

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>

Answer 3

也许就是您想要的jsFiddle。

Loadobj

Answer 4

请注意，如果您不想对输入内容进行特殊处理，那么您所做的一切都完全等同于此操作（将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?{input1_name}={input1_value}&{input2_name}={input2_value}...的格式在URL中传递，就像您正在以自定义方式进行操作

Answer 5

更正了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>

JavaScript：是否根据输入字段值将查询字符串添加到URL？

5 个答案: