Need to redirect form to multiple URLs based on input

Question

I have a basic HTML form and I need help creating a bit of JS to redirect my form to different URLs based on the string typed in a text field.

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

There will be 3 or 4 strings of text - to be entered in the input field - that are "valid" and I need them to make the form redirect to various pages on the site.

For instance, typing valid string "STRING1" would make the page redirect to example.com/something.html on form submit, or "STRING2" to example.com/otherpage.html.

But invalid strings would need to go to a page like "example.com/invalid.html."

The most useful thing I've seen so far is this guide: 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>

In that code, each radio has a value assigned to it. But this doesn't help with text fields or having a blanket redirect if the string is invalid.

Thanks so much for your help.

Why aren't you doing this on server? Simply submit form to one server script and let it do redirect — charlietfl, Jun 11 '16 at 22:51
@charlietf He might not be able to do this client-side. And OP is literally asking how to do this in JavaScript — Duncan Luk, Jun 11 '16 at 23:03
@Duncan and that's why i asked as a question. Just because it is asked one way doesn't mean that's always the best or more common way of doing things (XY Problem). That's why these comments exist...for clarification — charlietfl, Jun 11 '16 at 23:13
@charlietfl Sure asking doesn't hurt. But this can just as easily be done in JavaScript — Duncan Luk, Jun 11 '16 at 23:25
@Duncan what I mean is all routes are exposed in client and user can bypass it if they want easily. Same reason all validation must be done server side. We don't know users use case. I'm fully aware this *"can be done"* in client and solutions are simple. Likewise is trivial and more secure to do this server side — charlietfl, Jun 11 '16 at 23:30
@charlietfl This is for local use on a kiosk computer, security concerns are nonexistent. — user3236756, Jun 11 '16 at 23:32
@user3236756 ok...just asking. See lots of questions here that ask for one thing but is not the best approach. — charlietfl, Jun 11 '16 at 23:37

Mathieu Schaeffer · Accepted Answer · 2016-06-12T00:04:20.853

1

You could define the routes in an object :

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

Note : I added .toUpperCase() to make it case-insensitive, so you have to be careful to define the urlMapping keys ("STRING1",..) in uppercase.

edited Jun 12 '16 at 00:04

answered Jun 11 '16 at 23:16

Mathieu Schaeffer

792
4
14

1

@Duncan you have to admit this is simpler and cleaner. Not good etiquette to ask OP why they selected what they did. That's their prerogative. Order of answer isn't really relevant particularly when they aren't the same – charlietfl Jun 11 '16 at 23:39
@charlietfl Just asking for feedback – Duncan Luk Jun 11 '16 at 23:44
@Duncan not really appropriate to ask why though. You accept it and move on unless there is something glaringly wrong with selected answer which certainly isn't the case here and in all honesty is the simpler solution – charlietfl Jun 11 '16 at 23:45
1

@Duncan Nothing wrong at all, and I appreciate you making a stack snippet. This solution was simply a bit more concise, and also the first one I saw/tried scrolling down. – user3236756 Jun 11 '16 at 23:49

score 0 · Answer 2 · answered Jun 11 '16 at 23:15

This should do what you want:

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

Need to redirect form to multiple URLs based on input

2 Answers2

Linked