Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 5 of 5
  1. #1
    New to the CF scene
    Join Date
    May 2013
    Posts
    8
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Submit/Get form in an iframe on another page.

    Ok, I'm really stuck here so any help will be MASSIVELY appreciated. I've got this form in a sidebar here:

    http://www.george-hotel.net/

    As you can see, the form uses the URL to get data from an external software to find available bookings. All I want this to do is to open the full URL in an iframe on this page:

    http://www.george-hotel.net/guestline

    I presumed this would go under Javascript but I have no idea where to start.

    The form code on page A:

    Code:
    <form name="bookForm" action="https://uk1.roomlynx.net/rezrooms2/loadOBMApplication.action" target="_blank" method="get">
    
    	        <input type="hidden" name="siteId" value="GEORGEHATH" />
    	        <input type="hidden" name="chainAction" value="newAvailabilitySearch"/>	
    	        <input type="hidden" name="request_locale" value="en" />
    
    	        <div class="rowElem">
    	        	<label>Arrival Date</label><span id="arrError"></span>
    	            <input id="arrival" name="arrival" type="text"/>
    	        </div>
    	        
    	        <div class="rowElem clearfix">
    	        	<div class="split">
    		        	<label >Nights</label>
    		            <select name="numberOfNights" id="numberOfNights">
    					    <option value="1" selected="selected">1</option>
    					    <option value="2">2</option>
    					    <option value="3">3</option>
    					    <option value="4">4</option>
    					    <option value="5">5</option>
    					    <option value="6">6</option>
    					    <option value="7">7</option>
    					    <option value="8">8</option>
    					    <option value="9">9</option>
    					    <option value="10">10</option>
    					    <option value="11">11</option>
    					    <option value="12">12</option>
    					    <option value="13">13</option>
    					    <option value="14">14</option>
    					    <option value="15">15</option>
    					    <option value="16">16</option>
    					    <option value="17">17</option>
    					    <option value="18">18</option>
    					    <option value="19">19</option>
    					    <option value="20">20</option>
    					    <option value="21">21</option>
    					    <option value="22">22</option>
    					    <option value="23">23</option>
    					    <option value="24">24</option>
    					    <option value="25">25</option>
    					    <option value="26">26</option>
    					    <option value="27">27</option>
    					    <option value="28">28</option>
    					    <option value="29">29</option>
    					    <option value="30">30</option>
    					</select>
    		        </div>
    		        <div class="split">
    		        	<label>Adults</label>
                        <select name="numberOfPersons">
                            <option value="1">1</option>
                            <option value="2">2</option>
                            <option value="3">3</option>
                            <option value="4">4</option>
                            <option value="5">5</option>
                        </select>
    		        </div>
    	        </div>
    
    	        <div class="rowElem">
    	        	<label>Offer code</label>
    	        	<input type="text" name="offerCode" value="" id="offerCode"/>
    	        </div>
    
    	        <p>
    	            <input type="submit" value="Check availability" />
    	        </p>
    	    </form>
    
    	    <script>
    jQuery(function($){
    		$("#arrival").datepicker({dateFormat: 'dd/mm/yy', minDate: '-0d', autoSize: true});
    		$("#departure").datepicker({dateFormat: 'dd/mm/yy', minDate: '+1d', autoSize: true});
    
    		$("input[type=image]").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());
    		});
    	});
    	</script>
    Iframe code on page B:

    Code:
    <iframe src="https://uk1.roomlynx.net/rezrooms2/loadOBMApplication.action?siteId=GEORGEHATH" name="myiframe" id="myiframe" width="900" height="1500">

  • #2
    Regular Coder hdewantara's Avatar
    Join Date
    Aug 2009
    Location
    Jakarta, Indonesia.
    Posts
    376
    Thanks
    9
    Thanked 55 Times in 54 Posts
    Hi.
    Following idea might seem complicated, but let's see...

    Different from current scheme: document.forms.bookForm of http://www.george-hotel.net/ (page A) doesn't send form directly to https://uk1.roomlynx.net/rezrooms2/l...ication.action, but to http://www.george-hotel.net/guestline/ (page B) instead.

    Page B itself will be just like the current one, except that it now has a hidden form to process those inputs; this form is targetting #myiframe.

    So when received, page B automatically passes inputs to that form and also submits it.
    Last edited by hdewantara; 01-15-2014 at 03:28 PM.

  • #3
    New to the CF scene
    Join Date
    May 2013
    Posts
    8
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Thanks for the reply,
    Do you know any ways I could do this? Javascript etc?

  • #4
    Regular Coder hdewantara's Avatar
    Join Date
    Aug 2009
    Location
    Jakarta, Indonesia.
    Posts
    376
    Thanks
    9
    Thanked 55 Times in 54 Posts
    Yeah I think this should be done via server-side script like PHP. But since we are in javascript forum...
    oh dear, I didn't realize that your site is a Wordpress (WP)! I have no expertise in that... so sorry

    But maybe just some basics and so you may want to develop them further into WP yourself? Following are simpliflied pages for demo (the changes are in RED):

    page-a.html (page A):
    Code:
    <html>
    	<head><title>page A</title></head>
    	<body>
    		<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit...</p>
    	
    		<div id="book">
    			<h3>Book rooms online</h3>
    			<p>Please book with us direct - we guarantee our rates will not be better on any online booking site!</p>
    	
    			<form name="bookForm" action="page-b.html" method="get">
    				<input type="hidden" name="siteId" value="GEORGEHATH" />
    				<input type="hidden" name="chainAction" value="newAvailabilitySearch"/>	
    				<input type="hidden" name="request_locale" value="en" />
    
    				<div class="rowElem">
    					<label>Arrival Date</label><span id="arrError"></span>
    					<input id="arrival" name="arrival" type="text"/>
    				</div>
    				
    				<div class="rowElem clearfix">
    					<div class="split">
    						<label >Nights</label>
    						<select name="numberOfNights" id="numberOfNights">
    							<option value="1" selected="selected">1</option>
    							<option value="2">2</option>
    							<option value="3">3</option>
    							<option value="4">4</option>
    							<option value="5">5</option>
    							<option value="6">6</option>
    							<option value="7">7</option>
    							<option value="8">8</option>
    							<option value="9">9</option>
    							<option value="10">10</option>
    							<option value="11">11</option>
    							<option value="12">12</option>
    							<option value="13">13</option>
    							<option value="14">14</option>
    							<option value="15">15</option>
    							<option value="16">16</option>
    							<option value="17">17</option>
    							<option value="18">18</option>
    							<option value="19">19</option>
    							<option value="20">20</option>
    							<option value="21">21</option>
    							<option value="22">22</option>
    							<option value="23">23</option>
    							<option value="24">24</option>
    							<option value="25">25</option>
    							<option value="26">26</option>
    							<option value="27">27</option>
    							<option value="28">28</option>
    							<option value="29">29</option>
    							<option value="30">30</option>
    						</select>
    					</div>
    					<div class="split">
    						<label>Adults</label>
    						<select name="numberOfPersons">
    							<option value="1">1</option>
    							<option value="2">2</option>
    							<option value="3">3</option>
    							<option value="4">4</option>
    							<option value="5">5</option>
    						</select>
    					</div>
    				</div>
    
    				<div class="rowElem">
    					<label>Offer code</label>
    					<input type="text" name="offerCode" value="" id="offerCode"/>
    				</div>
    
    				<p><input type="submit" value="Check availability" /></p>
    			</form>
    		</div>
    		<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit...</p>		
    	</body>
    </html>
    page-b.html (page B):
    Code:
    <html>
    	<head><title>page B</title></head>
    	<body>
    		<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit...</p>
    		<iframe src="https://uk1.roomlynx.net/rezrooms2/loadOBMApplication.action?siteId=GEORGEHATH" 
    			id="myiframe"	name="myiframe"	width="900" height="1500"/>
    		</iframe>
    		<script type="text/javascript">
    			if (location.search.length > 0) document.getElementById('myiframe').src = 
    				'https://uk1.roomlynx.net/rezrooms2/loadOBMApplication.action' + location.search;
    		</script>
    		<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit...</p>
    	</body>
    </html>

  • Users who have thanked hdewantara for this post:

    tstwebdesign (01-16-2014)

  • #5
    New to the CF scene
    Join Date
    May 2013
    Posts
    8
    Thanks
    1
    Thanked 0 Times in 0 Posts
    You're a massive star!

    Fixed


  •  

    Tags for this Thread

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •