Question

我愿意使用两个文本字段通过url传递值。这是我的文本域：

<h3 class="title1">Email</h3>
<input type="text" id="myTextField1" />
<br/><br/>
<h3 class="title2">Secret</h3>
<input type="text" id="myTextField2" />
<br/><br/>

他们下方有一个链接：

<a id="myLink" href="index2.php"></a>

然后我使用了一个函数，它应该创建类似的东西：

index2.php?email=value1&secret=value2

然而，我得到的是：

index2.php?email=value1, secret=value1&email=value2, secret=value2

这是我使用的功能：

document.querySelector('#myBtn').addEventListener('click', function change() {
  function isInvalid(input) {
    return input.value.length == 0;
  }


  var inputs = [...document.querySelectorAll('[id^="myTextField"]')];
  var anchor = document.getElementById('myLink');

  var querystring = inputs.map((input) => {
      // Remove all leading non-digits to get the number //ex bladiebla1 = 1
      var number = input.id.replace( /^\D+/g, '');

      var titles = [...document.querySelectorAll('.title'+ number)];
      titles.forEach((title) => title.innerHTML = input.value);
      return `email=${input.value}`+` secret=${input.value}`;
  });

  anchor.href = `index2.php?${querystring.join('&')}`;

  document.getElementById('result').innerHTML = querystring;
});

我意识到这是错误的，我知道为什么这不会返回我想要的但是我不知道如何解决这个问题。任何人都可以调整我的代码并指出我正确的方向吗？

Answer 1

你在这里过分复杂了。

您有inputs变量中的输入。如果他们在html中有name属性，您可以简单地映射它们并获取值。

您实际上不需要从ID解析数字的位。

document.querySelector('#myBtn').addEventListener('click', function change() {
  function isInvalid(input) {
    return input.value.length == 0;
  }


  var inputs = [...document.querySelectorAll('[id^="myTextField"]')];
  var anchor = document.getElementById('myLink');

  var querystring = inputs.map((input) => {
      return `${input.name}=${input.value}`;
  });

  anchor.href = `index2.php?${querystring.join('&')}`;

  document.getElementById('result').innerHTML = querystring.join('&');
});

<h3 class="title1">Email</h3>
<input type="text" name="email" id="myTextField1" />
<br/><br/>
<h3 class="title2">Secret</h3>
<input type="text" name="secret" id="myTextField2" />
<br/><br/>

<button id=myBtn>Run the function</button>

<a id=myLink>Target Link</a>


<h3>Results:</h3>
<div id=result></div>

Answer 2

您遍历每个输入并为两个输入中的每一个设置电子邮件和密码。只需添加ID检查。像return number === 1 ? email=${input.value} : &secret=${input.value};

这样的东西

文本字段未正确传递值

2 个答案: