Question

我有一个基本的HTML表单，我需要帮助创建一些JS，根据文本字段中键入的字符串将表单重定向到不同的URL。

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

将在输入字段中输入3或4个文本字符串 - ＆＃34;有效＆＃34;我需要它们使表单重定向到网站上的各个页面。

例如，输入有效字符串＆＃34; STRING1＆＃34;会在页面提交时将页面重定向到example.com/something.html，或者＃34; STRING2＆＃34;到example.com/otherpage.html。

但无效字符串需要转到＆＃34; example.com/invalid.html等页面。＆＃34;

到目前为止，我看到的最有用的是本指南：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";
    }
});

注意：我添加了.toUpperCase()以使其不区分大小写，因此您必须小心定义urlMapping键（＆＃34; STRING1＆＃34;，..）大写。

Answer 2

这应该做你想要的：

＆＃13;

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

＆＃13;

<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>

＆＃13;

需要根据输入

2 个答案: