1. Advertising
    y u no do it?

    Advertising (learn more)

    Advertise virtually anything here, with CPM banner ads, CPM email ads and CPC contextual links. You can target relevant areas of the site and show ads based on geographical location of the user if you wish.

    Starts at just $1 per CPM or $0.10 per CPC.

how to get a value from a radio button before form is submitted

Discussion in 'JavaScript' started by luvkycool, Nov 15, 2005.

  1. #1
    Hi there folks,

    I have been stumbling for some time now and i cannot seem to get it right.

    I m making a kind of colorpicker script ,with a preview box next to the pallete of how the block will look(same as adsense for example when u create adds(color pallete))

    this preview box has 4 elements that can be filled with a color

    so i have 4 radio buttons
    <input type="radio" name="colorsel" value="1" onclick="dosomethingwith(this.value)" >frontcolor <br />
    <input type="radio" name="colorsel" value="2" onclick="dosomethingwith(this.value)" >Bgcolor <br />

    now depending on which value is clicked the color picked needs to fill the element clicked.

    and this is where i am getting to hairloss at the moment.

    so i can do something like
    function setthecolor(color,whatelement)
    {

    switch (whatelement)
    {
    case 1:
    document.getElementById('frontcolor').style.backgroundColor=color;
    break;
    case 2:
    document.getElementById('bgcolor').style.backgroundColor=color;
    break;
    // etc
    }
    }

    and i would call it like
    javascript:gettthecolor('#ffffff',HERE I NEED THAT VALUE);

    I just cannot get it populated.
    that is getting that value from the radio button onclick
    i could do it with php(Get)
    but the form will already be submitted then
    Hoping that someone here shed a light as im burned out from it.

    Thanks for looking!
    Luck
     
    luvkycool, Nov 15, 2005 IP
  2. TommyD

    TommyD Peon

    Messages:
    1,397
    Likes Received:
    76
    Best Answers:
    0
    Trophy Points:
    0
    #2
    Your example and your question don't match. Plus you use informal identifiers, like 'it' and 'this' which makes it rough for simple fokes like me to follow your writing. Plus you ask something like 'set' but give an example 'get' function, hmmmm......

    your function "setthecolor(color,whatelement)" shows that it wants two passed parameters, but your options list only passes one parameter in the onClick event "dosomethingwith(this.value)", do you think this is your problem?

    tom
     
    TommyD, Nov 15, 2005 IP
  3. luvkycool

    luvkycool Guest

    Messages:
    61
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #3
    Hi sorry forget the code there as it was ment to explain more about i what i wanted to archive.



    What i want to archive is that people can customize a block (so its at the right of the form as in preview)(which is made of 4 elements)
    so i have 4 radio buttons with value 1 till 4
    1 stands for backcolor
    2 for front color
    etc
    when they click lets say the frontcolor radio button.
    i would need the value 2 so that when the color gets picked,it fills the second element.
    when they then click on background,the color that gets picked should fill the background.

    Hope i explained a bit better.
    sorry for that
     
    luvkycool, Nov 15, 2005 IP
  4. TommyD

    TommyD Peon

    Messages:
    1,397
    Likes Received:
    76
    Best Answers:
    0
    Trophy Points:
    0
    #4
    So you will have actually two inputs. 1st is a what attribute the person is changing, and the 2'nd is what the new value is.

    Example: <attributes_here> <color_selection_here>

    If so, then I wouldn't have any 'onClick' events on the attributions options, and I would rewrite the attributes options to have a value of what actual attribute should be updated when the user clicks on the 'color_selection' part.

    The color selection part should have fire off the events.

    this closer? If so, just reply and then I can answer this better, and more detail.

    later,

    tom
     
    TommyD, Nov 15, 2005 IP
  5. luvkycool

    luvkycool Guest

    Messages:
    61
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #5
    yes your right

    the attribute is selected by the user ,
    then they pick a color to fill that "checked" attribute.
     
    luvkycool, Nov 15, 2005 IP
  6. TommyD

    TommyD Peon

    Messages:
    1,397
    Likes Received:
    76
    Best Answers:
    0
    Trophy Points:
    0
    #6
    I put this together, not perfect, but should get you on the right track:

    
    <html>
    <head><title></title>
    <script language="JavaScript" type="text/javascript">
    <!--
    function changeSampleText(color_value){
    	what_attribute = '';
    	for(x=0; x < document.forms[0].attributes.length; x++){
    		if(document.forms[0].attributes[x].checked ){
    			what_attribute = document.forms[0].attributes[x].value;
    			break;
    		}
    	}
    	eval("document.getElementById('sample_text').style." + what_attribute + "='" + color_value + "'");
    }
    -->
    </script>
    </head>
    <body>
    <form name="form1" method="post" action="">
      <table width="500" border="0" align="center">
        <tr>
          <td><p>
              <label>
              <input type="radio" name="attributes" value="backgroundColor" checked>
    Back Ground</label>
              <br>
              <label>
              <input type="radio" name="attributes" value="color">
    Text</label>
              <br>
    		  
          </p>
            </td>
          <td align="center"><table width="200" border="0" >
            <tr>
              <td bgcolor="#000000" onClick="changeSampleText('#000000');">&nbsp;</td>
              <td bgcolor="#CCCCCC" onClick="changeSampleText('#CCCCCC');">&nbsp;</td>
              <td bgcolor="#FFFFFF" onClick="changeSampleText('#FFFFFF');">&nbsp;</td>
            </tr>
            <tr>
              <td bgcolor="#FF0000" onClick="changeSampleText('#FF0000');">&nbsp;</td>
              <td bgcolor="#00FF00" onClick="changeSampleText('#00FF00');">&nbsp;</td>
              <td bgcolor="#0000FF" onClick="changeSampleText('#0000FF');">&nbsp;</td>
            </tr>
            <tr>
              <td bgcolor="#FFFF00" onClick="changeSampleText('#FFFF00');">&nbsp;</td>
              <td bgcolor="#00FFFF" onClick="changeSampleText('#00FFFF');">&nbsp;</td>
              <td bgcolor="#FF00FF" onClick="changeSampleText('#FF00FF');">&nbsp;</td>
            </tr>
          </table></td>
          <td> <div bgcolor="#CCCCCC" id='sample_text'>Sample Text Here.</div></td>
        </tr>
      </table>
    </form>
    </body></html>
    
    Code (markup):
     
    TommyD, Nov 15, 2005 IP
  7. luvkycool

    luvkycool Guest

    Messages:
    61
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #7
    Yes that is awesome,
    thanks very much.
    ill build it up from there thank you VERY MUCH
     
    luvkycool, Nov 15, 2005 IP
  8. luvkycool

    luvkycool Guest

    Messages:
    61
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #8
    Hmm i talked to soon.
    However closer :)
    but still no go as im very limited in using the attributes,
    also as i see it i need to use the only propertys available for the div

    basically i would like to specify myself what attributes im going to use.(not just the bgcolor or the text)

    Heres my code so far wrapped up with it.
    Also the values need to be saved at the end.
    so i need a input field that stores the selected color for the attribute(foreach attribute)

     <html>
    <head><title></title>
    <script language="JavaScript" type="text/javascript">
    <!--
    function changeSampleText(color_value){
    	what_attribute = '';
    	for(x=0; x < document.forms[0].attributes.length; x++){
    		if(document.forms[0].attributes[x].checked ){
    			what_attribute = document.forms[0].attributes[x].value;
    			break;
    		}
    	}
    	eval("document.getElementById('sample_text').style." + what_attribute + "='" + color_value + "'");
    }
    -->
    </script>
    <style type="text/css"> 
    #progressbar{ 
      width: 100px; 
      height: 10px; 
      border: 1px solid #000000;
       
    } 
    
    .border {
      cursor: default;
       border: 1px solid #000000;
       
    }
    </style>
    </head>
    <body>
    <form name="form1" method="post" action="">
      <table width="500" border="0" align="center">
        <tr>
          <td><p>
              <label>
              <input type="radio" name="attributes" value="backgroundColor" checked>
    Back Ground</label>
              <br>
              <label>
              <input type="radio" name="attributes" value="color">
    Text</label>
              <br>
    	   <label>
              <input type="radio" name="attributes" value="bordercolor">
    Border</label><br>	  
          </p>
            </td>
          <td align="center"> <TABLE cellSpacing=1 cellPadding=0 width=100 border=0>
            <TBODY>
            <TR>
              <TD bgColor=#00ff00><A href="javascript:changeSampleText('#00FF00')"><IMG 
                height=15 src="themes/DeepBlue/images/pixel.gif" width=15 border=0></A></TD>
                        <TD bgColor=#330033><A href="javascript:changeSampleText('#330033')"><IMG 
                height=15 src="themes/DeepBlue/images/pixel.gif" width=15 border=0></A></TD>
              <TD bgColor=#330066><A href="javascript:changeSampleText('#330066')"><IMG 
                height=15 src="themes/DeepBlue/images/pixel.gif" width=15 border=0></A></TD>
                       <TD bgColor=#ff00ff><A href="javascript:changeSampleText('#FF00FF')"><IMG 
                height=15 src="themes/DeepBlue/images/pixel.gif" width=15 
            border=0></A></TD></TR></TBODY></TABLE></TD></TR></TBODY></TABLE></td>
         
        </tr>
      </table>
        <table style=""  bordercolor="#FFFFFF" height="60" width="150"  cellpadding="1" cellspacing="0" id="sample_text">
            <tr><td> 
            
            <table cellpadding="0" width="148" align="center" cellspacing="0" height="58">
            <tr><td> 
           
            <table cellpadding="0" width="100%" id="sample_text" bgcolor="#FFFFFF" >
            <tr> <td align="left" valign="top" height="41">
           
            <span bgcolor="#FFFFFF" id="sample_text"><b>Title</b><br></span>
            
            <div id="progressbar"> &nbsp;</div>
            
            
            </td> </tr></table> </td></tr><tr><td>
             <table cellpadding="0" width="100%" cellspacing="0">
              <tr id="blockbordertext" class="blockbordertext"> <td width="1%" nowrap>
            </td> 
              <td align="right" nowrap><span class="blockbyroyalmods">&nbsp;a royalmods campaign &copy;</span></td> </tr> </table> 
              </td></tr></table> </td></tr></table> 
             
              <br>  
              
             
    </form>
    </body></html>
    HTML:

    I would appreciate it ,if u could help me out once more

    thanks in advance
    luck
     
    luvkycool, Nov 15, 2005 IP
  9. TommyD

    TommyD Peon

    Messages:
    1,397
    Likes Received:
    76
    Best Answers:
    0
    Trophy Points:
    0
    #9
    add hidden fields in the form area, I recommend you name the fields the same as the attributes, and then have their values equal the user selection.

    <input type=hidden name="bordercolor" value="put default values in here">
    <input type=hidden name="backgroundColor" value="put default values in here">
    <input type=hidden name="color" value="put default values in here">

    then inside of the javascript function, update the hidden field values. Like such:
    eval("document.forms[0]." + what_attribute + ".value='" + color_value + "'");

    Disclaimer: not at my dev computer, didn't test the examples in this post, but should help you find your answer.

    hth,

    tom
     
    TommyD, Nov 15, 2005 IP
  10. luvkycool

    luvkycool Guest

    Messages:
    61
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #10
    ok thats perfect,
    the only thing is that is left,
    is that i get confused with using the attributes i mean,
    as i see it i can only use real propertys instead of my ones i need
    ie:
    the previewblock would be something like this,
    however when i click bgcolor the bordercolor changes and thats it.
    it would be better if i could put like
    <table id="bordercolor"><tr><td>
    <table id="backgroundcolor"><tr><td>
    <span id="textcolor">text</span><br>
    </td></tr></table></td></tr></table>

    then
    <div id="sample_text"> &nbsp; text </div>

    as i cannot do anything else..
    or am i blind at this stage and i need more coffee to see the light
     
    luvkycool, Nov 15, 2005 IP
  11. luvkycool

    luvkycool Guest

    Messages:
    61
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #11
    Still no go,
    under here you can find the block i was wanting to people customize

    I dont think the way that its now its possible to fill them.
    as its now it fills the border for the backgroundcolor and thats it.
    if i work it out from the <div id> </div>
    i can not get the desired attributes filled.


    <table style=""  bordercolor="#FFFFFF" height="60" width="150"  cellpadding="1" cellspacing="0" id="sample_text">
            <tr><td> 
            
            <table cellpadding="0" width="148" align="center" cellspacing="0" height="58">
            <tr><td> 
           
            <table cellpadding="0" width="100%" id="sample_text" bgcolor="#cccccc" >
            <tr> <td align="left" valign="top" height="41">
           
            <center><span color="#000000" id="sample_text"><b>Title</b><br></span></center><br>
             <center><p align="left"> <span color="#000000" class="description" id="sample_text"><b>Description</b><br></span>
             </p>  <br><br>
            <center><div id="progressbar"> &nbsp;</div></center>
            
            <br><br>
            </td> </tr></table> </td></tr><tr><td>
             <table cellpadding="0" width="100%" cellspacing="0">
              <tr id="blockbordertext" class="blockbordertext"> <td width="1%" nowrap>
            </td> 
              <td align="right" nowrap><span class="blockbyroyalmods">&nbsp;a royalmods campaign &copy;</span></td> </tr> </table> 
              </td></tr></table> </td></tr></table> 
    Code (markup):

    i really appreciate what u done for me sofar.!
    thanks
     
    luvkycool, Nov 15, 2005 IP
  12. luvkycool

    luvkycool Guest

    Messages:
    61
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #12
    think i got it,

    just added the attributes myself

    // inside the func

    if (what_attribute == 'color')
    {
    eval("document.getElementById('color').style." + what_attribute + "='" + color_value + "'");
    // now it is color instead of again sample_Text

    }else{
    eval("document.getElementById('sample_text').style." + what_attribute + "='" + color_value + "'");
    }
    }
     
    luvkycool, Nov 15, 2005 IP
  13. JohnnyReynolds

    JohnnyReynolds Peon

    Messages:
    2
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #13
    Yes that is awesome,
    thanks very much.
    ill build it up from there thank you VERY MUCH............

    Recently I came to know that there is a website named AmazingWatcher.Com which is a free website that will “watch” items for you on Amazon and let you know when amazon has them in stock at regular retail price.It got so awesome!
    Good luck everybody!:eek:
     
    JohnnyReynolds, Dec 9, 2009 IP