Append iframe src URL with form input

Question

I've found a couple of posts that do parts of what i need to achieve but I can't quite connect the dots to make it work so I'm hoping you can help.

I want to dynamically change the src url of an iframe within a page based on the user inputs within a form on a previous page i.e. I have a search widget within the sidebar of my wordpress pages and I want the values from the form to append to a base url in the iframe src.

So my form code looks like this:

<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>

and the script in the header of the pages which just works the 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());
            });
  });

so this results in the correct variable being passed in the url to the /book-a-room/ page e.g.:

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

What i want to achieve is for the src url of the iframe in /book-a-room/ to have a set base URL e.g. mydomain.com and then have the form outputs appended as per the main page so:

<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>

What I'd like help with is what script to add to /book-a-room/ and then what to change the html iframe code to so it pulls in the variable.

Thank you so much in advance :0)

You want to set http://domain.com/book-a-room/?chainAction=newAvailabilitySearch&arrival=29%2F10%2F2013&departure=3&numberOfPersons=2&numberOfChildren=0 as iframe's src? — MahanGM
– MahanGM, Commented Oct 24, 2013 at 15:37
no i want to set the iframe src as externaldomain.com&request_locale=en&arrival=29%2F10%2F… - I have a base url from a third party site to pull into the iframe and i need to pass the parameters from the form tagged to that url which are the bits that start arrival= in the example above — user2916162
– user2916162, Commented Oct 24, 2013 at 16:10

MahanGM · Accepted Answer · 2013-10-29 22:14:48Z

1

You need to add an id for your iframe and your two drop downs. Then you can populate all of them and then change iframe's attribute.

$("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();
                }
            });
  });

There is a e.preventDefault() which makes your form to not being posted.

edited Oct 29, 2013 at 22:14

answered Oct 24, 2013 at 16:35

MahanGM

2,3925 gold badges32 silver badges48 bronze badges

Sign up to request clarification or add additional context in comments.

7 Comments

user2916162 Over a year ago

Thanks so very much for taking the time MahanGM I'll give that a go :) what code do i need to put in the actual iframe tag within the /book-a-room/ page apart from adding the id?

MahanGM Over a year ago

You can't add anything to iframe contents. iframe is able to load the given source path.

user2916162 Over a year ago

Ahhhh ok so it would just be <iframe id="example" class="noScrolling" scrolling-x="no"></iframe> and add the id to replace iframe_id ...and then do you mean just add an id attribute to the select fields in the html form - sorry for all the questions i very much appreciate your time

user2916162 Over a year ago

scrap that question re the select fields - i understand

MahanGM Over a year ago

@user2916162 Yes. Add id attributes for iframe and select fields and then you're good to go.

|

Collectives™ on Stack Overflow

Append iframe src URL with form input

1 Answer 1

7 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

7 Comments

Your Answer

Sign up or log in

Post as a guest

Related