Select dropdown to input text with predefined values

Question

I have this form the Powerrange field is used to create a URL, but the value needed is different to the input one! so we need to predefine them.

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

Ok this is what I have so far:

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+"";

}

Side note, is there any way to convert the system so that the value and final number are the same? Any way to make 100 = 100 and translate better, so you can avoid converting? — helion3
– helion3, Commented Nov 10, 2013 at 2:00
Yes I know! but it's not possible! Those values are predefined but another module! so I need to use them! — Procomp Pcm
– Procomp Pcm, Commented Nov 10, 2013 at 2:15
It's ok, I figured. Having to deal with constraints because of other developers is a daily thing. — helion3
– helion3, Commented Nov 10, 2013 at 2:19

charlietfl · Accepted Answer · 2013-11-10 03:19:08Z

EDITED ANSWER: replaces select> with <input>, validates input entry against textual values of current options.

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

DEMO

helion3 · Accepted Answer · 2013-11-10 02:21:01Z

0

You'll need to build a pre-defined array so that your code knows 100 = 14. On keyup, blur, or submit or some form event that works for you, take the value of the text field, lookup the right value in the array, and then build your final link.

Here's a jsfiddle sample of how it might be done

$(function(){

    var idConversions = {"100":14,"101":5000}

    $('#the-text-field').keyup(function(){
        var correctId = idConversions[$(this).val()];
        if( typeof correctId !== "undefined") alert(correctId); 
    });

});

If you need to maintain a similar array on server-side code, try to find a way to share the list so you're not defining the "conversion matrix" in two places. Like build the array server-side in php or something, print it as JSON.

edited Nov 10, 2013 at 2:21

answered Nov 10, 2013 at 1:59

helion3

38k16 gold badges66 silver badges113 bronze badges

3 Comments

Procomp Pcm Over a year ago

Clever! Man If you could give me a hand with a sample code! I'll appreciate it!

Procomp Pcm Over a year ago

It's getting there! You have the idea! but I can't get it working! We need to convert the inputed value! and add the correct value in the URL! Check my post please! I just updated it !

helion3 Over a year ago

You need to have the new link generated inside the function, and you also need to retain the undefined check I had

Collectives™ on Stack Overflow

Select dropdown to input text with predefined values

2 Answers 2

Comments

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related