Radio buttons conditional submit

S

Sjon

Here's A piece of my code:

<form action="dimensions.php" method="POST">
<br><input type="radio" style="background : #84c7e8" name="categorie"
value="Customer" checked> Customer</br>
<br><input type="radio" style="background : #84c7e8" name="categorie"
value="Employee"> Project Manager</br>
<br><input type="radio" style="background : #84c7e8" name="categorie"
value="Vendor" > Vendor</br>
<br><input type="submit" name="submitknop" value="Change"></br>

What I want here is that when I click on the submit button, the 'form
action' target should be changed to an other webpage depending on the
radio button that has been selected. So, if I selected 'Customer',
another page should be opened than when I select 'Vendor'. I spent a
whole day on it (also trying JS etc.) and can't get it to work.
Anyone to help me?
 
J

Joakim Braun

Sjon said:
Here's A piece of my code:

<form action="dimensions.php" method="POST">
<br><input type="radio" style="background : #84c7e8" name="categorie"
value="Customer" checked> Customer</br>
<br><input type="radio" style="background : #84c7e8" name="categorie"
value="Employee"> Project Manager</br>
<br><input type="radio" style="background : #84c7e8" name="categorie"
value="Vendor" > Vendor</br>
<br><input type="submit" name="submitknop" value="Change"></br>

What I want here is that when I click on the submit button, the 'form
action' target should be changed to an other webpage depending on the
radio button that has been selected. So, if I selected 'Customer',
another page should be opened than when I select 'Vendor'. I spent a
whole day on it (also trying JS etc.) and can't get it to work.
Anyone to help me?
Click to expand...

1. Give the form a name attribute to be able to reference it:
<form name="myform" action="dimensions.php" method="POST">

2. Add an onsubmit handler:

// In the form tag:
<form name="myform" action="dimensions.php" method="POST" onsubmit="return
submitForm();">

// in the <head>:
<script type=text/javascript">
function submitForm(){

var theForm = document.forms["myform"];
if(theForm){
if(theForm.categorie[0].checked){
theForm.action="blah1.htm";
}
else if(theForm.categorie[1].checked){
theForm.action="blah2.htm";
}
else if(theForm.categorie[2].checked){
theForm.action="blah3.htm";
}
}

return true;
}
</script>

Untested, but you can see how it's supposed to work. (You do have a closing
</form> tag, right?)

Joakim Braun
 
M

Michael Winter

"Sjon" <[email protected]> skrev i meddelandet

[snip]
<br><input type="radio" style="background : #84c7e8"
name="categorie" value="Customer" checked> Customer</br>
Click to expand...
Click to expand...

These BR elements (and as Joakim said, BR doesn't have a closing tag - in
fact, it's forbidden) should be LABELs. If you styled them as

label {
display: block;
}

you should end up with the same layout, only now it's using appropriate
mark-up.

[snip]
What I want here is that when I click on the submit button, the 'form
action' target should be changed to an other webpage depending on the
radio button that has been selected. [...]
Anyone to help me?
Click to expand...
Click to expand...

This is really something that should be performed server-side, but I
assume from the content that this isn't for the Web anyway.
1. Give the form a name attribute to be able to reference it:
<form name="myform" action="dimensions.php" method="POST">
Click to expand...

Why? There's no need to and if anything, it should be an id, not a name.
If you're trying to support NN4, add both.
2. Add an onsubmit handler:

// In the form tag:
<form name="myform" action="dimensions.php" method="POST"
onsubmit="return submitForm();">

// in the <head>:
<script type=text/javascript">
function submitForm(){
var theForm = document.forms["myform"];
if(theForm){
if(theForm.categorie[0].checked){
theForm.action="blah1.htm";
}
else if(theForm.categorie[1].checked){
theForm.action="blah2.htm";
}
else if(theForm.categorie[2].checked){
theForm.action="blah3.htm";
}
}
return true;
}
Click to expand...

Or better:

function submitForm(form) {var categorie = form.elements.categorie;
if(categorie[0].checked) {
form.action = 'blah1.html';
} else if(categorie[1].checked) {
form.action = 'blah2.html';
} else if(categorie[1].checked) {
form.action = 'blah3.html';
} else {
alert('Please select a category.');
return false;
}
}

<form action="dimensions.php" method="post"
onsubmit="return submitForm(this);">

[snip]

Mike
 
T

Thomas 'PointedEars' Lahn

<OT>

Joakim said:
<snip>

By the way, there's no such thing as a closing </br>.
Click to expand...

By the way, there is in XHTML; however the `br' element's content model
is empty (<br/> or <br></br>).

</OT>


PointedEars
 

Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Similar Threads

I dont get this. Please help me!! 2
HCaptcha - How to stop page from refreshing on submit if captcha is not checked/validated 1
How to position the *tooltip* comment on these buttons? 9
Help with code 0
Radio buttons values not posting???? 18
Javascrip code wont run properly. 2
Reversing output of user input by using while loop... 2
Help with my responsive home page 2

Members online

No members online now.
Total: 44 (members: 2, guests: 42)
Robots: 204

Forum statistics

Threads
473,764
Messages
2,569,564
Members
45,039
Latest member
CasimiraVa

Latest Threads

Top