Set value of hidden input inside a form inside a iframe from the main page on same domain

I have a page called customer-details where there is a input field whose value is the customer name. Its NOT in a form. here is the input

<input id="custname" name="custname" type="hidden" value="John Doe" />

Open in new window


and now on the same page I have iframe which contain a form. This form contains a hidden input called customer-name whose value needs to the value of custname. The iframe has  id called "iFrame1"

and the form

<form class="form-cust" id="formContainer" action="/test.php" enctype="multipart/form-data" method="POST" novalidate="novalidate" data-form="manual_iframe">
   <div class="item-alignment-left" id="submit-button-div">
    <input class="button-special" id="submit-button" type="submit" data-regular="" value="Submit" />
  </div>
  <input name="customer-name" id="customer-name" type="hidden" value="default value" />
</form>

Open in new window


What's the most effect way to achieve this. Any example or reference is appreciated

Thanks
LVL 2
niceoneishereAsked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

Chris StanyonWebDevCommented:
Have a look at this - it'll need to go in the main page - not the iFrame page:

$(document).ready(function() {
    $('#iFrame1').contents().find('#customer-name').val( $('#custname').val() );
});

Open in new window

0
niceoneishereAuthor Commented:
Thanks for reply but does not work. its not setting the value.
0
Chris StanyonWebDevCommented:
OK. Not really enough info there to be helpful. If you have a link to a page where we can see this in action, I'm sure we can figure out what's wrong.

Have you added the jQuery library to your document?
0
Ultimate Tool Kit for Technology Solution Provider

Broken down into practical pointers and step-by-step instructions, the IT Service Excellence Tool Kit delivers expert advice for technology solution providers. Get your free copy now.

niceoneishereAuthor Commented:
Thanks again, can I send a private message with my site info.
0
Chris StanyonWebDevCommented:
Yeah sure.
0
niceoneishereAuthor Commented:
Thanks PM sent
0
Chris StanyonWebDevCommented:
Right - the hidden input in the iFrame doesn't have an ID - it just has a name. You need to add the ID that matches your jQuery, such as:

<input type="hidden" name="customer-name" id="customer-name">

Open in new window


You're also getting an error about the $ not being defined - this can happen if you've re-assigned the standard jQuery $ to something else. If that's the case, then you'll need to change the jQuery to use whatever you've assigned it to.
0
niceoneishereAuthor Commented:
Thanks for looking into to it. I added the id for the hidden input customer-name but I am not sure how to find the jQuery $ assigned
0
Chris StanyonWebDevCommented:
Probably easiest to just use the full named jQuery reference rather than the shorthand $.

Change your code to the following:

jQuery(document).ready(function($) {
    $('#fb_iframe').contents().find('#customer-name').val( $('#custname').val() );
})

Open in new window

0
niceoneishereAuthor Commented:
nope that help. I checked in chrome and it says now jQuery is undefined. Appreciate it
0
niceoneishereAuthor Commented:
I got the undefined error fixed but if you upload a image and hit submit, you will see that the customer name is not getting passed Thanks again
0
Chris StanyonWebDevCommented:
Worked fine for me:

HTML of the form fields
Result of the form submit
0
niceoneishereAuthor Commented:
Hmm strange its not working me. I tried it in firefox and chrome. What am I doing wrong :( here my results

html
results
0
Chris StanyonWebDevCommented:
Not sure. I would make sure you've cleared down your cache and check there are no errors showing up in the console.
0
niceoneishereAuthor Commented:
hmmm very strange I even tried in 2 different computers and same result :(
0
Chris StanyonWebDevCommented:
Yeah - I've just tried it on a different computer and it didn't work. Not sure if your document.ready block is firing or not.

One possibility is that the document.ready block is being fired when the main document is ready, but before the iFrame content is ready - this would mean that the input inside the iFrame isn't available when the jQuery code fires.

As a test, add an simple console.log line into the document ready block to make sure it's being fired. Something like this:

<script type="text/javascript">
$(document).ready(function($) {
   $('#fb_iframe').contents().find('#customer-name').val( $('#custname').val() );
   console.log( $('#custname').val() );
});
</script>

Open in new window


If the doc.ready block is being fired, you'll see John Doe being output to the console, which would confirm my suspicions that it's being fired too early.

If that is the case, we'll need to find another solution.
0
niceoneishereAuthor Commented:
Wow thanks for looking into it again, and yes its being fired too early as the console returns John Doe. I wondering if there is way to grab the main page value from the iframe like the iframe is ready or onload grab the value

Thanks
0
Chris StanyonWebDevCommented:
Right - you're going to need to delay the code until the iFrame is loaded. Give this a whirl (haven't tested it but should be OK)

$(document).ready(function () {
   // Wait until the iframe is loaded
   $('#fb_iframe').load(function () { 
      $('#fb_iframe').contents().find('#customer-name').val( $('#custname').val() );
   });
});

Open in new window

0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
niceoneishereAuthor Commented:
Just Freaking Brilliant :) Thanks a bunch
0
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
JavaScript

From novice to tech pro — start learning today.

Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.