У меня есть эта форма, поле Powerrange используется для создания URL-адреса, но требуемое значение отличается от входного! поэтому мы должны предопределять их.
<form id="form">
<input type="text" id="powerrange"><br><br>
<input type="radio" name="location" value="store" checked/><label>America</label><br>
<input type="radio" name="location" value="store.au"/><label>Australia and Oceania</label><br>
<input type="radio" name="location" value="store.au"/><label>Africa</label><br>
<input type="radio" name="location" value="store.au"/><label>Asia</label><br>
<input type="radio" name="location" value="store"/><label>Europe</label><br><br>
Хорошо, это то, что у меня есть до сих пор:
function goToPage(){
var location = $('input[name=location]:checked').val();
var idConversions = {"100":14,"101":5000}
$('#powerrange').keyup(function(){
var correctId = idConversions[$(this).val()];
});
window.location.href = "http://"+location+".domain.com/catalog.aspx?section="+correctId+"";
}
EDITED ANSWER: заменяет select>
на <input>
, проверяет входную запись на текстовые значения текущих параметров.
var minLengthRanges = 10000;
var ranges = $('#powerrange option').map(function () {
var data = {
val: this.value,
section: $(this).text()
}
if (data.section.length < minLengthRanges) {
minLengthRanges = data.section.length;
}
return data
}).get();
var currVal = $('#powerrange option:selected').text();
$('#powerrange').replaceWith('<input id="powerrange" type="number" value="' + currVal + '"/>');
$('#powerrange').keyup(function () {
var val = this.value
if (!val || val.length < minLengthRanges) {
return;
}
var isValid = checkIsValidRange(val);
$('body').append('<p>Value is ' + (isValid ? '' : 'not') + ' a match</p>');
if (isValid) {
var url = '.........catalog.aspx?section=' + val;
$('body').append('<p>URL is ' + url + '</p>');
}
});
function checkIsValidRange(val) {
var isValidRange = false;
if (val && !isNaN(parseInt(val, 10))) {
isValidRange = $.grep(ranges, function (item, index) {
return item.section == val;
}).length;
}
return isValidRange;
}
Вам нужно будет создать предопределенный массив, чтобы ваш код знал 100
= 14
. На keyup
, blur
или submit
или каком-либо событии формы, которое работает для вас, возьмите значение текстового поля, найдите нужное значение в массиве и затем создайте свою последнюю ссылку.
Здесь пример jsfiddle, как это можно сделать
$(function(){
var idConversions = {"100":14,"101":5000}
$('#the-text-field').keyup(function(){
var correctId = idConversions[$(this).val()];
if( typeof correctId !== "undefined") alert(correctId);
});
});
Если вам нужно поддерживать аналогичный массив на серверном коде, попробуйте найти способ совместного использования списка, чтобы вы не определяли "матрицу преобразования" в двух местах. Например, создайте серверный сервер в php или что-то еще, напечатайте его как JSON.