Javascript submit() is not submitting the form

Question

This is my code.

HTML

<form id="add_new_video" method="post" class="appnitro" style="margin-left:70px;" action="<?php echo base_url()?>videos/save">
<input type="text" name="name">
<button type="submit" class="dark_text_link" disabled id="submit" href="javascript:void(0);" onclick="return addVideo();">Add New Video</button>
</form>

And the JS is

function addVideo() {
    //disables the onclick event of the element for 1 seconds
    document.getElementById('submit').disabled = true;
    setTimeout(function(){document.getElementById('submit').disabled = false;},1000);
    document.getElementById('add_new_video').submit();
}

When I click the submit button, the button gets disabled for a second and re appears but the form does not submit. I'm still a newbie in javascript so there might be things I overlooked. Any idea ?

Never call any form element name or id="submit" – mplungjan Sep 06 '16 at 09:15 — mplungjan, Sep 06 '16 at 09:15

score 2 · Accepted Answer · answered Sep 06 '16 at 09:21

Several things

Never use the reserved word "submit" in a form element's name or ID - it will hide the submit event handler from the JavaScript
use the onsubmit to disable the button instead of using weird inline handlers. There is no href on a button for example
You should not disable a button you need to click before clicking it

Like this:

<form id="add_new_video" method="post" class="appnitro" style="margin-left:70px;" action="<?php echo base_url()?>videos/save">
   <input type="text" name="name">
   <button type="submit" id="buttonSub" class="dark_text_link">Add New Video</button>
 </form>

using

window.onload=function() {
  document.getElementById("add_new_video").onsubmit=function() {
    document.getElementById('buttonSub').disabled = true;
    setTimeout(function(){document.getElementById('buttonSub').disabled = false;},1000);
  }        
}

You do not actually need to ENABLE the form button again since you submit to the same page. The button will be enabled when the page reloads - this is of course not true if you target the form elsewhere

score 1 · Answer 2 · answered Sep 06 '16 at 09:16

1

Replace button with this tag element.

<input type="submit" class="dark_text_link" disabled id="btnsubmit" href="javascript:void(0);" onclick="return addVideo();"/>

answered Sep 06 '16 at 09:16

Hameed Syed

3,149
1
14
24

Replace the submit variable in javascript to the btnsubmit except last line's submit. – Hameed Syed Sep 06 '16 at 09:49

Javascript submit() is not submitting the form

2 Answers2

Linked

Related