0

I'm getting submit is not a function when I try to submit this form.

It was suggested that if the submit button is named submit it will override the submit(). In the original there was no name assigned to the submit button. I changed that to name='notSubmit' but I still get the same error.

var desktop=true;
           
        
            function nextPage(){
                
                var minCap = document.getElementById('minCap');
                minCap.style.display='none';
               
               
                var top = document.getElementById('top');
                top.style.display='none';
                var middle = document.getElementById('middle');
                middle.style.display='none';
                var next = document.getElementById('next');
                next.style.display='none';
                
                var bottom = document.getElementById('bottom');
                bottom.style.display='block';
                var back = document.getElementById('back');
                back.style.display='block';
            }
            function backPage(){
                
                var minCap = document.getElementById('minCap');
                minCap.style.display='block';
                
                var top = document.getElementById('top');
                top.style.display='block';
                var middle = document.getElementById('middle');
                middle.style.display='block';
                var next = document.getElementById('next');
                next.style.display='block';
                
                var bottom = document.getElementById('bottom');
                bottom.style.display='none';
                var back = document.getElementById('back');
                back.style.display='none';
                
            }
            function mySubmit(){
                event.preventDefault();
                
                console.log("destop = " + desktop);
                
                var fname = document.getElementById('fname').value;
                var lname = document.getElementById('lname').value;
                var email = document.getElementById('email').value;
                
                var mailformat = /^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3})+$/;
                if(!email.match(mailformat)){
                    var em = document.getElementById('email');
                    em.value = "";
                    email="";
                }
                
                if(fname == "" || lname == "" || email == ""){
                    alert("Please enter name and email");
                    if(!desktop)backPage();
                }else{
                    var myForm = document.getElementById('myForm');
                    console.log(myForm);
                    myForm.submit();
                }
            }
<form action='getInvolvedCtrl.php' method='POST' id='myForm' novalidate onsubmit="mySubmit()">
    <span class='majCap'>Get Involved</span>
    <div id='all'>
        <span id='minCap' class='minCap'>Enter your details below</span>
        <div id='top'>
            <div class='columns'>
                <input class='detailsC' type="text"  name="fname" placeholder="First Name" value='Bob' id='fname'>
                <input class='detailsC' type="text"  name="lname" placeholder="Last Name" value='Cross' id='lname'>
                <input class='detailsC' type="email" name="email" placeholder="Email..."  value='bc@gml.com' id='email'>
                               
                <div class='rowsDet'>
                    <span class='detailsR'><input  type="checkbox" name="wres">Weston Resident</span>
                    <span class='detailsR'><input  type="checkbox" name="news">Quarterly Newsletter</span>
                </div>
            </div>
            <div class='spacer'></div>
        </div>
        <div id='middle'>
            <span class="minCap" >Areas of Interests</span>
            <div class='rowsInt mobileOnly'>
            <div class="columns">
                <span><input type="checkbox" name="energy-int">Energy</span>
                <span><input type="checkbox" name="recycling-int">Recycling</span>
                <span><input type="checkbox" name="composting-int">Composting</span>
                <span><input type="checkbox" name="transport-int">Transportation</span>
            </div>
            <div class="columns">
                <span><input type="checkbox" name="climate-int">Climate</span>
                <span><input type="checkbox" name="trees-int">Trees</span>
                <span><input type="checkbox" name="pollinators-int">Pollinators</span>
                <span><input type="checkbox" name="water-int">Water</span>
                <span><input type="checkbox" name="other-int">Other</span>
            </div>
        </div>
        <div class='desktopOnly rowsInt'>
            <div class="columns">
                <span><input type="checkbox" name="energy-int">Energy</span>
                <span><input type="checkbox" name="recycling-int">Recycling</span>
                <span><input type="checkbox" name="composting-int">Composting</span>
            </div>
            <div class="columns">
                <span><input type="checkbox" name="transport-int">Transportation</span>
                <span><input type="checkbox" name="climate-int">Climate</span>
                <span><input type="checkbox" name="trees-int">Trees</span>
            </div>
            <div class="columns">
                <span><input type="checkbox" name="pollinators-int">Pollinators</span>
                <span><input type="checkbox" name="water-int">Water</span>
                <span><input type="checkbox" name="other-int">Other</span>
            </div>
        </div>
    </div>
    <button id='next' class='mobileOnly' type='button' onclick="nextPage()">next</button>
    <div id='bottom'>
        <span class='minCap' >Request Campaign Information:</span>
        <div class='rowsCam'>
            <div class="columns">
                <span><input type="checkbox" name="cleanup-cpg">Town Cleanup</span>
                <span><input type="checkbox" name="pollinators-cpg">Pollinators</span>
            </div>
            <div class="columns">
                <span><input type="checkbox" name="gas-cpg">Gas Leaks</span>
                <span><input type="checkbox" name="cca-cpg">CCA</span>
            </div>
        </div>
        <div class='spacer2'></div>
        <input id='submit' type="submit" value="SUBMIT" name='notSubmit'>
    </div>
    <button id='back' class='mobileOnly' type='button' onclick="backPage()">back</button>
    </div>
</form>
DCR
  • 14,737
  • 12
  • 52
  • 115

0 Answers0