在窗體輸入框中添加iframe src URL

Question

我發現有幾篇文章可以完成我需要實現的部分功能，但是我無法將這些小部件連接起來使其工作，因此我希望能夠提供幫助。

我想動態地改變一個頁面內的iframe的src網址，根據用戶在前一頁的表格內的輸入即ie我有一個搜索小部件內的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()); 
      }); 
    }); 

所以這導致了正確的變量傳遞在/書房間/頁的網址例如：

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

我想達到的是t他是/ book-a-room /中的iframe的src網址，以具有設定的基本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

您需要添加一個id爲您iframe和你的兩個下拉菜單。然後，您可以填充它們全部，然後更改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()它使您的窗體不被張貼。