Javascript 使用表单输入附加iframe src URL

我已经找到了一些帖子，这些帖子做了我需要完成的部分工作，但是我不能很好地将这些点连接起来，所以我希望你能帮我

我希望根据上一页表单中的用户输入动态更改页面中iframe的src url，即我在wordpress页面的侧栏中有一个搜索小部件，我希望表单中的值附加到iframe src中的基本url

因此，我的表单代码如下所示：

<div class="book" id="book">
<form name="bookForm" action="/book-a-room/" >
<input type="hidden" name="chainAction" value="newAvailabilitySearch"/>
 <span id="arrError"></span>
 <input id="arrival" name="arrival" type="text" class="text-input" value="Arrival date" />
 <span id="depError"></span>
 <input id="departure" name="departure" type="text" class="text-input" value="Departure date" />
 <select name="numberOfPersons" class="selectBox">
  <option value="1">1 adult</option>
  <option value="2">2 adults</option>
  <option value="3">3 adults</option>
 </select>
 <select name="numberOfChildren" class="selectBox">
  <option value="0">No Children</option>
  <option value="1">1 child</option>
  <option value="2">2 children</option>
  <option value="3">3 children</option>
 </select>
 <input type="submit" class="submit" value="SEARCH RATES"/>
</form>
</div>

我想要实现的是，在/book-a-room/中，iframe的src url有一个固定的基础url，例如mydomain.com，然后根据主页添加表单输出，以便：

<div><iframe src="https://mydomain.com&request_locale=en&arrival=29%2F10%2F2013&departure=3&numberOfPersons=2&numberOfChildren=0" class="noScrolling" scrolling-x="no"></iframe></div> 

我想要的帮助是向/book-a-room/添加什么脚本，然后更改html iframe代码以使其拉入变量

---

非常感谢您：0

您需要为iframe和两个下拉列表添加一个id。然后您可以填充所有这些元素，然后更改iframe的属性

$("input[type=submit]").click(function(e) {
                var $arrivalDate = $("#arrival").datepicker("getDate");
                var $departureDate = $("#departure").datepicker("getDate");
                var numberOfPersons = $("#numberOfPersons").val();
                var numberOfChildren = $("#numberOfChildren").val();
                $("#arrError").text( $arrivalDate != null ? '':'*');
                $("#depError").text( $departureDate != null ? '':'*');
                if ($arrivalDate != null) && ($departureDate != null) &&
                        ($arrivalDate.getTime() < $departureDate.getTime())
                {
                  var url = "http://yourotherdomain.com&request_locale=en";
                  url = url + "&arrival=" + $arrivalDate + "&departure=" + $departureDate + "&numberOfPersons=" + numberOfPersons + "&numberOfChildren=" + numberOfChildren;

                  $("#iframe_id").attr("src", url);

                  e.preventDefault();
                }
            });
  });

---

有一个e.prevent默认值，使您的表单不被发布。

您想设置吗http://domain.com/book-a-room/?chainAction=newAvailabilitySearch&arrival=29%2F10%2F2013&departure=3&numberOfPersons=2&numberOfChildren=0 作为iframe的src？不，我想将iframe src设置为-我有一个来自第三方站点的基本url，可以拉入iframe我需要将表单标记中的参数传递到url，这些参数是开始到达的位=在上面的示例中，非常感谢MahanGM花了这么多时间，我来试一试：除了添加id之外，我还需要在/book-a-room/页面中的实际iframe标记中添加什么代码？您不能向iframe内容添加任何内容。iframe能够加载给定的源路径。啊，好的，那么就添加id来替换iframe_id…然后你的意思是只在html表单中的选择字段中添加一个id属性-抱歉所有的问题，我非常感谢你的时间垃圾，这个问题是选择字段-我understand@user2916162对为iframe添加id属性并选择字段，然后就可以开始了。

<div><iframe src="https://mydomain.com&request_locale=en&arrival=29%2F10%2F2013&departure=3&numberOfPersons=2&numberOfChildren=0" class="noScrolling" scrolling-x="no"></iframe></div> 

$("input[type=submit]").click(function(e) {
                var $arrivalDate = $("#arrival").datepicker("getDate");
                var $departureDate = $("#departure").datepicker("getDate");
                var numberOfPersons = $("#numberOfPersons").val();
                var numberOfChildren = $("#numberOfChildren").val();
                $("#arrError").text( $arrivalDate != null ? '':'*');
                $("#depError").text( $departureDate != null ? '':'*');
                if ($arrivalDate != null) && ($departureDate != null) &&
                        ($arrivalDate.getTime() < $departureDate.getTime())
                {
                  var url = "http://yourotherdomain.com&request_locale=en";
                  url = url + "&arrival=" + $arrivalDate + "&departure=" + $departureDate + "&numberOfPersons=" + numberOfPersons + "&numberOfChildren=" + numberOfChildren;

                  $("#iframe_id").attr("src", url);

                  e.preventDefault();
                }
            });
  });