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

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; });

Check my answer once again, I have made some changes in it. Also refer stackoverflow.com/questions/5081674/…
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

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Linked

Related