how to use onclick in addeventlistener to prevent form data to be submitted?

Question

This is just some part of my code .the thing which I am not understanding is how to use onclick in my html to prevent my php file from running. I have html file where my input is button type and I am using DOM2 that is .addeventlistener

function checku(event) {

    var start=event.currentTarget;
    var warning="";
    if(start.name=="pressed"){
        alert("sdf");
         var temp=document.getElementById("form");
    }
    else
        var temp=start;

        var size=temp.length;

    for(var i=0;i<size;i++) {
        //alert(temp[i].name);

        if(temp[i].name=="Email"){


            var re = /^[0-9a-zA-Z]+@+[a-zA-Z]+?\.[a-z]{2,3}$/; 
            var len=temp[i].value.length;
            var t=re.test(temp[i].value)

            if(t==true||len==0){
                document.getElementById("user").innerHTML="";
                //  Email.style.color="black";
                if(len==0){
                    warning+="Email Address cannot be empty, ";
                    //return false;
                }
                //return true;

             } else {
                 user.style.fontStretch="condensed";
                 user.style.color="red";
                 user.style.fontWeight="600";
                 user.style.fontFamily="Arial, Helvetica, sans-serif";
                 //  Email.style.color="red";
                 document.getElementById("user").innerHTML="It should contain @ and .com or.ca ";
                 warning+="Email Address, ";
                 //return false;
             }
        }

What is the error you are getting? Your `temp` variable is not available in outside block. — Hari Lamichhane, Mar 26 '17 at 00:40
actually the problem is the php file runs anyway regardless of the inputs being valid or inavalid form id="form" method="POST" action="signup.php"> — Karan S Warraich, Mar 26 '17 at 00:46
why your tag question is only php? I see only javascript code — inye, Mar 26 '17 at 01:21
I actually I only uploaded the js I thought only the js needs to be changed — Karan S Warraich, Mar 26 '17 at 01:24
Possible duplicate of [Prevent form submission with enter key](https://stackoverflow.com/questions/1563062/prevent-form-submission-with-enter-key) — jhpratt, Aug 26 '17 at 21:55

score 0 · Answer 1 · answered Mar 29 '17 at 07:02

The button inside your form tag, when clicked, will trigger the submit event and submit the form to the URL specified in the action attribute of the form.

If you are adding an event to carry out validation or other stuff, make sure that you change your button's type attribute to button i.e. <button type='button'>Submit</button>

pOoOf · Accepted Answer · 2019-10-13T16:00:40.040

0

Try this code.

var div = document.getElementById('myDiv');
div.addEventListener('click', function(e){
    e.preventDefault();
    // Your code here
});

edited Oct 13 '19 at 16:00

answered Aug 26 '17 at 20:42

pOoOf

119
8

how to use onclick in addeventlistener to prevent form data to be submitted?

2 Answers2