redirecting form based on radio button values

c_martini · #1 Oct 9th, 2007, 08:51

I am using the following function to alter visibility of proceed links to move from one step in a form to another based on text field validation:

Code: Select all

function toggleProceed(fields, proceedLink)
{

// Loop through the array of id's to check
  for (i = 0; i < fields.length; i++)
      if (document.getElementById(fields[i]).value == "")
       
      {   // if no value, the reset link to hidden and exit from function
          document.getElementById(proceedLink).style.visibility = 'hidden';
          return;
       }

   // If we made it here we can show the link
   document.getElementById(proceedLink).style.visibility = 'visible';

}

it is used in the form like this:

Code: Select all

<input type="text" size="53" id="requestename" name="requestname" maxlength="255" value="" onkeyup="toggleProceed(new Array('requestename'), 'proceed')" />
<a class="panelProceed" href="javascript:void(0)" id="proceed" style="visibility:hidden;" onmousedown="toggleDiv('requestName'); toggleDiv('requestCat')">next &gt;&gt;</a>

now I have another section in the same form containing a radio group:

Code: Select all

<input type="radio" id="work_type_im" name="Type of work" class="checkbox" title="select instant messaging" /> 
        <label for="work_type_im">Instant Messaging</label> &nbsp;&nbsp;
                        
        <input type="radio" id="work_type_video" name="Type of work" class="checkbox" title="select web cam" /> 
        <label for="work_type_video">Video Chat</label> &nbsp;&nbsp;
                        
        <input type="radio" id="work_type_audio" name="Type of work" class="checkbox" title="select audio chat" /> 
        <label for="work_type_audio">Audio Chat</label> &nbsp;&nbsp;
                        
        <input type="radio" id="work_type_text" name="Type of work" class="checkbox" title="select text" /> 
        <label for="work_type_text">Text Chat</label> &nbsp;&nbsp;
                        
        <input type="radio" id="work_type_online" name="Type of work" class="checkbox" title="select online work" /> 
        <label for="work_type_text">Online Work</label>
<a class="panelProceed" href="javascript:void(0)" onmousedown="toggleDiv('requestMed'); toggleDiv('requestDate')" style="visibility:hidden;" >next &gt;&gt;</a>

If the work_type_im is clicked, I want to have the variable 'requestDate' change to another variable so the user is redirected to another section in the form. If they click any other radio button in the group, the default 'requestDate' is retained.

So I guess what I need to is be able to change that variable on the fly if they select that specific radio button...

?

Rakuli · #2 Oct 9th, 2007, 09:02

You could try adding this to all the radio buttons.

onclick="updateToggleDive('nameOfDiv')";

so you on the work_type_im you can add the name of the replacement to 'requestDate' where 'nameOfDIv' is and put 'requestDate' on all the others.

Give the proceed link an id of "proceedLink" or something

Then after the radios add this

Code: Select all

