入力を基にフォームを複数のURLにリダイレクトする必要があります

Question

私は基本的なHTMLフォームを持っており、テキストフィールドに入力された文字列に基づいてフォームを別のURLにリダイレクトするJSのビットを作成する際に助けが必要です。

<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にリダイレクトするか、「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>