Formularz onSubmit określić, które przedkłada przycisk został naciśnięty

Mam formularza z dwoma przedłożyć przyciski i jakiś kod:Formularz onSubmit określić, które przedkłada przycisk został naciśnięty

HTML:

<input type="submit" name="save" value="Save" /> 
<input type="submit" name="saveAndAdd" value="Save and add another" />

Javascript:

form.onSubmit = function(evnt) { 
    // Do some asyncrhnous stuff, that will later on submit the form 
    return false; 
}

Oczywiście dwa przedstawienia przyciski osiągają różne rzeczy. Czy jest jakiś sposób, aby się dowiedzieć, który przycisk został naciśnięty, aby później móc go przesłać wykonując thatButton.click()?

Idealnie nie chciałbym modyfikować kodu dla przycisków, wystarczy mieć dodatek czysto javascript, który ma to zachowanie.

Wiem, że FF ma evnt.explicitOriginalTarget, ale nie mogę znaleźć niczego dla innych przeglądarek.

Źródło

2010-08-26 McTrafik

myślę, że to nie powielać, drugie pytanie w kontekście jquery, gdy ten nie jest, zobacz moją odpowiedź poniżej. –

Uzgodnione, JavaScript! = JQuery. – Jon

NIE duplikat .. proszę przejść ponownie przez pytanie. – AKS

Nie w obsłudze zdarzeń przesyłania, nie.

Ale to, co możesz może zrobić, to dodać procedury obsługi kliknięć do każdego zgłoszenia, które poinformują handlarza, który kliknął.

Oto pełna przykład (przy użyciu jQuery dla zwięzłość)

<html> 
<head> 
    <title>Test Page</title> 
    <script src="http://code.jquery.com/jquery-latest.js"></script> 
    <script type="text/javascript"> 

    jQuery(function($) { 
     var submitActor = null; 
     var $form = $('#test'); 
     var $submitActors = $form.find('input[type=submit]'); 

     $form.submit(function(event) { 
      if (null === submitActor) { 
       // If no actor is explicitly clicked, the browser will 
       // automatically choose the first in source-order 
       // so we do the same here 
       submitActor = $submitActors[0]; 
      } 

      console.log(submitActor.name); 
      // alert(submitActor.name); 

      return false; 
     }); 

     $submitActors.click(function(event) { 
      submitActor = this; 
     }); 
    }); 

    </script> 
</head> 

<body> 

    <form id="test"> 

    <input type="text" /> 

    <input type="submit" name="save" value="Save" /> 
    <input type="submit" name="saveAndAdd" value="Save and add another" /> 

    </form> 

</body> 
</html>

Źródło

2010-08-26 17:13:33

... alternatywnie możesz złapać kliknięcia podczas bańki, dodając procedurę obsługi onclick do samego formularza, która sprawdza, czy kliknięty element był przyciskiem przesyłania; to może być prostsze w niektórych przypadkach. – Doin

@Doin Przykład? – JeromeJ

@JeromeJ: Edytowano tę odpowiedź, dodając przykład; mam nadzieję, że wzajemna ocena pozwoli na to. (Powiedziałbym to jako moją własną odpowiedź, ale pytanie jest zamknięte). – Doin

pierwsza sugestia:

utworzyć zmienną JavaScript, który będzie odwoływać przycisk kliknięciu. Nazwijmy go buttonIndex

<input type="submit" onclick="buttonIndex=0;" name="save" value="Save" /> 
<input type="submit" onclick="buttonIndex=1;" name="saveAndAdd" value="Save and add another" />

Teraz można uzyskać dostęp do tej wartości. 0 oznacza kliknięcie przycisku zapisu, 1 oznacza kliknięcie przycisku SaveAndAdd.

druga sugestia

Sposób bym sobie tego celu jest utworzenie dwóch JS funkcje, które obsługują każdego z dwóch przycisków.

Najpierw upewnij się, że formularz ma prawidłowy identyfikator. W tym przykładzie, powiem identyfikator to "myForm"

zmiana

<input type="submit" name="save" value="Save" /> 
<input type="submit" name="saveAndAdd" value="Save and add another" />

<input type="submit" onclick="submitFunc();return(false);" name="save" value="Save" /> 
<input type="submit" onclick="submitAndAddFunc();return(false);" name="saveAndAdd" value="Save and add

powrót (fałsz) będzie uniemożliwić przesyłanie formularza od rzeczywistości przetwarzanie i wywoływanie funkcji niestandardowych, w których można przesłać formularz później.

Zmodyfikowane funkcje będą działać coś takiego ...

function submitFunc(){ 
    // Do some asyncrhnous stuff, that will later on submit the form 
    if (okToSubmit) { 
     document.getElementById('myForm').submit(); 
    } 
} 
function submitAndAddFunc(){ 
    // Do some asyncrhnous stuff, that will later on submit the form 
    if (okToSubmit) { 
     document.getElementById('myForm').submit(); 
    } 
}

Źródło

2010-08-26 17:01:00 Dutchie432

Sort-of. Będę musiał następnie dodać ukryte pola w każdej z funkcji przesyłania, jedna o nazwie = "save" value = "..." i itp. I staram się tego uniknąć. Nie zrozum mnie źle, to poprawne rozwiązanie. Po prostu szukam czegoś bardziej eleganckiego. – McTrafik

Ukryte pola? Po co? – Dutchie432

# 2 nie zadziała - gdy użyjesz programów obsługi zdarzeń opartych na DOM, nic nie zostanie wykonane po instrukcji 'return'. Zatem twoje wywołania funkcji 'submitFunc()' i 'submitAndAddFunc()' nigdy nie będą uruchamiane. –

Dlaczego nie przelotowe wejść i następnie dodać onclick ładowarki do siebie?

