JavaScript - 同じ入力タイプではあるが異なる名前の別のアクション

Question

両方のボタンが同じサイト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をクリックすると、ボタンのアクションは、デフォルトのアクションを提出トリガーから元のイベントを防ぐために必要なURL

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

Answer 1

とSprawdzのためのように同じです。あなたは event.preventDefault();に電話することでそれを行います。

はここにあなたのコードは次のように見えるために必要なものです：あなたが提出したイベントが呼び出された後にイベントのaction属性を変更することはできませんように

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

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

が見えます。あなたがする必要がどのような

、あなたの各ボタンにイベントリスナーを追加し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(); 
}