javascript - Alternative to explicitOriginalTarget.id for chrome and IE 8 - Stack Overflow

admin管理员组

文章数量:1405860

I'm trying to find a cross browser patible 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 acplish 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 patible 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');" />

I'm trying to find a cross browser patible 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 acplish 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 patible 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');" />

• javascript
• jquery
• internet-explorer-8

Share Follow edited May 23, 2017 at 11:45 CommunityBot 111 silver badge asked Nov 9, 2011 at 16:04 enderender 24544 silver badges1212 bronze badges 1

• possible duplicate of Which submit button was pressed? – Andy E Commented Nov 9, 2011 at 16:12

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 3

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./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).

Given:

<div id="parent">
    <div id="child">
        clicky
    </div>
</div>

We can apply the following logic: (UPDATED)

$('#parent').live('click', function(e){
    var target = e.originalEvent || e.originalTarget;
    console.log($(target.srcElement || target.originalTarget).attr('id'));
});

This gives me 'child' in Chrome, IE9, and FF8 if I click on child.

本文标签： javascriptAlternative to explicitOriginalTargetid for chrome and IE 8Stack Overflow