Nie trzeba to zrobić w HTML, ale można dodać do obsługi każdego przycisku jak:

button.onclick = function(){ DoStuff(this.value); return false; } // return false; so that form does not submit

Następnie czynność może „robić rzeczy” według tych dwóch wartości zdałeś:

function DoStuff(val) { 
    if(val === "Val 1") { 
     // Do some stuff 
    } 
    // Do other stuff 
}

Źródło

2010-08-26 17:01:22 palswim

Jedyny sposób, w jaki mogę to zrobić, to ustawienie zmiennej globalnej z wciśniętym ostatnim przyciskiem. To nie jest zły pomysł. – McTrafik

W porządku. Ale myślę, że nie jestem do końca pewien, co chcesz robić. – palswim

używam Ext, więc skończyło się w ten sposób:

var theForm = Ext.get("theform"); 
var inputButtons = Ext.DomQuery.jsSelect('input[type="submit"]', theForm.dom); 
var inputButtonPressed = null; 
for (var i = 0; i < inputButtons.length; i++) { 
    Ext.fly(inputButtons[i]).on('click', function() { 
     inputButtonPressed = this; 
    }, inputButtons[i]); 
}

a kiedy nadszedł czas przedstawienia zrobiłem

if (inputButtonPressed !== null) inputButtonPressed.click(); 
else theForm.dom.submit();

Czekaj, mówisz. To będzie pętla, jeśli nie będziesz ostrożny. Więc onSubmit musi czasami powrócić prawdziwych

// Notice I'm not using Ext here, because they can't stop the submit 
theForm.dom.onsubmit = function() { 
    if (gottaDoSomething) { 
     // Do something asynchronous, call the two lines above when done. 
     gottaDoSomething = false; 
     return false; 
    } 
    return true; 
}

Źródło

2010-08-27 22:04:11 McTrafik

<form onsubmit="alert(this.submited); return false;"> 
    <input onclick="this.form.submited=this.value;" type="submit" value="Yes" /> 
    <input onclick="this.form.submited=this.value;" type="submit" value="No" /> 
</form>

Źródło

2011-06-23 10:06:09

@McLosysCreative dzięki, zaktualizowany. http://jsfiddle.net/dj3QE/ –

szkielety, ale potwierdziła pracę, przykład:

<script type="text/javascript"> 
var clicked; 
function mysubmit() { 
    alert(clicked); 
} 
</script> 
<form action="" onsubmit="mysubmit();return false"> 
    <input type="submit" onclick="clicked='Save'" value="Save" /> 
    <input type="submit" onclick="clicked='Add'" value="Add" /> 
</form>

Źródło

2012-04-08 12:52:47 Henrik

Wszystkie powyższe odpowiedzi są bardzo dobre, ale ja oczyściłem go trochę.

To rozwiązanie automatycznie umieszcza nazwę przycisku przesyłania wciśniętego w ukryte pole akcji. Zarówno javascript na stronie, jak i kod serwera mogą w razie potrzeby sprawdzić wartość ukrytego pola akcji.

Rozwiązanie wykorzystuje jQuery do automatycznego zastosowania do wszystkich przycisków przesyłania.

<input type="hidden" name="action" id="action" /> 
<script language="javascript" type="text/javascript"> 
    $(document).ready(function() { 
     //when a submit button is clicked, put its name into the action hidden field 
     $(":submit").click(function() { $("#action").val(this.name); }); 
    }); 
</script> 
<input type="submit" class="bttn" value="<< Back" name="back" /> 
<input type="submit" class="bttn" value="Finish" name="finish" /> 
<input type="submit" class="bttn" value="Save" name="save" /> 
<input type="submit" class="bttn" value="Next >>" name="next" /> 
<input type="submit" class="bttn" value="Delete" name="delete" /> 
<input type="button" class="bttn" name="cancel" value="Cancel" onclick="window.close();" />

Następnie wpisz taki kod do formularza, aby wysłać handler'a.

if ($("#action").val() == "delete") { 
    return confirm("Are you sure you want to delete the selected item?"); 
}

Źródło

2012-05-02 19:45:01

To zależy od zdarzenia kliknięcia, które jest obsługiwane przed przesłaniem formularza. Czy tak zawsze będzie? W przypadku formularzy ładowanych dynamicznie w dialogach modalnych należy użyć delegowanego programu obsługi i trzeba go dołączyć, aby używał celu zdarzenia do ustalenia, który formularz zawiera kliknięty element i upewnić się, że ukryte pole, na które kierujesz, znajduje się w środku ta forma. – Triynko

OP stwierdził, że nie chce modyfikować kodu dla przycisków. To jest najmniej inwazyjna odpowiedź, którą mogę wymyślić, używając innych odpowiedzi jako przewodnika. Nie wymaga dodatkowych ukrytych pól, pozwala na pozostawienie kodu przycisku w stanie nienaruszonym (czasami nie masz dostępu do tego, co go generuje) i dostarcza informacji, których szukałeś z dowolnego miejsca w kodzie ... który przycisk został użyty do przesłania formularza. Nie oceniłem, co się stanie, jeśli użytkownik użyje klawisza Enter, aby przesłać formularz, zamiast klikać.

<script language="javascript" type="text/javascript"> 

    var initiator = ''; 
    $(document).ready(function() { 
     $(":submit").click(function() { initiator = this.name }); 
    }); 

</script>

Następnie masz dostęp do zmiennej "inicjator" w dowolnym miejscu, w którym może zajść konieczność sprawdzenia. Mam nadzieję że to pomoże.

~ Spanky

Źródło

2012-11-02 22:45:13 Spanky

Formularz onSubmit określić, które przedkłada przycisk został naciśnięty

Odpowiedz

Powiązane problemy