2 functions met een onsubmit event handler ?

Status
Niet open voor verdere reacties.
yammaski

yammaski

Gebruiker
Lid geworden
9 mrt 2005
Berichten
284
Is het mogelijk om 2 functions te checken met een onsubmit event handler ?

De eerste functie moet het aantal ingegeven karakters voor de gekozen breedte checken : function checkchars(cur). Als deze "true" is, dan moet de tweede functie checken of er een keuze gemaakt werd tussen 2 radio buttons : function radio_button_checker().
Bvb.: Als de gekozen breedte 10 cm is, mag de tekst max 10 karakters bevatten.

Ofwel werkt de eerst, ofwel de tweede. Maar het lukt me niet om ze beide te laten werken.

Prototype

Code: 
script type="text/javascript">
<!--
function radio_button_checker(){
var radio_choice = false;
var chk=document.forms['FrogStyling_1_ATC'].elements['Eigentekst'];
for (var counter = 0; counter < chk.length; counter++){
if (chk[counter].checked){
radio_choice = true; 
}
}
if (!radio_choice){
alert("Gelieve je bovenste of onderste ontwerp (bolletje) aan te duiden !")
return false;
}
}
//-->
</script>
<script>
<!--
function checkchars(cur){
var e = document.getElementById("FrogStyling_1_Size_Add");
var maxChars = e.options[e.selectedIndex].value;
var maxlength=maxChars

if (cur.FrogStyling_1_EigenTekst_Add.value.length>maxlength){
alert("maximum " + maxChars + " chars for the choosen width !");
return false
}
}
//-->
</script>
</head>
<body>
<form action="" method="post" name="FrogStyling_1_ATC" onSubmit="return checkchars(this); return radio_button_checker()">
1
<input name="Eigentekst" type="radio" id="Eigentekst" title="kies bovenste" onclick="no_yes()" value="1" />
<br /><br />
2
<input type="radio" name="Eigentekst" id="Eigentekst" onclick="no_yes()" value="2" title="kies onderste" />
<br /><br />
typ your text :<br />
<input name="FrogStyling_1_EigenTekst_Add" id="AddText" type="text" size="30" maxlength="22" />
&nbsp;&nbsp;&nbsp;&nbsp;choose text witdth : 
<select name="FrogStyling_1_Size_Add" onchange="checkchars(cur)">
    <option value="5" selected="selected">5 cm</option>
    <option value="10">10 cm</option>
    <option value="15">15 cm</option>
    <option value="20">20 cm</option>
</select>
    &nbsp;&nbsp;&nbsp;
<input type="submit" value="Submit!">

</form>
</body>
 
Een dubbele return werkt niet; na een return wordt er niets meer gedaan, want ja, je returned.

Je kan ze wel combineren met een logische operator:[JS]return checkchars(this) && radio_button_checker();[/JS]ofwel: de 1e EN de 2e moeten 'true' returnen om true te returnen.

:thumb:
 
Wat ik zou doen is van die 2 functies, 1 functie maken.

ik heb het niet getest, maar ik zat aan zoiets te denken:

Code: 
function checkchars(cur){
var message = "";
var e = document.getElementById("FrogStyling_1_Size_Add");
var maxChars = e.options[e.selectedIndex].value;
var maxlength=maxChars

if (cur.FrogStyling_1_EigenTekst_Add.value.length>maxlength){
alert("maximum " + maxChars + " chars for the choosen width !");
var checkcharsResult = true;
}else{var checkcharsResult = false;}

var radio_choice = false;
var chk=document.forms['FrogStyling_1_ATC'].elements['Eigentekst'];
for (var counter = 0; counter < chk.length; counter++){
if (chk[counter].checked){
radio_choice = true; 
}
}
if (!radio_choice){
alert("Gelieve je bovenste of onderste ontwerp (bolletje) aan te duiden !")
var checkradioResult = false;
}else{var checkradioResult = true;}

if(checkcharsResult == false){message+= "maximum " + maxChars + " chars for the choosen width !";}
if(checkradioResult == false){message+= "<br />Gelieve je bovenste of onderste ontwerp (bolletje) aan te duiden !";}

if(checkcharsResult == false||checkradioResult == false){
alert(message);
return false;
}
}
 
ScorpionX zei:
Wat ik zou doen is van die 2 functies, 1 functie maken.

ik heb het niet getest, maar ik zat aan zoiets te denken:

Code: 
function checkchars(cur){
var message = "";
var e = document.getElementById("FrogStyling_1_Size_Add");
var maxChars = e.options[e.selectedIndex].value;
var maxlength=maxChars

if (cur.FrogStyling_1_EigenTekst_Add.value.length>maxlength){
alert("maximum " + maxChars + " chars for the choosen width !");
var checkcharsResult = true;
}else{var checkcharsResult = false;}

var radio_choice = false;
var chk=document.forms['FrogStyling_1_ATC'].elements['Eigentekst'];
for (var counter = 0; counter < chk.length; counter++){
if (chk[counter].checked){
radio_choice = true; 
}
}
if (!radio_choice){
alert("Gelieve je bovenste of onderste ontwerp (bolletje) aan te duiden !")
var checkradioResult = false;
}else{var checkradioResult = true;}

if(checkcharsResult == false){message+= "maximum " + maxChars + " chars for the choosen width !";}
if(checkradioResult == false){message+= "<br />Gelieve je bovenste of onderste ontwerp (bolletje) aan te duiden !";}

if(checkcharsResult == false||checkradioResult == false){
alert(message);
return false;
}
}
Klik om te vergroten...

Het gaat de goede richting uit denk ik, maar je krijgt een massa alerts en het klopt niet.
Hier kan je het uittesten.
 
