prevent submitting form in jQuery

Question

I want to add data to a selective cell of a table. I wrote this code in JavaScript.

var rowIndex = 10;
var colIndex = 5;
var dateTable = document.getElementById('timeTable');
dateTable.rows[rowIndex].cells[colIndex].innerHTML = "Su";

I wanted to use the same concept in jQuery as:

$('input[name=add_button]').click(function(e) {
    var dateTable = document.getElementById('timeTable');
    var rowIndex = $('[name=days]').val();
    var colIndex = $('[name=times]').val();
    var text = $('input[name = text]').val();
    dateTable.rows[rowIndex].cells[colIndex].innerHTML = text;
    e.preventDefault();
});

My problem is: preventDefault() method should prevent my form to be submitted. It is not preventing form submission. If I remove the dateTable.rows[rowIndex].cells[colIndex].innerHTML = text; line, the form is not submitted. I think there is some problem with this particular line. Please help me sorting this. If there is better option available in jQuery please tell me. I shall be able to use the colIndex and rowIndex to find the position of the cell.

Thanks

can you post the html ? colIndex and rowIndex might not being set to what you expect and are in fact undefined. Did you see any error in console ? — SachinGutte
– SachinGutte, Commented Apr 8, 2013 at 5:01
convert val() to number. Hard to say you aren't getting errors...form might be submitting faster than errors show in console. Put `preventDefault at begining so if errors occur afterwards form won't submit — charlietfl
– charlietfl, Commented Apr 8, 2013 at 5:08

Rohan Kumar · Accepted Answer · 2013-04-08 05:26:46Z

1

Try this:

Add return false; in your form tag like

<form onsubmit="return false;" ......>

</form>

Also check you indexes that these are starting from 0 or 1, if these are starting from 1 then you have to decrease it by 1 before using it,

like dateTable.rows[rowIndex-1].cells[colIndex-1].innerHTML = text;

Actually when you click on button it will prevent its default behavior, not other elements behavior(form in your case).

So, I think it is not possible to prevent your form here.

Alternative Code you can use:

$('form#myForm').on('submit',function(e){
    e.preventDefault();
    var dateTable = document.getElementById('timeTable');
    var rowIndex = $('[name=days]').val();
    var colIndex = $('[name=times]').val();
    var text = $('input[name = text]').val();
    dateTable.rows[rowIndex].cells[colIndex].innerHTML = text;
    return false;
});

edited Apr 8, 2013 at 5:26

answered Apr 8, 2013 at 5:14

Rohan Kumar

40.7k11 gold badges81 silver badges111 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

NewUser Over a year ago

Do I have any jQuery alternative for this statement?

Rohan Kumar Over a year ago

Check my answer once again, I have made some changes in it. Also refer stackoverflow.com/questions/5081674/…

Rohan Kumar Over a year ago

This will not fulfill, what you needed?

NewUser Over a year ago

Can you please continue this in chat.stackoverflow.com/rooms/27752/…

Collectives™ on Stack Overflow

prevent submitting form in jQuery

1 Answer 1

4 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related