Jump to content
Sign in to follow this  
ravi_k

Calling two functions

Recommended Posts

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

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
Sign in to follow this  

×