0

我发现了一些帖子可以完成我需要实现的部分工作，但我无法将这些点联系起来以使其发挥作用，所以我希望你能提供帮助。

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

以及仅适用于日期选择器的页面标题中的脚本：

 $(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/ 页面，例如：

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>

我想要帮助的是要添加到 /book-a-room/ 的脚本，然后将 html iframe 代码更改为什么，以便它拉入变量。

提前非常感谢你：0）

4

1 回答 1

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()使您的表格不被张贴的原因。

于 2013-10-24T16:35:53.663 回答