Build URL link from Custom Options using JS logic

Question

Thank you in advance.

I am still learning JavaScript and as a project approached, really need some help/insight.

The logic that I am working on is this:

1. HTML structure:

<input title="Type Here" class="search" type="text" placeholder="Type Here">

<select id="device_select">
<option id=one value='a'>a</option>
<option id=two value='b'>b</option>
<option id=three value='c'>c</option>
<option id=many value='many'>many</option>
</select>

<span class="content-btn-1" type="button"></span>

2. JS structure:

$(function(){

var one = {title:"titletext", description:"descrtext", keyword:"text",
subject:"533,567,457", provider:"c9drlt-sdgtrzz", training:"true"};

var two = {title:"titletext", description:"descrtext", keyword:"textthis",
subject:"537", provider:"c9drlt-sdgtrjt", training:"false"};

});

3. JS logic structure:

function search_class() {
if (training == true) {training = "&tr=0";} else {training = "";}
return training;
}

function search_custom() {  
// NOT SURE HOW TO PULL IT UP
// if subject has more than 1 variable like subject:"533,567,457"
// then construct the logic to separate them:
// &s=533&s=2&567&s=3&457
return subject;
}

var url = "www.website.com";
var text_area = $('.search');
var btn_click = $('.content-btn-1');

btn_click.click (function () {
var value = text_area.val();
var ty = "#s=";
if ($.trim($(text_area).val())) {
window.location.href = url+ty+search_class()+search_custom();
}
});

4. The outcome:

www.website.com#s=titletext&d=descrtext&t=text&p=c9drlt-sdgtrzz&tr=0&s=533&s=2&567&s=3&457

5. The hard part: How can we do the logic so it takes that array in #2, attaches to the option id one, two ... etc in #1 and then constructs the link in #3 on click?

In nutshell: This is a search function with options that has unique variables.

Appreciate any help!

Answer 1

First off, I think you want to clean up your select box a bit, and give it values you can actually use in javascript.

<input title="Type Here" id="search_text" type="text" placeholder="Type Here" />

<select id="device_select">
    <option value='1'>a</option>
    <option value='2'>b</option>
    <option value='3'>c</option>
    <option value='0'>many</option>
</select>

<input id="submit_button" type="button" />

Then we need to clean up your object a bit so it's a) more readable, and b) it links to your select box nicely. If we nest it into one object, referencing it later will be easier.

// we would like an array that corresponds with our values in the select box.
var options = [
    false,
    {
        title:        "titletext",
        description:  "descrtext",
        keyword:      "text",
        subject:      "533,567,457",
        provider:     "c9drlt-sdgtrzz",
        // a boolean like "false" or "true" should not be surrounded by braces, is easier to manipulate.
        training:     true
    },{
        title:        "titletext",
        description:  "descrtext",
        keyword:      "textthis",
        subject:      "537",
        provider:     "c9drlt-sdgtrjt",
        training:     false
    }
];

The final bit is in the logic. I've tried to streamline it a bit but the most important change is the for-loop in this case, as it will list every key/value pair and then we can add it to our search string. I Have also included some error dodging here, like checking if theres empty values and if the selected values actually exist (for example, if you select 3 in device_options, we don't have that index in our options array above, so we can't actually construct that - but it won't actually error out.)

$("#submit_button").on("click", function(event){
    // now for the hard part, converting your select item into a string and appending the text
    // 1. get the search string from the input
    var searchstring = "#searchText=" + $("#search_text").val().trim();
    // 2. get the select box value of the selected option
    var selected = $("#device_select").val();
    // 3. Get the corresponding value. 
    // If the corresponding value is false (remember the first item in the array above?), then we do nothing.
    // We also do nothing if we are looking for an undefined number in the array (say, item #238)
        selected = typeof options[selected] != "undefined" && options[selected] !== false
            ? options[selected]
            : false;
    // if selected was not set to false, then it exists in our options and we can use it.
    if(selected){
        for(key in selected){
            // if you set a value in options to false, we'll ignore it here using a 'continue'
            // continue will move on to the next iteration of the for loop immediately
            if(!selected[key]) continue;
            searchstring += "&" + key + "=" + selected[key];
        }
        window.location.href = "http://www.mysite.tld/" + searchstring;
    } else {
        // log an error here.
        if(console) console.log("Could not find device!");
    }
});

Does this make sense/help? I have not tested this myself, but it should all work.