[JS]script type="text/javascript">
<!--
function radio_button_checker(){
var radio_choice = false;
var chk=document.forms['FrogStyling_1_ATC'].elements['Eigentekst'];
for (var counter = 0; counter < chk.length; counter++){
if (chk[counter].checked){
radio_choice = true;
}
}
if (!radio_choice){
alert("Gelieve je bovenste of onderste ontwerp (bolletje) aan te duiden !")
return false;
}
}
//-->
</script>
<script>
<!--
function checkchars(cur){
var e = document.getElementById("FrogStyling_1_Size_Add");
var maxChars = e.options[e.selectedIndex].value;
var maxlength=maxChars

if (cur.FrogStyling_1_EigenTekst_Add.value.length>maxlength){
alert("maximum " + maxChars + " chars for the choosen width !");
return false
} else {
radio_button_checker();
}
}
//-->
</script>
[/JS]
Ik geloof dat je dit bedoeld, Als cur.FrogStyling_1_EigenTekst_Add.value.length <= maxlength) dan moet de radio_button_checker starten.
 
Als het aantal karakters goed is en je nog geen radiobut gechecked hebt, op "ok" klikt bij de alert radio buttons, wordt de ingegeven tekst al verzonden zonder dat er een radio button gecheckted is.

probeer model
 
[JS]script type="text/javascript">
<!--
function radio_button_checker(){
var radio_choice = false;
var chk=document.forms['FrogStyling_1_ATC'].elements['Eigentekst'];
for (var counter = 0; counter < chk.length; counter++){
if (chk[counter].checked){
radio_choice = true;
}
}
if (!radio_choice){
alert("Gelieve je bovenste of onderste ontwerp (bolletje) aan te duiden !")
return false;
}
return true;
}
//-->
</script>
<script>
<!--
function checkchars(cur){
var e = document.getElementById("FrogStyling_1_Size_Add");
var maxChars = e.options[e.selectedIndex].value;
var maxlength=maxChars
var switch = false;

if (cur.FrogStyling_1_EigenTekst_Add.value.length>maxlength){
alert("maximum " + maxChars + " chars for the choosen width !");
return switch;
} else {
switch = true;
}
if(switch && radio_button_checker()) {
return switch;
}

return false;

}
}


//-->
</script>[/JS]

Ik heb dit uit mijn hoofd ff gedaan, dus ik weet niet of het helemaal werkt.
Maar zoiets zou het moeten zijn!
 
Laatst bewerkt:
Welke formule plaats ik dan bij onsubmit ="" ?
Want met dit lukt het niet : onSubmit="return checkchars(this); return radio_button_checker()"
 
checkchars(this), want als je naar de code kijk kun je zien dat de andere in de checkchars(this) functie gestart wordt.
 
dan moet je een beetje testen met de swith, dus maak false => true en true => false
 
Dit had ik ook al geprobeerd, maar werkt ook niet. Alleen checkchars(this) function werkt.
Klik om te vergroten...
Ja, dat komt omdat de andere helemaal geen bool returned... alleen op de 'false' clause...
Het idee is dat de functie of true of false returned. Dus, je eind-functie ziet er zo uit:
[JS]function ...()
{
//

if(iets === gelukt)
{
return true;
}else{
return false;
}
}[/JS]Bij jou returned het alleen 'false' als het fout gaat. Als het goed gaat moet je wel true returnen!
 
Bedoel je zoals dit ? ... Want ik krijg het niet zoals het zou moeten. :confused:

Code: 
<script type="text/javascript">
<!--
function radio_button_checker(){
var radio_choice = false;
var chk=document.forms['FrogStyling_1_ATC'].elements['Eigentekst'];
for (var counter = 0; counter < chk.length; counter++){
if (chk[counter].checked){
radio_choice = true; 
}
}
if (!radio_choice){
alert("Gelieve je bovenste of onderste ontwerp (bolletje) aan te duiden !")
return true;
}else{
	return false;
}
}
//-->
</script>
<script>
<!--
function checkchars(cur){
var e = document.getElementById("FrogStyling_1_Size_Add");
var maxChars = e.options[e.selectedIndex].value;
var maxlength=maxChars

if (cur.FrogStyling_1_EigenTekst_Add.value.length>maxlength){
alert("maximum " + maxChars + " chars for the choosen width !");
return false;
}
}
//-->
</script>
 
true/false staat verkeerd om bij de 1e. Het is zo: TRUE als het 'goed' is, FALSE als het niet goed is.

Also, leer je scripts netjes te identen. Want anders is het gewoon NIET leesbaar. Ohja, en HTML comments in <script> tags is zo 1997!


[JS]function radio_button_checker()
{
var radio_choice = false;
var chk=document.forms['FrogStyling_1_ATC'].elements['Eigentekst'];

for (var counter = 0; counter < chk.length; counter++)
{
if (chk[counter].checked)
{
radio_choice = true;
}
}

if (!radio_choice)
{
alert("Gelieve je bovenste of onderste ontwerp (bolletje) aan te duiden !")
return false; // error
}else{
return true; // het is goed
}
}[/JS][JS]function checkchars(cur)
{
var e = document.getElementById("FrogStyling_1_Size_Add");
var maxChars = e.options[e.selectedIndex].value;
var maxlength=maxChars

if(cur.FrogStyling_1_EigenTekst_Add.value.length > maxlength)
{
alert("maximum " + maxChars + " chars for the choosen width !");
return false;
}

return true; // false als de IF resolved, maar een else{} kan ook
}
[/JS]Nu kan je dus zoiets doen:
HTML: 
<... onclick="return radio_button_checker() && checkchars();" />


:thumb:
 
Status
Niet open voor verdere reacties.
                    Steun ons                    

Nieuwste berichten

Terug
Bovenaan Onderaan