CODEWITHSUNDEEP
javascript
Rabin Lama Dong
Rabin Lama Dong

Reputation: 2476

Javascript submit() is not submitting the form

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 ?

Upvotes: 0

Views: 102

Answers (2)

mplungjan
mplungjan

Reputation: 178403

Several things

  1. Never use the reserved word "submit" in a form element's name or ID - it will hide the submit event handler from the JavaScript
  2. use the onsubmit to disable the button instead of using weird inline handlers. There is no href on a button for example
  3. 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

Upvotes: 2

Hameed Syed
Hameed Syed

Reputation: 4275

Replace button with this tag element.

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

Upvotes: 1

Related Questions