CODEWITHSUNDEEP
javascriptjquery
user2417624
user2417624

Reputation: 693

e.preventDefault doesn't work 2

Can anyone help me to find out why this script doesn't work? After hitting the submit button, my form is still being submitted.

Here is the code:

submitadd.submit(function(e){     

  var submitadd = jQuery('#submitadd'),
      yearofmanufacturing = jQuery('#yearofmanufacturing'),
      price = jQuery('#price'),
      addtext = jQuery('#addtext');

  if(yearofmanufacturing.val()==''){
    jQuery('#yearofmanufacturing').addClass('bordered2');  
    jQuery('#yearofmanufacturing').removeClass('styled_select'); 
    jQuery("#yearofmanufacturing").attr("placeholder", "Εισάγετε Χρονολία").placeholder();
    e.preventDefault();
    return false;
    alert('yearof......enter in the if');  
  } 
  else {
    alert("yearnotempty?");
  }

  if(price.val()=='') {
    jQuery('#price').addClass('bordered2');  
    jQuery('#price').removeClass('styled_select'); 
    jQuery("#price").attr("placeholder", "Εισάγετε τιμή").placeholder();
    e.preventDefault();
    return false;
    alert('price...enter in the if');
  }

  if(addtext.val()==''){
    jQuery('#addtext').addClass('bordered2');  
    jQuery('#addtext').removeClass('styled_select'); 
    jQuery("#addtext").attr("placeholder", "Εισάγετε περιγραφή αγγελίας").placeholder();
    e.preventDefault();
    return false;
    alert('add text...enter in the if');
  }

  alert('addtext = ' +addtext.val());
});

None of the alerts shows when the submit has been clicked. Any help will be deeply appreciated.

Regard, John

Upvotes: 0

Views: 153

Answers (4)

AfromanJ
AfromanJ

Reputation: 3932

To save space you could do something like this:

JQuery

jQuery('#submitadd').submit(function(){     

    var checks = [jQuery('#yearofmanufacturing'), 
                  jQuery('#price'), 
                  jQuery('#addtext')];

    for(var i = 0; i < checks.length; i++){
        var x = checks[i];
        if(x.val() == ''){
            x.addClass('bordered2').removeClass('styled_select'); 
            x.prop("placeholder", "Εισάγετε Χρονολογία");
            console.log('Value for ' + x.prop('id') + ' is empty.');

            return false;
        }
        else {
            console.log('Value for ' + x.prop('id') + ' is not empty.');
        }
    }

});

Demo

I have rewritten most of the function but it still does the same stuff. I have removed e.preventDefault();, instead I am using return false;.

If the value is empty. This is also logged to the console (console.log()), this is visible when you debug with F12

Note Aksu's answer too:

You have specified the submitadd variable inside the event. You must move it outside to get event handler fire, otherwise the variable isn't defined, and the code doesn't work.

Upvotes: 1

ˈvɔlə
ˈvɔlə

Reputation: 10242

The solution: Move var submitadd = jQuery('#submitadd'); out of your function!

I would recommend you some things:

  • Use your jQuery variables:

    Instead of using yearofmanufacturing, you write jQuery('#yearofmanufacturing') multiple times

  • Naming conventions:

    I would recommend you to use variable names like $price instead of price, if you are declaring jQuery objects.

  • Don't write unreachable code:

    You are trying to call alert() after returning something. This doesn't makes any sense.

  • Don't abuse alert() for debug issues:

    Use console.log(), console.debug(), console.info() and console.warn() for best debugging exceperience.

  • Crossbrowser support:

    Internet Explorer <= 8 doesn't know .preventDefault(). Be happy with something like this: (e.preventDefault) ? e.preventDefault() : e.returnValue = false;

Upvotes: 0

Jai
Jai

Reputation: 74738

change this:

 submitadd.submit(function(e){

to this:

 jQuery('#submitadd').submit(function(e){

In your case the variable submitadd is been used before its been declared.

or you can declare it before submit:

     var submitadd = jQuery('#submitadd')
     submitadd.submit(function(e){

Upvotes: 0

aksu
aksu

Reputation: 5235

You have specified the submitadd variable inside the event. You must move it outside to get event handler fire, otherwise the variable isn't defined, and the code doesn't work.

var submitadd = jQuery('#submitadd');

// user fill all fields as it should, so form can be submitted
submitadd.submit(function(e){     

   var  yearofmanufacturing = jQuery('#yearofmanufacturing'),
        price = jQuery('#price'),
        addtext = jQuery('#addtext');
   ...

Upvotes: 0

Related Questions