www.webdeveloper.com
Results 1 to 7 of 7

Thread: Copy checkbox and radio button value to hidden field

Hybrid View

  1. #1
    Join Date
    Sep 2013
    Posts
    3

    Copy checkbox and radio button value to hidden field

    Hi,
    I have a form that has text fields, text areas, checkboxes and a radio button. I need to copy the content of the form to hidden fields in another form. I've managed to copy the text fields and text areas to hidden fields but I can't copy the value of the checkboxes or radio button.

    I have four separate checkboxes and each one is unique and will copy to a unique hidden field. Each checkbox will have a value of Y if checked and I'd like the hidden field to have a value of N if the checkbox is not checked and Y if it is checked.

    The same rule applies for the radio button, it can either be Y (checked) or N (not checked).

    As mentioned above, I've already got a JavaScript function (on an onclick event) that copies the text fields and text areas so I just want to add the copy checkbox value code into my existing function.

    Hope someone can help.

    Thanks

  2. #2
    Join Date
    May 2006
    Location
    Somewhere behind your screen
    Posts
    1,655
    someone could help if there was some code

  3. #3
    Join Date
    Sep 2013
    Posts
    3
    Hi,

    The main form stores page content data into a database - the idea is for users to be able to preview what their content will look like "before" they save (submit) the main form. My idea was if I could copy the form fields (of the main form) to another form (with hidden fields) the user could "submit" the second form to a new page to preview their content (this would open in a new window) - if they are happy with their content they can close the preview window and "save" (submit) the main form to save the content to the database.

    so far my code works for the text fields and text areas of the main form but not for the checkboxes and radio buttons. Here is the code so far (I've removed most of the text fields and text areas for clarity and there will be a few more checkboxes in the finished form:

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html lang="en" xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Copy form field to hidden field</title>
    <script type="text/javascript">
    <!--
    function fillBilling() {
    	document.getElementsByName("previewpgTitle")[0].value = document.getElementsByName("pgTitle")[0].value;
        document.getElementsByName("previewpgMKeywords")[0].value = document.getElementsByName("pgMKeywords")[0].value;
        document.getElementsByName("previewpgMDescription")[0].value = document.getElementsByName("pgMDescription")[0].value;
        	
        if(document.getElementsById("pgShowEnquiryFrm").checked = true) {
    		document.getElmentById('previewpgShowEnquiryFrm')[0].value = document.getElementsById("pgShowEnquiryFrm").value;
    	} 	
    		
        if(document.getElementsById("pgShowQuickMenu").checked = true) {
    		document.getElmentById('previewpgShowQuickMenu')[0].value = document.getElementsById("pgShowQuickMenu").value;
    	} 
        return false;		
    }
    //  -->
    </script>
    </head> 
    <body>
    <form action="" method="post" name="newform" id="newform">
    <label for="pgShowEnquiryFrm">Show Enquiry Form?</label>
    <input type="checkbox" name="pgShowEnquiryFrm" id="pgShowEnquiryFrm" value="Y" />
    
    <label for="pgTitle">Browser Title:</label>
    <input name="pgTitle" type="text" id="pgTitle" value="" maxlength="99" />
                                      
    <label for="pgMKeywords">Meta Keywords:</label>
    <textarea name="pgMKeywords" rows="8"id="pgMKeywords"></textarea>
                                      
    <label for="pgMDescription">Meta Description:</label>
    <textarea name="pgMDescription" rows="8" id="pgMDescription"></textarea>
                                      
    <input  name="pgShowQuickMenu" type="radio" id="pgShowQuickMenu_0" value="Y" checked="checked" />
    <label for="pgShowQuickMenu_0">Use Lower Content Area</label>
    <input  type="radio" name="pgShowQuickMenu" value="N" id="pgShowQuickMenu_1" />
    <label for="pgShowQuickMenu_1">Do Not Use Lower Content Area</label>                              
                   
    <label for="editbtn"></label>
    <input name="editbtn" type="submit" id="editbtn" value="Save Changes" />
    </form>
                    
    <form action="" method="post" name="previewform" id="previewform" onclick="return fillBilling()" >
    <input name="previewpgShowEnquiryFrm" type="text" id="previewpgShowEnquiryFrm" value=""/>
    <input name="previewpgTitle" type="text" id="previewpgTitle" value=""/>
    <input name="previewpgMKeywords" type="text" id="previewpgMKeywords" value=""/>
    <input name="previewpgMDescription" type="text" id="previewpgMDescription" value=""/> 
    <input name="previewpgShowQuickMenu" type="text" id="previewpgShowQuickMenu" value=""/>
    <input name="previewbtn" type="submit" id="previewbtn" value="Preview" />
    </form>
    
    </body>
    </html>
    Many thanks

  4. #4
    Join Date
    May 2006
    Location
    Somewhere behind your screen
    Posts
    1,655
    try this

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html lang="en" xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Copy form field to hidden field</title>
    <script type="text/javascript">
    <!--
    function getid(id){return document.getElementById(id);}
    function getname(name){return document.getElementsByName(name)[0];}
    
    function fillBilling(){
    getname("previewpgTitle").value=getname("pgTitle").value;
    getname("previewpgMKeywords").value=getname("pgMKeywords").value;
    getname("previewpgMDescription").value=getname("pgMDescription").value;
    getid('previewpgShowEnquiryFrm').value=(getid("pgShowEnquiryFrm").checked==true)?getid("pgShowEnquiryFrm").value:'N';
    getid('previewpgShowQuickMenu').value=(getid("pgShowQuickMenu_0").checked==true)?getid("pgShowQuickMenu_0").value:getid("pgShowQuickMenu_1").value;
    return false;
    }
    //  -->
    </script>
    </head> 
    <body>
    <form action="" method="post" name="newform" id="newform">
    <label for="pgShowEnquiryFrm">Show Enquiry Form?</label>
    <input type="checkbox" name="pgShowEnquiryFrm" id="pgShowEnquiryFrm" value="Y" />
    
    <label for="pgTitle">Browser Title:</label>
    <input name="pgTitle" type="text" id="pgTitle" value="" maxlength="99" />
                                      
    <label for="pgMKeywords">Meta Keywords:</label>
    <textarea name="pgMKeywords" rows="8"id="pgMKeywords"></textarea>
                                      
    <label for="pgMDescription">Meta Description:</label>
    <textarea name="pgMDescription" rows="8" id="pgMDescription"></textarea>
                                      
    <input  name="pgShowQuickMenu" type="radio" id="pgShowQuickMenu_0" value="Y" checked="checked" />
    <label for="pgShowQuickMenu_0">Use Lower Content Area</label>
    <input  type="radio" name="pgShowQuickMenu" value="N" id="pgShowQuickMenu_1" />
    <label for="pgShowQuickMenu_1">Do Not Use Lower Content Area</label>                              
                   
    <label for="editbtn"></label>
    <input name="editbtn" type="submit" id="editbtn" value="Save Changes" />
    </form>
                    
    <form action="" method="post" name="previewform" id="previewform" onsubmit="return fillBilling()">
    <input name="previewpgShowEnquiryFrm" type="text" id="previewpgShowEnquiryFrm" value=""/>
    <input name="previewpgTitle" type="text" id="previewpgTitle" value=""/>
    <input name="previewpgMKeywords" type="text" id="previewpgMKeywords" value=""/>
    <input name="previewpgMDescription" type="text" id="previewpgMDescription" value=""/> 
    <input name="previewpgShowQuickMenu" type="text" id="previewpgShowQuickMenu" value=""/>
    <input name="previewbtn" type="submit" id="previewbtn" value="Preview" />
    </form>
    
    </body>
    </html>
    Last edited by Padonak; 09-15-2013 at 01:12 PM.

  5. #5
    Join Date
    May 2006
    Location
    Somewhere behind your screen
    Posts
    1,655
    another one with preview in a div (see Preview1 button and function fillBilling1())

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html lang="en" xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Copy form field to hidden field</title>
    <style type="text/css">
    #mainprev{position:absolute;top:150px;padding:20px 20px;border:2px solid Darkorange;border-radius:10px;color:Navy;background-color:#D9E3D4;opacity:.8;}
    </style>
    <script type="text/javascript">
    <!--
    function getid(id){return document.getElementById(id);}
    function getname(name){return document.getElementsByName(name)[0];}
    
    function fillBilling(){
    getname("previewpgTitle").value=getname("pgTitle").value;
    getname("previewpgMKeywords").value=getname("pgMKeywords").value;
    getname("previewpgMDescription").value=getname("pgMDescription").value;
    getid('previewpgShowEnquiryFrm').value=(getid("pgShowEnquiryFrm").checked==true)?getid("pgShowEnquiryFrm").value:'N';
    getid('previewpgShowQuickMenu').value=(getid("pgShowQuickMenu_0").checked==true)?getid("pgShowQuickMenu_0").value:getid("pgShowQuickMenu_1").value;
    return false;
    }
    
    function fillBilling1(){
    try{document.body.removeChild(getid('mainprev'));}catch(e){}
    var frm=getid('newform'),labels=frm.getElementsByTagName('label'),content='';
    for(var i=0;i<labels.length;i++){
    var nval=labels[i].attributes[0].nodeValue;
    if(nval==='editbtn'){continue;}
    else{
    var val='';
    if(nval==='pgShowEnquiryFrm' || getid(nval).type==='radio'){val=(getid(nval).checked)?getid(nval).value:'N';}
    else{val=getid(nval).value||'<span style="color:Red">not given</span>';}
    content+='<b>'+labels[i].innerHTML+'</b> '+val+'<br />';
    }
    }
    var prev=document.createElement('div');
    prev.id='mainprev';
    prev.innerHTML=content+'<div style="text-align:right;padding-right:15px;margin-top:10px;"><a href="" onclick="document.body.removeChild(this.parentNode.parentNode);return false;">Close</a></div>';
    document.body.appendChild(prev);
    getid('mainprev').style.left=(document.body.offsetWidth - getid('mainprev').offsetWidth)/2 + 'px';
    }
    //  -->
    </script>
    </head> 
    <body>
    <form action="" method="post" name="newform" id="newform">
    <label for="pgShowEnquiryFrm">Show Enquiry Form?</label>
    <input type="checkbox" name="pgShowEnquiryFrm" id="pgShowEnquiryFrm" value="Y" />
    
    <label for="pgTitle">Browser Title:</label>
    <input name="pgTitle" type="text" id="pgTitle" value="" maxlength="99" />
                                      
    <label for="pgMKeywords">Meta Keywords:</label>
    <textarea name="pgMKeywords" rows="8"id="pgMKeywords"></textarea>
                                      
    <label for="pgMDescription">Meta Description:</label>
    <textarea name="pgMDescription" rows="8" id="pgMDescription"></textarea>
                                      
    <input  name="pgShowQuickMenu" type="radio" id="pgShowQuickMenu_0" value="Y" checked="checked" />
    <label for="pgShowQuickMenu_0">Use Lower Content Area</label>
    <input  type="radio" name="pgShowQuickMenu" value="N" id="pgShowQuickMenu_1" />
    <label for="pgShowQuickMenu_1">Do Not Use Lower Content Area</label>                              
                   
    <label for="editbtn">save</label>
    <input name="editbtn" type="submit" id="editbtn" value="Save Changes" />
    </form>
                    
    <form action="" method="post" name="previewform" id="previewform" onsubmit="return fillBilling()">
    <input name="previewpgShowEnquiryFrm" type="text" id="previewpgShowEnquiryFrm" value=""/>
    <input name="previewpgTitle" type="text" id="previewpgTitle" value=""/>
    <input name="previewpgMKeywords" type="text" id="previewpgMKeywords" value=""/>
    <input name="previewpgMDescription" type="text" id="previewpgMDescription" value=""/> 
    <input name="previewpgShowQuickMenu" type="text" id="previewpgShowQuickMenu" value=""/>
    <input name="previewbtn" type="submit" id="previewbtn" value="Preview" />
    <input name="previewbtn1" type="button" id="previewbtn1" value="Preview 1" onclick="fillBilling1()" />
    </form>
    
    </body>
    </html>
    Last edited by Padonak; 09-15-2013 at 02:21 PM.

  6. #6
    Join Date
    Sep 2013
    Posts
    3
    Hi Padonak,

    Thank you very much, that did the trick - works great!

    Many thanks.

  7. #7
    Join Date
    May 2006
    Location
    Somewhere behind your screen
    Posts
    1,655
    good to hear )) you're welcome

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