javascript - Build URL link from Custom Options using JS logic -

javascript - Build URL link from Custom Options using JS logic -

thank in advance.

i still learning javascript , project approached, need help/insight.

the logic working on 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 1 = {title:"titletext", description:"descrtext", keyword:"text", subject:"533,567,457", provider:"c9drlt-sdgtrzz", training:"true"}; var 2 = {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 = "";} homecoming training; } function search_custom() { // not sure how pull // if subject has more 1 variable subject:"533,567,457" // build logic separate them: // &s=533&s=2&567&s=3&457 homecoming 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. outcome:

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

5. hard part: how can logic takes array in #2, attaches alternative id one, 2 ... etc in #1 , constructs link in #3 on click?

in nutshell: search function options has unique variables.

appreciate help!

first off, think want clean select box bit, , give values can utilize 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 need clean object bit it's a) more readable, , b) links select box nicely. if nest 1 object, referencing later easier.

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

the final bit in logic. i've tried streamline bit of import alter for-loop in case, list every key/value pair , can add together our search string. have included error dodging here, checking if theres empty values , if selected values exist (for example, if select 3 in device_options, don't have index in our options array above, can't build - won't error out.)

$("#submit_button").on("click", function(event){ // hard part, converting select item string , appending text // 1. search string input var searchstring = "#searchtext=" + $("#search_text").val().trim(); // 2. select box value of selected alternative var selected = $("#device_select").val(); // 3. corresponding value. // if corresponding value false (remember first item in array above?), nothing. // nil if looking undefined number in array (say, item #238) selected = typeof options[selected] != "undefined" && options[selected] !== false ? options[selected] : false; // if selected not set false, exists in our options , can utilize it. if(selected){ for(key in selected){ // if set value in options false, we'll ignore here using 'continue' // go on move on next iteration of loop if(!selected[key]) continue; searchstring += "&" + key + "=" + selected[key]; } window.location.href = "http://www.mysite.tld/" + searchstring; } else { // log error here. if(console) console.log("could not find device!"); } });

does create sense/help? have not tested myself, should work.

javascript jquery arrays function url