How To Populate Values In Div Tag

[amitamberker]

Hello Everyone, Please find the attached "Populate Values in DIV Tag.html" file. In the My Details segment, upon clicking on the "Populate Values" button, the DIV below the button which says "My home location is: My preferred location is:" should populate the values of the selected radio buttons of the "Preferred" and "Home" locations respectively. Could you please tell me how do I do it? By the way, Myself and Krewe tested the page using a HTML validator from http://validator.w3.org/ and fixed most of the typos (errors). We saw the following message: "This document was successfully checked as XHTML 1.0 Transitional!" But however, in the "Result:" section, it said "Passed, 1 warning(s)". So, how do I fix this 1 warning(s)?

[thescientist]

since I don't see any javascript code in that link, it seems fair to ask, do you know any javascript? If you don't then at the minimum you need to learn about variables and functions, event handlers, and basic DOM methods to get references to elements on the page so that you act upon them. If you do, please show us what you've tried and be specific about the what you are having problems with via code samples of your work. As for the validation error, can you at least tell us what the error is?

[Krewe]

since I don't see any javascript code in that link, it seems fair to ask, do you know any javascript? If you don't then at the minimum you need to learn about variables and functions, event handlers, and basic DOM methods to get references to elements on the page so that you act upon them. If you do, please show us what you've tried and be specific about the what you are having problems with via code samples of your work. As for the validation error, can you at least tell us what the error is?

The Validation Error was fixed last night.

[amitamberker]

Hi thescientist,

it seems fair to ask, do you know any javascript?

Well, I have the basic hacking knowledge of javascript. This forum is not allowing me to attached the "Report.png" file and hence I have uploaded the file on MEGAUPLOAD domain. Please click www.megaupload.com/?d=HQYKJC4V to see what the error is. I have marked "1 warning(s)" with a Red Color border. By the way, I would suggest you to open that .png file from your MS Paint instead of default image viewer.Hi Krewe,

The Validation Error was fixed last night.

Yes, we had fix the validation errors. thescientist is asking about "1 warning(s)" error

[Krewe]

Hi thescientist, Well, I have the basic hacking knowledge of javascript. This forum is not allowing me to attached the "Report.png" file and hence I have uploaded the file on MEGAUPLOAD domain. Please click www.megaupload.com/?d=HQYKJC4V to see what the error is. I have marked "1 warning(s)" with a Red Color border. By the way, I would suggest you to open that .png file from your MS Paint instead of default image viewer. Hi Krewe, Yes, we had fix the validation errors. thescientist is asking about "1 warning(s)" error

I did some research on the Warning and it is a very common warning that validators give that commonly show up. Scientist if you know how to fix it would be appreciated. Here is the warning... "Using Direct Input mode: UTF-8 character encoding assumed

Unlike the “by URI” and “by File Upload” modes, the “Direct Input” mode of the validator provides validated content in the form of characters pasted or typed in the validator's form field. This will automatically make the data UTF-8, and therefore the validator does not need to determine the character encoding of your document, and will ignore any charset information specified.

[/left]

If you notice a discrepancy in detected character encoding between the “Direct Input” mode and other validator modes, this is likely to be the reason. It is neither a bug in the validator, nor in your document."

[/left][/left]

~Krewe

[/left]

[Ingolme]

That's not a real warning, it's a notice. It just means that when you put code directly into the validator instead of linking to a page, it doesn't know what character set you want to use. You can ignore that message.

[amitamberker]

Okie. Then let's keep the "1 warning(s)" error issue aside and focus on the main part. Like I said, in the My Details segment, upon clicking on the "Populate Values" button, the DIV below the button which says "My home location is: My preferred location is:" should populate the values of the selected radio buttons of the "Preferred" and "Home" locations respectively. Please tell me how do I do it? Kindly provide the code for it. I have attached the HTML file in the very 1st posting on this thread. FYI - I need to submit it ASAP. I thought JustSomeGuy would pop-up here but still he hasn’t come over here.Please help.

[amitamberker]

Please help. I have to submit this ASAP...Thanks!

[Ingolme]

Can you post some Javascript code here? There's not much to it.You just need to find the right event, then access the values of the elements, using functions like getElementById() and getElementsByTagName(), then changing the innerHTML of the target element.

[thescientist]

