表单仍在提交，尝试使用e.preventDefault（）;

Question

So I have this form. I want to check if user has validaty the captcha, but have problems. Here is the form, that checks the function.

<form data-id="embedded_signup:form" id="myForm" class="ctct-custom-form Form" name="embedded_signup" method="POST" action="https://visitor2.constantcontact.com/api/signup" onsubmit="check_if_capcha_is_filled()">

Here is the function that determines whether doSubmit (the captcha) has been validated.

function check_if_capcha_is_filled(e){
  if(doSubmit) return true;
  e.preventDefault();
  alert('Fill in the capcha!');
  return false;
};

But I get an error

Uncaught TypeError: Cannot read property 'preventDefault' of undefined
at check_if_capcha_is_filled

Any pointers to what I am missing? Thank you.

Answer 1

Your e.preventDefault is being used incorrectly. It will do nothing because you're passing an event to a function, you want to attach it to the event handler like this:

$('form').on('submit', function(e)
{
    e.preventDefault();
    //rest of code
})

this will stop the submit action.

refs: http://api.jquery.com/event.preventDefault/

Answer 2

Is this what you want?

<form data-id="embedded_signup:form" id="myForm" class="ctct-custom-form Form" name="embedded_signup" method="POST" action="https://visitor2.constantcontact.com/api/signup">

Then in your js file:

function check_if_capcha_is_filled(){
    if (doSubmit){
        return true;
    }else{
        return false;
    }
};

$('#myForm').on('submit', function(e){
    if (!check_if_capcha_is_filled){
        e.preventDefault();
    }
});

Answer 3

You have two issues here. Firstly you need to return the function from the onsubmit event attriubute. Secondly, you're not passing the event in to the function - however this will only work where a global event is available, ie. not Firefox.

To fix the issue, and improve your logic, you can instead use addEventListener() to unobtrusively add the event handler to the element, and remove the outdated on* event attribute. Try this:

 var doSubmit = false; document.getElementById('myForm').addEventListener('submit', function(e) { if (doSubmit) return; e.preventDefault(); alert('Fill in the capcha!'); }); 

 <form data-id="embedded_signup:form" id="myForm" class="ctct-custom-form Form" name="embedded_signup" method="POST" action="https://visitor2.constantcontact.com/api/signup"> <button type="submit">Submit</button> <form> 

Answer 4

Use on event listener

change it to

<form data-id="embedded_signup:form" id="myForm" class="ctct-custom-form Form" name="embedded_signup" method="POST" action="https://visitor2.constantcontact.com/api/signup" >

 $('form').on('submit', function(e){
    // validation code here
    if(!valid) {
      e.preventDefault();
    }
  });

Answer 5

Using jQuery and if you want to confirm the submit.

<button name="delete" class="submitbutton">Delete</button>

$('.submitbutton').click(function() {
    var buttonpressed;
    buttonpressed = $(this).attr('name');
    var r = confirm("Please confirm to " + buttonpressed );

    if (r == true) {
        $('#yourformid').submit();
    } else {
        return (false);
    }
});