使用带有选项元素的表单生成自定义 iframe

Question

1

我正在为一个学校项目制作一个网站。

这个想法是一个网站，它允许您过滤来自新西兰板球商店的不同结果，然后使用 iframe 将它们全部放在一个地方，例如。如果一个过滤器按最低价格排序，则 iframe 将具有 URL“www.cricketwebiste.com/sortby=lowest/”

到目前为止我已经制作了一个表格：

<br>
<select id="brand">
  <option value="brand">Brand</option>
  <option value="graynicolls">Gray-Nicolls</option>
  <option value="kookaburra">Kookaburra</option>
  <option value="m&h">Millichamp and Hall</option>
  <option value="newbalance">New Balance</option>
</select>
<br><br>
<input type="button" onclick="getOption()" value="Submit">

我的问题是：我将如何使用提交表单中的数据来生成这些 iframe，以便它可以转到具有不同网站的多个 iframe 的页面。都有那个过滤器吗？例如。 cricketwebsite.com/kookaburra

Answer 1

您可以通过多种方式做到这一点。在所有这些中，您都必须在表单元素上或表单元素中收听事件。

第一个示例监听 <select> 元素上的 change 事件。当表单元素的值发生更改并触发事件处理程序侦听该事件时，会发生更改事件。本例中的事件处理程序是一个名为 selectBrand 的函数。

selectBrand 函数获取<select> 元素的当前值，即所选<option> 元素上value 属性的值。然后，它将值与需要在它之前的 URL 连接起来，并设置 <iframe> 元素的 src 属性，该属性会更改 iframe 的 URL。

现在您的 iframe 内容已更改。

const select = document.getElementById('brand');
const iframe = document.getElementById('iframe');
const url = 'www.cricketwebiste.com/';

function selectBrand(event) {
  const { value } = event.target;
  const src = url + value;
  console.log(src); // This show the result.
  iframe.src = src;
}

select.addEventListener('change', selectBrand);

<select id="brand">
  <option value="brand">Brand</option>
  <option value="graynicolls">Gray-Nicolls</option>
  <option value="kookaburra">Kookaburra</option>
  <option value="m&h">Millichamp and Hall</option>
  <option value="newbalance">New Balance</option>
</select>

<iframe id="iframe" src="brand"></iframe>

否则，您可以在 <form> 元素上侦听 submit 事件，该元素包装了您的输入和您需要的其他元素。每当单击表单中的 submit 按钮时，都会发生提交事件。此按钮必须是 <input type="submit"> 或 <button type="submit"></button> 元素才能计数。

<form> 元素的常规行为是通过 HTTP 请求将表单中的所有数据发送到指定端点。但是我们将使用event.preventDefault() 取消该行为，正如其名称所暗示的那样，它会阻止提交的默认行为。

相反，您需要从所需的表单中提取值。您可以使用 FormData 构造函数来做到这一点。这将创建一个可迭代对象，其中包含表单中元素的 name-value 对。使用FormData.get()，您可以获得表单元素的特定值，在本例中为'brands' 字段，即您的<select> 元素。

然后它执行与上面示例相同的操作。

const form = document.forms['brand-form'];
const iframe = document.getElementById('iframe');
const url = 'www.cricketwebiste.com/';

function selectBrand(event) {
  event.preventDefault();
  const { target } = event;
  const formData = new FormData(target);
  const value = formData.get('brand');
  const src = url + value;
  console.log(src); // This show the result.
  iframe.src = src;
}

form.addEventListener('submit', selectBrand);

<form name="brand-form">
  <select id="brand" name="brand">
    <option value="brand">Brand</option>
    <option value="graynicolls">Gray-Nicolls</option>
    <option value="kookaburra">Kookaburra</option>
    <option value="m&h">Millichamp and Hall</option>
    <option value="newbalance">New Balance</option>
  </select>
  <input type="submit" value="submit">
</form>

<iframe id="iframe" src="brand"></iframe>

我希望这足够清楚，并能帮助您在项目中走得更远。如果您有任何问题或 cmets，请随时在下方留言。