Please tell me how do I do it? Kindly provide the code for it. I have attached the HTML file in the very 1st posting on this thread. FYI - I need to submit it ASAP. I thought JustSomeGuy would pop-up here but still he hasn’t come over here. Please help.

We've already told you the basics to achieve your goal. Just because you are in a time crunch, it shouldn't make us more culpable for your success. You haven't even shown us an attempt writing some javascript, and a "hacking" knowledge of javascript doesn't convince me that you've really taken the time to try and learn any of the basics that the tutorials would explain to you, which would have been all you needed to at least have something to show. when you have some code, then we'll be able to help you.

[amitamberker]

Hi Ingolme and thescientist,Please let me know which one should I refer from the following link:http://www.w3schools.com/js/default.aspthescientist,Thank you for understanding that I am in a time crunch but certainly I am not making you more culpable for my success. The reason why I haven't even shown you an attempt writing some javascript is because, I don't know about how to write a javascript. Yes, I have a "hacking" knowledge of javascript if I could get reference. If you could show me an template or perhaps a suitable link from the above link, I can hack and try to do something. I have no idea how to have some code but I know how to modify the code.Please provide some reference or template or code.Please help...Hi Krewe,Did you see how thescientist is blaming me in public? I think it's bad. I think thescientist should not have said like that. But anyways. No worries. I am hear to learn.

[Ingolme]

You need to read the whole tutorial, not just any specific part of it. Learn to manage Javascript. Learn what variables, functions and event handlers are.

[amitamberker]

Hi Ingolme,Okie, for sure I will do that. But the priority is to complete the My Details segment. I wanted to know about upon clicking on the "Populate Values" button, the DIV below the button which says "My home location is: My preferred location is:" should populate the values of the selected radio buttons of the "Preferred" and "Home" locations respectively. I guess, perhaps I may have to visit some other forum to get some help. Anyways, no worries. Thanks a lot Ingolme.

[Ingolme]

You just described something that can be turned into code:When you click the Populate Values button, the DIV below the button should populate the values of the selected radio buttons of the "Preferred" and "Home" locations. So what you need to do is use an onclick event that fires when the Populate Values button is clicked. That event will trigger a function that reads the values of "Preferred" and "Home" radio buttons, and places that into the DIV below the button. You must learn how to use use getElementById() and the getElementsByTagName() to access the Populate Values button, the Preferred and Home inputs, and the DIV below the button. Use the innerHTML property to modify the content of that DIV.

[ShadowMage]

Did you see how thescientist is blaming me in public? I think it's bad. I think thescientist should not have said like that. But anyways. No worries. I am hear to learn.

scientist was not "blaming" you for anything. He was merely trying to get you to try and write something yourself first. We are here to help people learn how to script, not write script for them.I think it's bad that you call him out on it in public, especially when it's "behind his back" and you're speaking to somebody else about it.

I guess, perhaps I may have to visit some other forum to get some help.

Only if you're looking for someone to write the code for you...As I mentioned, we're here to help you learn how to do it on your own.

[thescientist]

Did you see how thescientist is blaming me in public? I think it's bad. I think thescientist should not have said like that. But anyways. No worries. I am hear to learn.

I'm trying to motivate you to do something. This isn't the first thread of yours lamenting the fact that you are in a time crunch for a respective task. Yes programming takes time, and yes it takes practice. But you have to do it to get better at it. All you have to do is try, and just show us something. We are more than happy to help you once you've got something to show us, which is all the incentive we need around here. We won't just give it to you. FYI, the more active members here have jobs/families/school etc that occupy a majority of their time to begin with, let alone needing free time for them/us to unwind from having said families/jobs/school etc. We are fortunate to have time to help people like yourself who are looking for help, but we took great time in our own lives to get to this point, and it's only fair that people help themselves help us if they want help. I don't think it's too much to ask for you to make an attempt when you came to this forum looking for help.

[amitamberker]

Hi Ingolme,Ah! Finally I am getting some hints and clues. Thanks a lot Ingolme. Here I go:

So what you need to do is use an onclick event that fires when the Populate Values button is clicked

So, something like this?<div class="populate"><input type="submit" name="submit" value="Populate Values" onclick="document.getElementById('Preferred')" onclick="document.getElementById('Preferred')" /></div>

[amitamberker]

Hi Ingolme, Do I need to add the following code between <head></head> ?

