Нужно перенаправить форму на несколько URL-адресов на основе ввода

Question

У меня есть базовая форма HTML, и мне нужна помощь в создании части JS для перенаправления моей формы на разные URL-адреса на основе строки, введенной в текстовое поле.

<form class="form-inline"> 
    <div class="form-group"> 
     <input type="text"> 
     <button type="submit">Go</button> 
    </div> 
</form> 

Там будет 3 или 4 строки текста - необходимо ввести в поле ввода - которые являются «действительными» и мне нужно их сделать форму перенаправления на различные страницы сайта.

Например, набрав действительную строку «STRING1», страница переадресует на example.com/something.html на форму submit или «STRING2» на example.com/otherpage.html.

Но недействительным строкам нужно будет перейти на страницу типа example.com/invalid.html.

Самое полезное, что я видел до сих пор это руководство: http://www.dynamicdrive.com/forums/showthread.php?20294-Form-POST-redirect-based-on-radio-button-selected

<script type="text/javascript"> 
function usePage(frm,nm){ 
    for (var i_tem = 0, bobs=frm.elements; i_tem < bobs.length; i_tem++) 
    if(bobs[i_tem].name==nm&&bobs[i_tem].checked) 
    frm.action=bobs[i_tem].value; 
} 
</script> 

В этом коде каждая радиостанция имеет значение, присвоенное ему. Но это не помогает с текстовыми полями или имеет переадресацию вложенности, если строка недействительна.

Большое спасибо за помощь.

Answer 1

Вы можете определить маршруты в объекте:

<form class="form-inline"> 
    <div class="form-group"> 
     <input type="text"> 
     <button id="submit-form" type="button">Go</button> 
    </div> 
</form> 

var urlMapping = { 
    "STRING1" : "./first.html", 
    "STRING2" : "./second.html", 
    "STRING3" : "./third.html" 
} 

$("#submit-form").click(function(){ 
    var input = $("input").val().trim().toUpperCase(); 
    if (urlMapping.hasOwnProperty(input)){ 
     window.location = urlMapping[input]; 
    } 
    else { 
     //if url not found, redirect to default url 
     window.location = "./default.html"; 
    } 
}); 

N ote: Я добавил .toUpperCase(), чтобы сделать его нечувствительным к регистру, поэтому вам нужно быть осторожным, чтобы определить ключи urlMapping («STRING1», ..) в верхнем регистре.

Answer 2

Это должно делать то, что вы хотите:

// Define routing: 
 
var validValues = [{ 
 
    value: 'STRING1', 
 
    url: './something.html' 
 
}, { 
 
    value: 'STRING2', 
 
    url: './otherpage.html' 
 
}]; 
 

 
var $myInput = $('#my-input'); 
 
$('#my-button').click(function(ev) { 
 
    ev.preventDefault(); // Prevent submitting the form already 
 

 
    // Look for a valid value 
 
    var url = './invalid.html'; 
 
    $.each(validValues, function(i, validValue) { 
 
    if ($myInput.val() === validValue.value) { 
 
     url = validValue.url; 
 
     return false; 
 
    } 
 
    }); 
 

 
    // Submit the form 
 
    $('#my-form').prop('action', url).submit(); 
 
    alert('Redirecting to ' + url); 
 
});

<form class="form-inline" id="my-form"> 
 
    <div class="form-group"> 
 
    <input type="text" id="my-input"> 
 
    <button type="submit" id="my-button">Go</button> 
 
    </div> 
 
</form> 
 

 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>