www.webdeveloper.com
Results 1 to 8 of 8

Thread: put checked radio ID separated by a delimiter into hidden field

  1. #1
    Join Date
    Nov 2007
    Posts
    31

    Question put checked radio ID separated by a delimiter into hidden field

    halo there..need some help here..hope u all can help ya.
    i got a list of radiobutton, with differnt name.
    when i click on the radio button, it willpass the 'ID' into the JS function, how can i get the CHEKED radio ID and put in the hidden field first? i wan to put the all checked radio ID separated by a specified delimiter, such as in this format--> 1.2.3.4.5.6 with the delimiter '.'. can some one plz help me? thanx. bewlow is my html code :
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html >
    <head>
        <title>Untitled Page</title>
        
    </head>
    <script language ="javascript">
    function chkRadio()
    {
       
        column =document.list_photo.hidCounter.value;
        var total = 0;
        var file =0;
        
        for(var i=1; i<=column; i++){
        var objId = "chkBuy" + i;
        var obj = eval("document.list_photo." + objId);
        document.list_photo.totalcredit.value = obj.length;
        for(var j=0; j<obj.length; j++){
        if(obj[j].checked && obj[j].value != 0){
        total += eval(obj[j].value);
        file++;
        }
        }
        }
        document.list_photo.total_file.value =file;
        document.getElementById('totalfile').innerHTML =file;
        document.getElementById('creditcost').innerHTML =total;
    
    }
        
    
    function chkPhoto(photoid)
    {
    alert(sizeid);
    }
    
    
    function chkValue()
    {
        column =document.list_photo.hidCounter.value;
        var checked =false;
        if(document.list_photo.chkAgree.checked ==false)
        {
            alert("Please agree To terms");
            return false;
        }
        
        if(document.list_photo.total_file.value =="")
        {
                alert("Please select the images you wish to download.");
                return false;
        }
            document.list_photo.hidSubmit.value ="Submit";
            boxid =document.list_photo.hidboxid.value;
            document.list_photo.action ="lightbox_download.asp?boxid="+ boxid ;
            document.list_photo.submit();
    }
    	
    
    </script>
    
    <body>
    <a href="list_lightbox.asp">List lightbox</a><br /><br />
    
    <form name="list_photo" id="f1" method="post">
    <table border="1">
    
    
        <tr>
            <td valign="top">IMAGE DISPLAY HERE</td>
            <td  valign="top"><a href ="">dog</a><BR /> alice</td>
            <td>
                
                <table>
                
                    <tr>
                    <td>XSmall&nbsp; - 100 x 100 px @ 72 Dpi  </td>
                    <td>- 1Credit</td>
                    <td><input type="Radio" name="chkBuy1" value="1" onClick="chkRadio();chkPhoto('1');" /></td>
                    </tr>
                
                    <tr>
                    <td>Small&nbsp; - 200 x 280 px @ 72 Dpi  </td>
                    <td>- 3Credits</td>
                    <td><input type="Radio" name="chkBuy1" value="3" onClick="chkRadio();chkPhoto('1');" /></td>
                    </tr>
                
                    <tr>
                    <td>Medium&nbsp; - 500 x 600 px @ 300 Dpi  </td>
                    <td>- 5Credits</td>
                    <td><input type="Radio" name="chkBuy1" value="5" onClick="chkRadio();chkPhoto('1');" /></td>
                    </tr>
                
                    <tr>
                        <td colspan="2" align="right">Skip This image file</td>
                        <td>
                        <input type="Radio" name="chkBuy1" value="0" onClick="chkRadio(this.value,'1')"  checked />
                        <input type="text" name="hiddX" value="1" size="5"/>
                        <input type="hidden" name="totalrecord1" value="" size="5"/>
                        </td>
                    </tr>
                
                </table>
              </td>
        </tr>
    
        <tr>
            <td valign="top">IMAGE DISPLAY HERE</td>
            <td  valign="top"><a href ="">cat</a><BR /> lenny</td>
            <td>
                
                <table>
                
                    <tr>
                    <td>Small&nbsp; - 200 x 250 px @ 72 Dpi  </td>
                    <td>- 3Credits</td>
                    <td><input type="Radio" name="chkBuy2" value="3" onClick="chkRadio();chkPhoto('3');" /></td>
                    </tr>
                
                    <tr>
                    <td>XSmall&nbsp; - 250 x 250 px @ 72 Dpi  </td>
                    <td>- 1Credit</td>
                    <td><input type="Radio" name="chkBuy2" value="1" onClick="chkRadio();chkPhoto('3');" /></td>
                    </tr>
                
                    <tr>
                        <td colspan="2" align="right">Skip This image file</td>
                        <td>
                        <input type="Radio" name="chkBuy2" value="0" onClick="chkRadio(this.value,'2')"  checked />
                        <input type="text" name="hiddX" value="2" size="5"/>
                        <input type="hidden" name="totalrecord2" value="" size="5"/>
                        </td>
                    </tr>
                
                </table>
              </td>
        </tr>
     
        <tr>
            <td>
            <input type="text" name="photo" />
         
            
            </td>
        </tr>
    
    
     </table>
    
    </form>
    </body>
    </html>
    when i onclick the radio button, i call two function. the radio buttons value is loop from the Db so it has differnet name for every row. when i clicked on the radio button, one of the calling fucntion is chkPhoto('1')--> it will pass the photoid to the fucntion. if let say got three photo or more, how can i pass the value(assign it into the hidden text field name 'photo'? i would like to assign it in this format --> 1.2.3 with the delimiter join on the checked photo value.plz help

  2. #2
    Join Date
    Jan 2008
    Location
    Toronto, Canada
    Posts
    52
    Sorry, but your explanation was not very clear to me, but I think this is what you want:

    HTML Code:
    <html>
    <head>
    <script>
    function fillinput(){
    var d=document.getElementById('theholder');
    var theradios=d.getElementsByTagName('input');
    
    for (i=0;i<theradios.length;i++){
    	if(theradios[i].type=='radio' && theradios[i].checked==true){
    	v=theradios[i].value;
    	v=v+'.';
    	var oldv=document.getElementById('inputs').value;
    	document.getElementById('inputs').value=oldv+v;
    	}
    }
    }
    
    function clearvalue(){
    document.getElementById('inputs').value='';
    }
    </script>
    </head>
    
    <body>
    <div id="theholder">
    <form>
    
    <input type="radio" name="r" id="r1" value="1" onClick="clearvalue();">radio 1<br />
    <input type="radio" name="r" id="r2" value="2" onClick="clearvalue();">radio 2<br />
    <input type="radio" name="r" id="r3" value="3" onClick="clearvalue();">radio 3<br />
    <hr />
    <input type="radio" name="r2" id="r4" value="4" onClick="clearvalue();">radio 4<br />
    <input type="radio" name="r2" id="r5" value="5" onClick="clearvalue();">radio 5<br />
    <input type="radio" name="r2" id="r6" value="6" onClick="clearvalue();">radio 6<br />
    <hr />
    
    The radio values added to this input's field value:<br />
    <input type="button" value="click to add radio button values" onClick="fillinput();" readonly="readonly">
    <input type="text" id="inputs" value=""><input type="reset">
    
    </form>
    </div>
    </body>
    </html>
    PS:
    I noticed you said radio ID not value...you can simply do this by changing the 'value' to 'id' in
    HTML Code:
    v=theradios[i].value;
    ---------------------------------------
    Web Services: www.funmediadesign.com
    Web Templates: www.funmedia.ca
    Last edited by here-to-help; 01-22-2008 at 10:49 PM.

  3. #3
    Join Date
    Nov 2007
    Posts
    31
    to : here-to-help ,
    hi, ya..i wan something like that . but why the value in the text box is got extra for example i choose radio butotn 2, in the text bx will display 2. . i need when i onclick then directly assign the radio button into the text box. i wan do this coz i got another submit button.when i submit it, i will split the radio btuoon value which store in the text box. can u help me look at my code and teach me how to do it?

    <input type="Radio" name="chkBuy1" value="1" onClick="chkRadio();chkPhoto('1');" /> in my radio button , i called two function. the second function is chkPhoto which i need to pass another VALUE to the function in JS. so inside the function i need to assign the parameter pass from the chkPhoto('1');" into the text box......
    plz..help
    thanx
    Last edited by kumiko; 01-23-2008 at 03:32 AM.

  4. #4
    Join Date
    Jan 2008
    Location
    Toronto, Canada
    Posts
    52
    I'm sorry, I am not sure if I understand your request.

  5. #5
    Join Date
    Nov 2007
    Posts
    31
    hi there...thanx for help.my problem have solved..thank all all response.

  6. #6
    Join Date
    Jan 2008
    Location
    Toronto, Canada
    Posts
    52
    Glad it's been solved.
    But if you were willing to share your solution, other people might benefit from this, too.

  7. #7
    Join Date
    Nov 2007
    Posts
    31
    i pass two values from the radio button , then pass to the function and split it to array like ; radio[0],radio[1] to read the value .actually the photo id i need it during i submit the form. so i split it in the asp script also.

  8. #8
    Join Date
    Sep 2010
    Posts
    1
    Sorry to woke up this old thread.
    I just became member to say Thank you to here-to-help. Your solution was amazing and it solved my problems after 1 week web searching.
    You did great job.

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles