Submit a form based on the javascript event

Question

What I want is to be able to submit a form when ever a user presses some key like tab or enter (i.e. that will case him to lose focus) also clicking outside of the text field should trigger a submit. However when ever he click on the cancel button it should prevent the submit ion

html structure look like this

<form id="form">
  <input id="text" onblur="$(this).closest('form').submit();">
  <a id"submit">submit</a>
  <a id"cancel">cancel</a>
</form>

Currently what happens is that when a user presses enter a form is submitted twice and it should be submitted only once. When he presses a cancel a form is submitted and cancelled right after that.

Does anyone have any idea how can I write some javascript code that can accomplish this behaviour (the idea for is take form the jira in-line edit mode and I am trying to construct something in similar manner)

Sgnl · Accepted Answer · 2014-04-11 07:09:08Z

1

I'm going to provide you with another you could approach this by using jQuery and it's .change() event handler. This way when the user clicks off of the input element, it'll trigger the .change() event and you can submit a form within it's callback function. If the user cancels then you can handle that event normally, same with the submit button click.

The Form:

<form id="form">
  <input id="text">
  <a id="cancel">cancel</a>
  <a id="submit">submit</a>
</form>

The Javascript (jQuery):

$(document).ready(function(){
    $('#submit').click(function(e){
        e.preventDefault();
        //submit the form
        console.log('form submitted by button click')
    });
    $('#cancel').click(function(e) {
        e.preventDefault();
        //close form?
        console.log('cancelled form');
    });

    $('#text').change(function(){
        //submit the form
        console.log('form submitted, maybe hide form now?');
    });
});

The jsFiddle.

edited Apr 11, 2014 at 7:09

answered Mar 15, 2014 at 19:18

Sgnl

1,97123 silver badges31 bronze badges

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

1 Comment

Sgnl Over a year ago

sorry I saw that you needed links, updated my fiddle.

Vasiliy vvscode Vanchuk · Accepted Answer · 2014-03-15 19:04:43Z

0

Keep submit flag to prevent duplication on form submit. Something like that

<form id="form">
  <input id="text" onblur="submitForm('form');">
  <button onclick="submitForm('form');">submit</button>
  <button type="cancel">cancel</button>
</form>
<script>
  var submitFlag = {};

  function submitForm(id){
    if(!submitFlag[id]){
      submitFlag[id] = true;
      $('#' + id).submit();
    } else {
      // do nothing
      // alert('Form already submitted');
      return;
    } 
  }

</script>

answered Mar 15, 2014 at 19:04

Vasiliy vvscode Vanchuk

7,1992 gold badges24 silver badges46 bronze badges

2 Comments

Boris Horvat Over a year ago

I have to use links for the submit/cancel events. as they are triggering ajax refreshes on the page based on the selection (i.e. even if a user selects cancel there are stuff that should happen so all I have to do is prevent a form submittion that is already in progress)

Vasiliy vvscode Vanchuk Over a year ago

Ow, maybe than crate fuction, which will submit form in setInterval. You can save timer descriptor to stop submitting and continue process it as you want?

Collectives™ on Stack Overflow

Submit a form based on the javascript event

2 Answers 2

1 Comment

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related