Question

我发现了一些帖子可以完成我需要实现的部分内容，但是我无法完全连接点以使其正常工作，所以我希望你能提供帮助。

我想根据前一页上表单中的用户输入动态更改页面中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>

以及正好使用datepicker的页面标题中的脚本：

 $(document).ready(function() {
  $("#arrival").datepicker({ minDate: "0", dateFormat: "dd/mm/yy"});
  $("#departure").datepicker({ minDate: "+1", dateFormat: "dd/mm/yy"});
  $("#numberOfPersons").selectBox();
  $("#numberOfChildren").selectBox();

 $("input[type=submit]").click(function() {
                $arrivalDate = $("#arrival").datepicker("getDate");
                $departureDate = $("#departure").datepicker("getDate");
                $("#arrError").text( $arrivalDate != null ? '':'*');
                $("#depError").text( $departureDate != null ? '':'*');
                return ($arrivalDate != null) && ($departureDate != null) &&
                        ($arrivalDate.getTime() < $departureDate.getTime());
            });
  });

所以这会导致正确的变量在url中传递到/ book-a-room / page，例如：

http://domain.com/book-a-room/?chainAction=newAvailabilitySearch&arrival=29%2F10%2F2013&departure=3&numberOfPersons=2&numberOfChildren=0

我想要实现的是/ 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>

我想要帮助的是添加到/预订房间的脚本/然后更改html iframe代码的内容，以便拉入变量。

提前非常感谢你：0）

Answer 1

您需要为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.preventDefault()会使您的表单无法发布。

使用表单输入附加iframe src URL

1 个答案: