Jump to content

How To Populate Values In Div Tag


amitamberker

Recommended Posts

Hi Ingolme, Is this better now?

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR...ransitional.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 />
(Forum is not allowing me add the rest of the codes between Quote tag. I am getting an alert message as "The number of opening quote tags does not match the number of closing quote tags.") <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>
Link to comment
Share on other sites

  • Replies 93
  • Created
  • Last Reply

The div where you want to put the selected radio's value does not need any special code. It only needs an id attribute so that you can get a reference to it with JavaScript. Your onclick handler for the button should be calling the changeLink() function instead of the raw code you have in there. That's the point of creating the function. Getting the value of a selected radio is a little tricky. You'll need to use getElementsByName to get a list of the radio buttons you want to check. You'll then have to loop through them all and check their checked property. Try putting this loop together on your own first and if you can't figure it out I'll show you what it should look like.

Link to comment
Share on other sites

Just give the form a id ref

<form id="MyForm" action="..." class="Form-WidthandInline">

and then loop through all the form elements using that id reference, and .elements

  var obj= document.getElementById("MyForm");    for(i=0;i<obj.elements.length;i++) { }

then use if condition to find element with specific name and if it has been checked within that loop

 if(obj.elements[i].name =='homelocation' && obj.elements[i].checked == true)

if found and checked, get its value, store it and at the end insert into wherever, using .innerHTML

Link to comment
Share on other sites

The div where you want to put the selected radio's value does not need any special code. It only needs an id attribute so that you can get a reference to it with JavaScript. Your onclick handler for the button should be calling the changeLink() function instead of the raw code you have in there. That's the point of creating the function. Getting the value of a selected radio is a little tricky. You'll need to use getElementsByName to get a list of the radio buttons you want to check. You'll then have to loop through them all and check their checked property. Try putting this loop together on your own first and if you can't figure it out I'll show you what it should look like.
Hi ShadowMage, Like this? <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR...ransitional.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 value1 = document.getElementById('Preferred').value,}</script><script type="text/javascript">var i=0;for (i=0;i<=5;i++){document.write("india");document.write("usa");}</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 id="shadowmage"></div><br /><button changeLink() function="..." >Populate Values</button></body></html>
Link to comment
Share on other sites

Just give the form a id ref
<form id="MyForm" action="..." class="Form-WidthandInline">

and then loop through all the form elements using that id reference, and .elements

  var obj= document.getElementById("MyForm"); 	for(i=0;i<obj.elements.length;i++)  { }

then use if condition to find element with specific name and if it has been checked within that loop

 if(obj.elements[i].name =='homelocation' && obj.elements[i].checked == true)

if found and checked, get its value, store it and at the end insert into wherever, using .innerHTML

Hi dsonesuk, My plate is indeed very full now. Please be patient with me. We can discuss about this later.Thank you.
Link to comment
Share on other sites

Why did you remove the onclick from your button? All I told you to do was change it so that it calls the changeLink function. You had this: <button onclick="document.getElementById('homeindia').value=document.getElementById('homeusa').value">Populate Values</button> which was correct as far as syntax is concerned. You set the value of the onclick handler to the code bolded above. What you really want in there is a call to your changeLink function: <button onclick="changeLink()">Populate Values</button> As for the loop, it needs to go inside the changeLink function (replacing the code you have in there now). You also have not used the getElementsByName method I linked before to get a list of your radio buttons to check. You need to loop through each radio (the tutorial on looping that I linked in my last post shows you how to loop through an array; the getElementsByName method returns a NodeList which works the same way as an array in terms of looping through it), check if its checked (with the checked property), if it is you need to get its value and put it into the target div (using getElementById to get the reference to the div and then modify it's innerHTML).I'm not convinced that you put a serious effort into trying to write the loop as the only thing you've included in the loop are two document.write statements that print out a pair of static strings. I'm not going to just throw the code at you without knowing that you made a sincere effort to do it yourself first.

Link to comment
Share on other sites

OK, this needs to be organized a bit. Getting the values of checkboxes and radio buttons is a little bit more complicated than for other form elements. First, we need to find all your radio buttons. For this, we should put each group of radio buttons into its own container and give that container an ID so that it is easy to select.

<div id="home_select">  Home Location<br />  <input type="radio" name="homelocation" value="india" /> India<br />  <input type="radio" name="homelocation" value="usa" /> USA</div><div id="preferred_select">  Preferred Location<br />  <input type="radio" name="preferredlocation" value="india" /> India<br />  <input type="radio" name="preferredlocation" value="usa" /> USA</div>

We need to follow the same procedure for both of those sets of radio buttons. Since all of this occurrs after the button was clicked, it should all be inside the changeLink() function.I don't know if you're going to understand this properly. We will first access the <div> element, and then will will get every single <input> element that belongs to it into a NodeList.

  1. Getting a reference to the <div>: document.getElementById("home_select")
  2. Accessing the elements inside that element: [reference to that div element].getElementsByTagName("input")
  3. Loop through each of those elements, then look at which one's checked property is true.

When you hear the word "loop" it refers to either for() or while(). For() is the most comfortable one to use for arrays and node lists.Note: The var keyword is used when a variable has not yet been seen in the code, or if it hasn't yet existed in the function.

var i;var radios = [Following steps 1 and 2, get the radio buttons and put it here]; var homeValue; // Declare this variable so that we can give it a value in the loop.for(i = 0; i < radios.length; i++) {  // i is 0 before the loop begins  // As long as i is less than the amount of radio buttons there are,  // run the code in this loop again and add 1 to i. (i++ is the same as i = i + 1 )   if(radios[i].checked) {    // If the radio button number "i" of the list has been checked    // then use the value of that radio button, this is the value we're going to use    homeValue = radios[i].value;    // We already have the value, so let's leave the loop    break;  }}

For the second loop, we don't need to use var for i or radios because the variables were declared earlier

 radios = [Following steps 1 and 2, get the radio buttons of the PREFERRED div and put it here];var preferredValue; // Declare this variable so that we can give it a value in the loop.for(i = 0; i < radios.length; i++) { ...  // The rest of the code is the same except for this:  preferredValue = radios[i].value;   // And from here on it's also the same  ...}

Finally, we need to put these values into the <div> element that you want to populate. To access this div, we will give it an ID:

<div id="PopulateResult">Output will go here</div>

Remember that all this code is still inside the changeLink() function:

// We're using "var" again because "outputString" doesn't exist yetvar outputString = "My home location is: "; // The += operator is the same as saying	  outputString = outputString + "text"// We don't use "var" in this line because it was declared just beforeoutputString += homeValue;outputString += " My preferred location is: ";outputString += preferredValue; // Now lets put the string into the <div> element.// We will access the div element using getElementById()var divElement = document.getElementById("PopulateValues"); // InnerHTML means everything that's inside the div. We use it to set the text that it contains.divElement.innerHTML = outputString;

Link to comment
Share on other sites

WOW! WOW!... So much of things... So much of codes... WOW! WOW!... :facepalm:

Link to comment
Share on other sites

shorter version

function changeLink(){    var obj= document.getElementById("MyForm");var joinstring = "";    for(i=0;i<obj.elements.length;i++)        {        if(obj.elements[i].name =='homelocation' && obj.elements[i].checked == true)        {        joinstring+= 'My home location is: '+obj.elements[i].value;        }        if(obj.elements[i].type=="radio" && obj.elements[i].name =='preferredlocation' && obj.elements[i].checked == true)        {        joinstring+= ' My preferred location is: '+obj.elements[i].value;        }        }        document.getElementById("PopulateResult").innerHTML=joinstring;}

altogether

<!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>Untitled Document</title><script type="text/javascript">/*<![CDATA[*//*---->*/function changeLink(){    var obj= document.getElementById("MyForm");var joinstring = "";    for(i=0;i<obj.elements.length;i++)        {        if(obj.elements[i].name =='homelocation' && obj.elements[i].checked == true)        {        joinstring+= 'My home location is: '+obj.elements[i].value;        }        if(obj.elements[i].type=="radio" && obj.elements[i].name =='preferredlocation' && obj.elements[i].checked == true)        {        joinstring+= ' My preferred location is: '+obj.elements[i].value;        }        }        document.getElementById("PopulateResult").innerHTML=joinstring;}/*--*//*]]>*/</script><style type="text/css"></style></head><body><div class="MD">My Details</div><form id="MyForm" action="..." class="Form-WidthandInline"><div class="content"><div class="wrapper">			    <div class="MDText">Name:</div>			    <div class="MDText">E-Mail:</div>			    <div class="MDText">Password:</div>	    </div>	    <div class="input">			    <div class="TextBoxHeight"><input type="text" name="name" id="name" /></div>			    <div class="TextBoxHeight"><input type="text" name="email" id="email" /></div>			    <div class="TextBoxHeight"><input type="password" name="password" id="password" /></div>	    </div>	    <div class="LocationBox">			    <div class="home_location">					    <div class="pick">						 Home Location<br />					    <input type="radio" name="homelocation" value="india" /> India<br />					    <input type="radio" name="homelocation" value="usa" /> USA					    </div>			    </div>			    <div class="preferred_location">					    <div class="pick">						 Preferred Location<br />					    <input type="radio" name="preferredlocation" value="india" /> India<br />					    <input type="radio" name="preferredlocation" value="usa" /> USA					    </div>			    </div>							   			    <div class="submit">					    <div class="populate"><!--<input type="submit" name="submit" value="Populate Values"/>--><button onclick="changeLink(); return false;">Populate Values</button></div>			    </div>	    <div class="value">		 <div id="PopulateResult">			    My home location is:   My preferred location is: 			    </div>	    </div>	    </div></div></form></div>		</body></html> 

Link to comment
Share on other sites

WOW! WOW!... So much of things... So much of codes... WOW! WOW!... :facepalm:
My post is only long because I'm trying to explain everything that's in the tutorials. Every bit of information you need to understand what needs to be done is in my post, if you're not able to make the script yet, you aren't making an effort to learn.
Link to comment
Share on other sites

Hi Ingolme,

My post is only long because I'm trying to explain everything that's in the tutorials. Every bit of information you need to understand what needs to be done is in my post, if you're not able to make the script yet, you aren't making an effort to learn.
I know you are trying to explain me everything in detail to make me understand What, How, Where, Why etc. Please do not think as I am not making an effort to learn. Indeed I am making an effort to learn but it's taking a long time. Like I said some time ago, I have the hacking knowledge but not the writing knowledge. Trust me, I am trying my best to make the script and indeed I am learning a lot. I will post a HTML file shortly. Hi dsonesuk, Thanks a lot for your help! By the way, members in this forum had decide to teach me and I was willing to learn. ShadowMage had clearly mention that he was not convinced that I am putting a serious effort and he will not going to just throw the code at me without knowing that I am making a sincere effort to do it myself. I think perhaps you got convinced with me and understood that I am putting a serious effort. Thanks a lot dsonesuk. I will post a HTML file shortly. Hi ShadowMage, I wanted to convenience you but dsonesuk got convinced. I will post a HTML file shortly.
Link to comment
Share on other sites

As per Ingolme:we should put each group of radio buttons into its own container and give that container an ID so that it is easy to select. <div id="home_select">Home Location<br /><input type="radio" name="homelocation" value="india" /> India<br /><input type="radio" name="homelocation" value="usa" /> USA</div><div id="preferred_select">Preferred Location<br /><input type="radio" name="preferredlocation" value="india" /> India<br /><input type="radio" name="preferredlocation" value="usa" /> USA</div>But dsonesuk's version shows: <div class="LocationBox"><div class="home_location"><div class="pick">Home Location<br /><input type="radio" name="homelocation" value="india" /> India<br /><input type="radio" name="homelocation" value="usa" /> USA</div></div><div class="preferred_location"><div class="pick">Preferred Location<br /><input type="radio" name="preferredlocation" value="india" /> India<br /><input type="radio" name="preferredlocation" value="usa" /> USA</div>

Link to comment
Share on other sites

Because I was thinking long term, if you wish to check the other form elements which are child form elements of the form with id="MyForm" you could use the same script to search through those elements, Ingolme solution only targets two specific child form elements, which you have to add extra html, extra js to achieve the same result.

Link to comment
Share on other sites

Oh! So, which one is more suitable? dsonesuk's version or Ingolme's version ? Which one should I use?

Link to comment
Share on other sites

Ingolme's version is a more specific, targeted approach, where it will only work for this situation. These types of approaches are generally easier to implement "out of the box" but are not very scalable (ie, if you need to add more radio's later, it's a lot more work). dsonesuk uses a generalized approach which allows for greater scalability, making it the better choice if you plan on adding more content in the future. The difference is that an ID can only be applied to a single element, so Ingolme's approach would require you to get a reference manually (ie, use getElementById for each one) for every element you need to loop through. A class can be applied to multiple elements, so you could get a reference to all of them with one call (to getElementsByClassName) and loop through each one.

Link to comment
Share on other sites

Okie, I am using dsonesuk's version for now. Please find the attached "dsonesuk_version.html" file.1. When I click "Populate Values" button, it's taking me to the folder where I have kept dsonesuk_version.html file.2. Do I need to give a class="" for Populate Values? Or style="display:inline;"?Hi ShadowMage,For sure I will try your version as well sometime later to learn.

Link to comment
Share on other sites

Ingolme's version is a more specific, targeted approach, where it will only work for this situation. These types of approaches are generally easier to implement "out of the box" but are not very scalable (ie, if you need to add more radio's later, it's a lot more work). dsonesuk uses a generalized approach which allows for greater scalability, making it the better choice if you plan on adding more content in the future. The difference is that an ID can only be applied to a single element, so Ingolme's approach would require you to get a reference manually (ie, use getElementById for each one) for every element you need to loop through. A class can be applied to multiple elements, so you could get a reference to all of them with one call (to getElementsByClassName) and loop through each one.
Hi ShadowMage,Thanks a lot for the info. Then maybe I should use Ingolme's version considering:- More Specific- Targeted Approach- Where it will only work for This Kind of Situation- Easier to Implement
Link to comment
Share on other sites

The button without return false, is treated as a submit button and will clear all values and redirect to "..." when clicked. You either have to create a second button for submitting the form, Or update the home & preferred when the actual radio button are clicked see below.

<!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>Untitled Document</title><script type="text/javascript">/*<![CDATA[*//*---->*/function changeLink(){var obj= document.getElementById("MyForm");var joinstring = "";for(i=0;i<obj.elements.length;i++)  {  if(obj.elements[i].name =='homelocation' && obj.elements[i].checked == true)  {  joinstring+= 'My home location is: '+obj.elements[i].value;  }  if(obj.elements[i].type=="radio" && obj.elements[i].name =='preferredlocation' && obj.elements[i].checked == true)  {  joinstring+= ' My preferred location is: '+obj.elements[i].value;  }  }  document.getElementById("PopulateResult").innerHTML=joinstring;}/*--*//*]]>*/</script><style type="text/css"></style></head><body><div class="MD">My Details</div><form id="MyForm" action="#" class="Form-WidthandInline"><div class="content"><div class="wrapper">			    <div class="MDText">Name:</div>			    <div class="MDText">E-Mail:</div>			    <div class="MDText">Password:</div>	    </div>	    <div class="input">			    <div class="TextBoxHeight"><input type="text" name="name" id="name" /></div>			    <div class="TextBoxHeight"><input type="text" name="email" id="email" /></div>			    <div class="TextBoxHeight"><input type="password" name="password" id="password" /></div>	    </div>	    <div class="LocationBox">			    <div class="home_location">					    <div class="pick">						 Home Location<br />					    <input type="radio" name="homelocation" value="india" onclick="changeLink();" /> India<br />					    <input type="radio" name="homelocation" value="usa" onclick="changeLink();" /> USA					    </div>			    </div>			    <div class="preferred_location">					    <div class="pick">						 Preferred Location<br />					    <input type="radio" name="preferredlocation" value="india" onclick="changeLink();" /> India<br />					    <input type="radio" name="preferredlocation" value="usa" onclick="changeLink();" /> USA					    </div>			    </div>							   			    <div class="submit">					    <div class="populate"><!--<input type="submit" name="submit" value="Populate Values"/>--><button>Submit</button></div>			    </div>	    <div class="value">		 <div id="PopulateResult">			    My home location is:   My preferred location is: 			    </div>	    </div>	    </div></div></form></div></body></html>

Link to comment
Share on other sites

Unless this applies to you:ShadowMage, on 14 December 2011 - 09:33 PM, said:dsonesuk uses a generalized approach which allows for greater scalability, making it the better choice if you plan on adding more content in the future.
Hi ShadowMage,It depends upon the requirements > clients > employers. Like I said, I will go-ahead with dsonesuk's version for now since I am already very late. But however, for sure I will try Ingolme's version to learn it sometime later. I hope you understand.
Link to comment
Share on other sites

Hi dsonesuk,

The button without return false, is treated as a submit button and will clear all values and redirect to "..." when clicked. You either have to create a second button for submitting the form, Or update the home & preferred when the actual radio button are clicked see below.
Please find the attached updated version of "dsonesuk_version_02.html" file.1. I do not want the button to be treated as a submit button2. I have retained it as - <button onclick="changeLink(); return false;">PopulateValue</button>3. No No No... I do not want to create a second button for submitting the form.4. So, how do I update the home & preferred when the actual radio button are selected?By the way indeed I am learning so many things...
Link to comment
Share on other sites

Hi Ingolme, Please find the attached "Ingolme_version.html" file.

OK, this needs to be organized a bit. Getting the values of checkboxes and radio buttons is a little bit more complicated than for other form elements. First, we need to find all your radio buttons. For this, we should put each group of radio buttons into its own container and give that container an ID so that it is easy to select.
<div id="home_select">  Home Location<br />  <input type="radio" name="homelocation" value="india" /> India<br />  <input type="radio" name="homelocation" value="usa" /> USA</div><div id="preferred_select">  Preferred Location<br />  <input type="radio" name="preferredlocation" value="india" /> India<br />  <input type="radio" name="preferredlocation" value="usa" /> USA</div>

We need to follow the same procedure for both of those sets of radio buttons. Since all of this occurrs after the button was clicked, it should all be inside the changeLink() function.I don't know if you're going to understand this properly. We will first access the <div> element, and then will will get every single <input> element that belongs to it into a NodeList.

  1. Getting a reference to the <div>: document.getElementById("home_select")
  2. Accessing the elements inside that element: [reference to that div element].getElementsByTagName("input")
  3. Loop through each of those elements, then look at which one's checked property is true.

When you hear the word "loop" it refers to either for() or while(). For() is the most comfortable one to use for arrays and node lists. Note: The var keyword is used when a variable has not yet been seen in the code, or if it hasn't yet existed in the function.

var i;var radios = [Following steps 1 and 2, get the radio buttons and put it here]; var homeValue; // Declare this variable so that we can give it a value in the loop.for(i = 0; i < radios.length; i++) {  // i is 0 before the loop begins  // As long as i is less than the amount of radio buttons there are,  // run the code in this loop again and add 1 to i. (i++ is the same as i = i + 1 )   if(radios[i].checked) {	// If the radio button number "i" of the list has been checked	// then use the value of that radio button, this is the value we're going to use	homeValue = radios[i].value;	// We already have the value, so let's leave the loop	break;  }}

For the second loop, we don't need to use var for i or radios because the variables were declared earlier

 radios = [Following steps 1 and 2, get the radio buttons of the PREFERRED div and put it here];var preferredValue; // Declare this variable so that we can give it a value in the loop.for(i = 0; i < radios.length; i++) {...  // The rest of the code is the same except for this:  preferredValue = radios[i].value;   // And from here on it's also the same  ...}

Finally, we need to put these values into the <div> element that you want to populate. To access this div, we will give it an ID:

<div id="PopulateResult">Output will go here</div>

Remember that all this code is still inside the changeLink() function:

// We're using "var" again because "outputString" doesn't exist yetvar outputString = "My home location is: "; // The += operator is the same as saying	  outputString = outputString + "text"// We don't use "var" in this line because it was declared just beforeoutputString += homeValue;outputString += " My preferred location is: ";outputString += preferredValue; // Now lets put the string into the <div> element.// We will access the div element using getElementById()var divElement = document.getElementById("PopulateValues"); // InnerHTML means everything that's inside the div. We use it to set the text that it contains.divElement.innerHTML = outputString;

Link to comment
Share on other sites

change<div class="PopulateResult"> to <div id="PopulateResult"> it fails, and ignores the return false; because it is looking for a id reference set by document.getElementById("PopulateResult").innerHTML=joinstring;
Hi dsonesuk, Please find the attached updated version of "dsonesuk_version" file. Changed the: <div class="PopulateResult"> to <div id="PopulateResult" class="Result"> But it's behaving funny and weird. Because, as soon I select radio from Home Location and Preferred Location, it starts populating on its own (like a robot) without clicking the PopulateValue. By the way, why does the button’s height grow taller if I make it as: <button onclick="changeLink(); return false;">Populate Values</button> ------------------------------------------------------------1. A space between the “Populate” and “Values”2. “S” letter after “e” letter in Values------------------------------------------------------------And also, the DIV of "My home location is: My preferred location is:" gets hidden. Currently I have made it as PopulateValue to keep the button in a proper shape and to to make the DIV of "My home location is: My preferred location is:" visible. Try to make the PopulateValue to Populate Values and see what happens.
Link to comment
Share on other sites

Archived

This topic is now archived and is closed to further replies.


×
×
  • Create New...