<script type="text/javascript">function changeLink(){document.getElementById('Home').innerHTML="Home";document.getElementById('Preferred').innerHTML="Preferred";}</script>

[amitamberker]

Hi Ingolme, <div class="pick">Home Location<br /><input type="radio" name="homelocation" value="india" id="What should I type here?" /> India<br /><input type="radio" name="homelocation" value="usa" id="What should I type here?" /> USA</div>----------------------------------------<div class="preferred_location"><div class="pick">Preferred Location<br /><input type="radio" name="preferredlocation" value="india" id="What should I type here?" /> India<br /><input type="radio" name="preferredlocation" value="usa" id="What should I type here?" /> USA</div></div> ---------------------------------------- <div class="PopulateResult" Do I need to put some kind of code here?>My home location is: My preferred location is:</div>

[thescientist]

excellent, now you are getting somewhere. So you are almost there on event handlers. What you should have it do is call a function. The function does what you define it to do. In this case, you will want to get the value/innerHTML of two elements, and the set the value/innerHTML of two other elements. To do this, you use document.getElementById. if you are using input elements to get the value, then you need to do

var value1 = document.getElementById('source_elements_id_here').value, //otherwise, you would use innerHTML for a non input element.

Now that you can get the values, you need to do the same thing to the elements who's value's you want to set/update/change, except that line would look like this

document.getElementById('target_elements_id_here').value = value1; 

Again, note that if you are setting the text of an input element, use value, otherwise use innerHTML.

[amitamberker]

Hi thescientist, I apologize. Okie? No hard feelings... Hi ShadowMage, I have apologized thescientist for calling him out on it in public. Okie? I know, you all are here to help members like me to learn how to do it on our own.Hi JustSomeGuy and Krewe,Where are you?

[amitamberker]

excellent, now you are getting somewhere. So you are almost there on event handlers. What you should have it do is call a function. The function does what you define it to do. In this case, you will want to get the value/innerHTML of two elements, and the set the value/innerHTML of two other elements. To do this, you use document.getElementById. if you are using input elements to get the value, then you need to do

var value1 = document.getElementById('source_elements_id_here').value, //otherwise, you would use innerHTML for a non input element.

Now that you can get the values, you need to do the same thing to the elements who's value's you want to set/update/change, except that line would look like this

document.getElementById('target_elements_id_here').value = value1;

Again, note that if you are setting the text of an input element, use value, otherwise use innerHTML.

Hi thescientist,Could you please explain this once again in a more easier way? Kinda I am feeling it difficult to understand it.1. Where should I use "document.getElementById."2. Where do I need to put "var value1 = document.getElementById('source_elements_id_here')."3. Should I put this "document.getElementById('target_elements_id_here').value = value1;" in:<div class="PopulateResult" document.getElementById('target_elements_id_here').value = value1;>My home location is: My preferred location is:</div>

[amitamberker]

Hi thescientist,

To do this, you use document.getElementById. if you are using input elements to get the value, then you need to dovar value1 = document.getElementById('source_elements_id_here').value,

Like this?<script type="text/javascript">function changeLink(){var value1 = document.getElementById('Home').value,var value1 = document.getElementById('Preferred').value,}</script>

[thescientist]

Hi thescientist, Like this? <script type="text/javascript">function changeLink(){var value1 = document.getElementById('Home').value,var value1 = document.getElementById('Preferred').value,}</script>

almost. you don't want to use the same variable name twice, because then the new value will overwrite the first value. keep the names distinct. another consideration is to alert/log these values to make sure they are what you expect them to be before you use them in your code. It's a simple sanity check to make sure one step is working before moving onto the next step.

[amitamberker]

Hi thescientist,So, what do I need to do now?<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>Test</title><script type="text/javascript">function changeLink(){var value1 = document.getElementById('Home').value,var value2 = document.getElementById('Preferred').value,}</script></head><body>Home<br /><br /><input type="radio" name="homelocation" value="usa" id="homeindia" /> India<br /><input type="radio" name="homelocation" value="usa" id="homeusa" /> USA<br /><br /><div I think, I need to put some code here so that when I click "Populate Values", the selected radio would display in this DIV.></div><br /><button onclick="document.getElementById('homeindia').value=document.getElementById('homeusa').value">Populate Values</button></body></html>