JavaScript - 對相同輸入類型但名稱不同的不同操作

Question

我的js腳本存在問題，因爲兩個按鈕都會打開同一個站點1.我不知道爲什麼？

有人能幫我解決這個問題嗎？

$('#trackAndTraceForm').submit(function(event) { 
 
    var val = $('input[name="numer"]', this).val(); 
 
    elementClicked = $(event.target); 
 
    var typeBtn = elementClicked.attr('name'); 
 

 
    if (typeBtn == 'spr') { 
 

 

 
    if (val.substring(0, 1) != '0') { 
 
     //console.log('nie zero'); 
 
     var action = 'http://92.43.115.24:8080/ApolloWebBooking/WebBooking/StatusyPrzesylki.aspx'; 
 
     $(this).attr('action', action); 
 
    } else { 
 
     var action = 'http://apollo.loxx.pl:8080/ApolloWebBooking/WebBooking/StatusyPrzesylki.aspx'; 
 
     $(this).attr('action', action); 
 
    } 
 
    } else if (typeBtn == 'pod') { 
 
    var action = 'http://www.loxx.pl/loxx_it/loxxwarpod.php'; 
 
    $(this).attr('action', action); 
 
    } else { 
 
    //do nothing; 
 
    } 
 

 

 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<form id="trackAndTraceForm" target="_blank" class="form-horizontal" enctype="application/x-www-form-urlencoded" method="get" action="http://apollo.loxx.pl:8080/ApolloWebBooking/WebBooking/StatusyPrzesylki.aspx"> 
 
    <span>Track and Trace:</span> 
 
    <input type="text" value="" name="numer" placeholder="Numer listu przewozowego" /> 
 
    <input type="submit" name="spr" class="btn btn-sm btn-primary" value="Sprawdz" /> 
 
    <input type="submit" name="pod" class="btn btn-sm btn-primary" value="POD" /> 
 
</form>

如果我點擊POD按鈕的動作是一樣的像Sprawdz與URL

http://apollo.loxx.pl:8080/ApolloWebBooking/WebBooking/StatusyPrzesylki.aspx?numer=0317037128&pod=POD 

Answer 1

您需要防止原始事件觸發從默認提交操作。你通過呼叫 event.preventDefault();來做到這一點。

這裏是你的代碼需要什麼樣子：

$('#trackAndTraceForm').submit(function(event) { 
    event.preventDefault(); // <-- the important bit 
    // ... 

    if (typeBtn == 'spr') { 
    // ... 
    } else if (typeBtn == 'pod') { 
    // ... 
    } 
}); 

看起來就像你不能提交事件被稱爲後更改事件的action屬性。

你需要做的是事件偵聽器添加到您的每一個按鈕，改變action屬性，然後提交表單：

function changeFormAction(newAction) { 
    $('#trackAndTraceForm').attr('action', newAction); 
} 
$('input[name="spr"]') 
    .click(function(e) { 
    e.preventDefault(); 
    var value = $('input[name="numer"]').val(); 
    var newAction = value.startsWith('0') ? 
     'http://apollo.loxx.pl:8080/ApolloWebBooking/WebBooking/StatusyPrzesylki.aspx' :  'http://92.43.115.24:8080/ApolloWebBooking/WebBooking/StatusyPrzesylki.aspx'; 

    changeFormAction(newAction); 
    $('#trackAndTraceForm').submit(); 
} 
$('input[name="pod"]') 
    .click(function(e) { 
    e.preventDefault(); 
    changeFormAction('http://www.loxx.pl/loxx_it/loxxwarpod.php'); 
    $('#trackAndTraceForm').submit(); 
}