<script type="text/javascript">
function updateToggleDiv(divName)
{
    document.getElementById('proceedDiv').onmousedown = function () {
    toggleDiv('requestMed'); 
    toggleDiv(divName);
}
</script>

Cheers,

c_martini · #3 Oct 9th, 2007, 09:35

It doesn't seem to be working although I may have misunderstood your suggestion. This is how I have interpreted:

Code: Select all

<input type="radio" id="work_type_im" name="Type of work" class="checkbox" title="select instant messaging" onclick="updateToggleDiv('requestMax')"; /> 
<label for="work_type_im">Instant Messaging</label> &nbsp;&nbsp;
                        
<input type="radio" id="work_type_video" name="Type of work" class="checkbox" title="select web cam" onclick="updateToggleDiv('requestDate')"; /> 
<label for="work_type_video">Video Chat</label> &nbsp;&nbsp;
                        
<input type="radio" id="work_type_audio" name="Type of work" class="checkbox" title="select audio chat" onclick="updateToggleDiv('requestDate')"; /> 
<label for="work_type_audio">Audio Chat</label> &nbsp;&nbsp;
                        
<input type="radio" id="work_type_text" name="Type of work" class="checkbox" title="select text" onclick="updateToggleDiv('requestDate')"; /> 
<label for="work_type_text">Text Chat</label> &nbsp;&nbsp;
                        
<input type="radio" id="work_type_online" name="Type of work" class="checkbox" title="select online work" onclick="updateToggleDiv('requestDate')"; />

<script type="text/javascript">
function updateToggleDiv(divName)
{
    document.getElementById('proceedDiv').onmousedown = function () {
    toggleDiv('requestMed'); 
    toggleDiv(divName);
}
</script>

<a class="panelProceed" id="proceedLink" href="javascript:void(0)" onmousedown="toggleDiv('requestMed'); toggleDiv('requestDate')" style="visibility:hidden;" >next &gt;&gt;</a>

Rakuli · #4 Oct 9th, 2007, 09:38

Need to fix this line, it has proceedDiv which doesn't exist

Code: Select all

document.getElementById('proceedLink').onmousedown = function () {

c_martini · #5 Oct 9th, 2007, 09:52

Quote:

Originally Posted by Rakuli

Need to fix this line, it has proceedDiv which doesn't exist

Code: Select all

document.getElementById('proceedLink').onmousedown = function () {

I have fixed this but it is still not altering that toggleDiv variable. I realise there are a couple more errors in the markup that I have fixed, such as an ';' in the wrong place in the radio buttons and I also have not added the toggleProceed function yet.

Aside from these I cannot seem to figure out where its going wrong...

Rakuli · #6 Oct 9th, 2007, 09:59

Woops

Didn't close the function

Code: Select all

<script type="text/javascript">
function updateToggleDiv(divName)
{
    document.getElementById('proceedLink').onmousedown = function () 
   {
    toggleDiv('requestMed'); 
    toggleDiv(divName);
    }
}

That should be okay **Strokes chin and makes contemplative noise.. "hmm" **
</script>

c_martini · #7 Oct 9th, 2007, 10:24

Quote:

Originally Posted by Rakuli

Woops

Didn't close the function

Code: Select all

<script type="text/javascript">
function updateToggleDiv(divName)
{
    document.getElementById('proceedLink').onmousedown = function () 
   {
    toggleDiv('requestMed'); 
    toggleDiv(divName);
    }
}

That should be okay **Strokes chin and makes contemplative noise.. "hmm" **
</script>

Ah thanks, that worked a treat!

Now since I have redirected the user to another section in the form, if they wish to use the back button, I need to also populate that backLink with the variable to take them back to the step with the radio group... Would I just do this?

Code: Select all

<script type="text/javascript">
function updateToggleDiv(divName)
{
    document.getElementById('proceedLink').onmousedown = function () 
   {
    toggleDiv('requestMed'); 
    toggleDiv(divName);
    }
    document.getElementById('backLink').onmousedown = function () 
   {
    toggleDiv(divName); 
    toggleDiv('requestDel');
    }
}
</script>

and then in the redirected section, do this:

Code: Select all

<a class="panelBack" href="javascript:void(0)" id="backLink" onmousedown="toggleDiv('requestMax'); toggleDiv('requestDel')">&lt;&lt; back</a>

?

Rakuli · #8 Oct 9th, 2007, 10:26

Yup, that would do it

Glad it works

Similar Threads
Thread	Thread Starter	Forum	Replies	Last Post
[SOLVED] large radio button form submit	chriscant	JavaScript Forum	7	Oct 25th, 2007 09:03
Any way to use an image for a radio button?	masonbarge	Web Page Design	23	Jan 6th, 2007 09:06
Help needed with creating a radio button form	sing2trees	PHP Forum	1	Nov 13th, 2006 05:52
Setting Form Values to Previously Entered Values	masonbarge	PHP Forum	6	Oct 17th, 2006 17:36
problem with radio button in form validation	augustus_emperor	JavaScript Forum	1	Apr 22nd, 2004 13:08

		Webforumz.com > Main Forums > Program Your Website > JavaScript Forum
redirecting form based on radio button values