JavaScript - andere Aktion zum selben Eingangstyp, aber anderer Name

Question

Ich habe ein Problem mit meinem js-Skript, weil für beide Schaltflächen die gleiche Seite geöffnet wird 1. Ich weiß nicht warum?

Könnte jemand mir helfen, dieses Problem zu lösen?

$('#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>

Wenn ich POD-Taste Aktion klicken ist die gleiche wie für sprawdz mit url

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

Answer 1

Sie benötigen Aktion des Standard einreicht das ursprüngliche Ereignis zu verhindern, auszulösen. Sie tun das, indem Sie event.preventDefault(); anrufen.

Hier ist, was Ihr Code aussehen muss:

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

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

Sieht aus wie Sie das action Attribut des Ereignisses nach dem einreichen Ereignis aufgerufen wurde nicht ändern kann.

Was Sie tun müssen, ist an Ereignis-Listener für jede Ihrer Tasten, ändern Sie die action Attribut und dann senden Sie das Formular hinzufügen:

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(); 
}