Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Alternative to explicitOriginalTarget.id for chrome and IE 8

I'm trying to find a cross browser compatible way of picking out the id attribute of a button that is clicked during a form submit that has two different submit buttons. I was able to accomplish this for FireFox with the following, but it won't work in IE 8 or Chrome because they don't support explicitOriginalTarget.

   $("#postForm, #dialogPostForm, #pastPostForm").live('submit', function(event) {
     event.preventDefault();
     if (event.originalEvent.explicitOriginalTarget.id === 'pastPosts'){
     ...SNIP...

Can someone suggest a cross browser compatible way to do this?

UPDATE I've tried using the answer from How can I get the button that caused the submit from the form submit event?, but I'd like to use the .live jquery method and use the event object to select the originating input submit id.

UPDATE Here is my form that I am trying to get the originating submit button id from:

<form id="postForm" action="{% url account_tracker mashup.pk %}?fuzzy=true" method="post">
    <div class="mygoal">Update Your Progress: {{ form.post }}
    <input type="submit" value="+  1" class="formbtn" style="font-size:18px;"/>
    <input type="submit" value="This week" style="font-size:18px;" id="pastPosts" class="formbtn"/>         
    <span id="result" class="results"></span>
    </div>
</form>

UPDATE I came up with my own solution. Add an onclick attribute that adds a "name" attribute to the form. Then in the form processing check if the form name is "past" and do something with it then remove the attribute after the form is finished processing. This works on all browsers as far as I can tell.

 <input type="submit" value="This week" style="font-size:18px;" id="pastPosts" class="formbtn" onclick="$('#postForm').attr('name', 'past');" />
like image 899
ender Avatar asked Nov 09 '11 16:11

ender


1 Answers

There is no alternative.

That is a Firefox-only property.

This is a really old question and needs to be answered.

I've Googled about this and found a solution on http://www.webmuse.co.uk/blog/using-forms-with-multiple-submit-buttons-and-jquery-events/

Basically, try to get the focused element.

An example:

(function($){
  $(document).ready(function(){
    
    $('#user_form').submit(function(event){
     
      event.preventDefault(); //stops submission
      
      $('#name_submit')
        .text(
          //searches all the submit buttons
          $('input[type="submit"], button[type="submit"]',this)
            .filter(':focus') //finds the focused one
            .attr('name') //takes the name
        );
      
    });
    
  });
})(jQuery);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>

<form action="#" id="user_form">
  <input type="email" placeholder="Email"/><br>
  <input type="password" placeholder="Password"/><br>
  
  <input type="submit" name="login" value="Login"/>
  <input type="submit" name="register" value="Register"/>
</form>
<br>
Clicked submit name: <span id="name_submit">(none)</span>

I've tested this and it works in IE7 and Firefox (at least the current version).

like image 180
Ismael Miguel Avatar answered Nov 13 '22 19:11

Ismael Miguel