Calling two functions

[ravi_k]

Hi

I am using prevent default to restrict the submitted data posting on other page.

It works fine but i try to call other function also with onsubmit to get a alert from server after submitting it.

In below onsubmit am calling 2 functions, only one works.

 

<form name="myForm0" action="/volumeflow" method="post" autocomplete="off"
id="vlmn" target="formDestination" onsubmit="return volflow12(event); volflow_check()">

But it does not work. I tried with onsubmit  and onclick.

What is the issue 

<script >
 function volflow_check() {
     var xhttp = new XMLHttpRequest();
     xhttp.onreadystatechange = function()
     {
            if (this.readyState == 4 && this.status == 200)
            {
                alert("volume flow submitted successfully");
            }
     };
   xhttp.open("GET", "volumeflow_check", true);
   xhttp.send();
   }
   
 function volflow12(event) {
        var w = document.forms["myForm0"]["damping0"].value;
        var x = document.forms["myForm0"]["flowcutoff0"].value;
        var z = document.forms["myForm0"]["decimal0"].value;
    if (w == "") {
        alert("Field 1 must be filled out");
        return false;
    }
    else if (x == "") {
        alert("Field 2 must be filled out");
        return false;
    }

    else if (z == "") {
        alert("Field 3 must be filled out");
        return false;
    }
	else
	{
		myFunctionabcd33(event);
	}
}
function showForm2() {
    var selopt =document.getElementById("optsv").value;

    if (selopt == 1) {

        document.getElementById("f3").style.display = "inline";
        document.getElementById("f4").style.display = "none";

	}

    else if (selopt == 2) {

        document.getElementById("f4").style.display = "inline";
        document.getElementById("f3").style.display = "none";

    }

    else {

        document.getElementById("f4").style.display = "none";
        document.getElementById("f3").style.display = "none";

    }
}

   function myFunctionabcd33(event) {

   var myForm  = document.getElementById('vlmn');
   event.preventDefault();
   formData = new FormData(myForm);
     var xhttp = new XMLHttpRequest();
     xhttp.onreadystatechange = function() {
       if (this.readyState == 4 && this.status == 200) {
         document.getElementById("vlmn").innerHTML = this.responseText;
       }
     };

     xhttp.open("POST", "volumeflow",true);
     xhttp.send(formData);
     return true;
   }

</script>


<form name="myForm0" action="/volumeflow" method="post" autocomplete="off"
id="vlmn" target="formDestination" onsubmit="return volflow12(event); volflow_check()">
<label>Volume Flow Unit Selection:</label>

<select id='optsv' name='Selectunit' onchange="showForm2()">

    <option value="0">Select Option</option>
    <option value="1">SI units</option>
    <option value="2">US units</option>
</select>

<div id="f3" style="display:none">

<select id='opt3' name='SIunits' onchange="showForm2()">

    <option >Select</option>
    <option value="0">Lit/Sec</option>
    <option value="1">Lit/min</option>
    <option value="2">Lit/hr</option>
    <option value="3">Lit/day</option>
</select>
</div>

<div id="f4" style="display:none">

<select id='opt4' name='USUnits' onchange="showForm2()">

    <option >Select</option>
    <option value="0">Gal/min</option>
    <option value="1">Gal/hr</option>
    <option value="2">Gal/Sec</option>
    <option value="3">Gal/day</option>
</select>

</div>
<br>
<br>

<label> Volume Flow Damping:</label>
	<input type="text" name="damping0" size="10">

<br><br>

<label> Volume Flow Cutoff:</label>
    <input type="text" name="flowcutoff0" size="10">

<br><br>

<label> Volume Decimal Places:</label>
	<input type="text" name="decimal0" size="10">

<br><br>
<span style="margin-right:24.5%;"></span>
                            
<input type="submit" value="Submit">
</form>

Please suggest , why two functions are not able to call

 

 

Thanks with Regards

Ravi

[Ingolme]

The return keyword makes it stop right after the first function call. This is why it's better to use addEventListener() to attach events.