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 に mydomain.com などのベース URL を設定し、メインページに従ってフォーム出力を追加することです。

<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および 2 つのドロップダウンに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 に答える