HTML फॉर्म में मल्टीपल सबमिट बटन का उपयोग कैसे करें?

परिचय

हाँ, HTML फॉर्म में मल्टीपल सबमिट बटन शामिल किए जा सकते हैं। यहाँ एक सरल उदाहरण दिया गया है।

उदाहरण: MVC VB.NET के साथ

इस उदाहरण में, मैं व्यू में तीन बटनों का उपयोग कर रहा हूँ जिनका नाम समान है लेकिन मान अलग-अलग हैं। कंट्रोलर में, मैं समान नाम के पैरामीटर cmd (स्ट्रिंग टाइप) का उपयोग कर रहा हूँ और इसकी तुलना बटन के मान (Save, Update, Delete) से कर रहा हूँ।

व्यू (multisubmit.aspx)

<html xmlns="https://www.w3.org/1999/xhtml"> 
<head runat="server"> 
    <title>multiple submit button</title> 
</head> 
<body> 
    <div> 
        <% Using Html.BeginForm()%> 
        <%: Html.ValidationSummary(True) %> 
        <button type="submit" id="postback1" name="cmd" value="Save" >Save</button> 
        <button type="submit" id="postback2" name="cmd" value="Update">Update</button> 
        <button type="submit" id="postback3" name="cmd" value="Delete">Delete</button> 
        <%: Html.Encode(ViewData("msg"))%> 
        <% End Using%> 
    </div> 
</body> 
</html>

कंट्रोलर (Test.controller)

Function multisubmit() As ActionResult 
    Return View() 
End Function 

<HttpPost()> _ 
Function multisubmit(ByVal cmd As String) As ActionResult 
    If (cmd = "Save") Then 
        ViewData("msg") = " SAVE" 
    ElseIf (cmd = "Update") Then 
        ViewData("msg") = "UPDATE" 
    ElseIf (cmd = "Delete") Then 
        ViewData("msg") = "DELETE" 
    End If 
    Return View() 
End Function

आधुनिक दृष्टिकोण (Vanilla HTML/JavaScript)

आधुनिक वेब विकास में, आप इसे इस तरह लागू कर सकते हैं:

HTML

<form id="multiActionForm">
    <input type="text" name="data" placeholder="कुछ डेटा दर्ज करें" required>
    <br><br>
    <button type="submit" name="action" value="save">सेव करें</button>
    <button type="submit" name="action" value="update">अपडेट करें</button>
    <button type="submit" name="action" value="delete">हटाएं</button>
    <button type="submit" name="action" value="preview">पूर्वावलोकन</button>
</form>
<div id="result"></div>

JavaScript (क्लाइंट-साइड हैंडलिंग)

document.getElementById('multiActionForm').addEventListener('submit', function(e) {
    e.preventDefault();
    
    const formData = new FormData(this);
    const action = formData.get('action');
    const data = formData.get('data');
    
    // सर्वर पर भेजें
    fetch('/api/process', {
        method: 'POST',
        body: formData
    })
    .then(response => response.json())
    .then(result => {
        document.getElementById('result').innerHTML = 
            `एक्शन: ${action}, डेटा: ${data}, परिणाम: ${result.message}`;
    });
});

सर्वर-साइड (Node.js/Express उदाहरण)

app.post('/api/process', (req, res) => {
    const { action, data } = req.body;
    
    let message = '';
    switch(action) {
        case 'save':
            message = 'डेटा सेव किया गया: ' + data;
            break;
        case 'update':
            message = 'डेटा अपडेट किया गया: ' + data;
            break;
        case 'delete':
            message = 'डेटा हटाया गया: ' + data;
            break;
        case 'preview':
            message = 'पूर्वावलोकन: ' + data;
            break;
        default:
            message = 'अज्ञात एक्शन';
    }
    
    res.json({ success: true, message });
});

महत्वपूर्ण बिंदु

• सभी बटनों का name एट्रिब्यूट समान रखें (उदाहरण: name="action")
• प्रत्येक बटन का value एट्रिब्यूट अद्वितीय होना चाहिए
• type="submit" एट्रिब्यूट आवश्यक है
• सर्वर-साइड पर req.body.action या Request.Form["cmd"] से मान पढ़ें

एक्सेसिबिलिटी टिप्स

• बटनों के लिए स्पष्ट लेबल उपयोग करें
• खतरनाक एक्शन (डिलीट) के लिए कन्फर्मेशन डायलॉग जोड़ें
• कीबोर्ड नेविगेशन सुनिश्चित करें