jquery select option to construct queryString

Question

I'm trying to build a query parameter for when doing a search, I managed to build it with input field however there's a select dropdown menu to select other values.

<input type="text" id="dd">
<select name="" class="sel">
  <option value=""></option>
  <option value="Prepare">Prepare</option>
  <option value="Ready">Ready</option>
  <option value="Cancel">Cancel</option>
</select>

<button onclick="buildQuery()">Build query</button>

jQuery code for query building the query param

function buildQuery(){
  var result = "?";
  var getVal = $('input#dd').val();
  console.log('Input > ', getVal);
  var getSelectVal = $('select#sel').val();
  if (getVal != null && (getVal != "")) {
    let inputValues = getVal
    .split("\n")
    .filter(function (str) { return str !== "" })
    .join("&test=");
    // then add it to the overall query string for all searches
    result = result + 'test' + "=" + inputValues + "&";

    console.log('Results > ', result);
  }

Not sure how can I get the value from the select and construct it similar way to my input console.log output Results > ?test=f&

So if you fill in the input and select an option it the queryParam should say something like ?test=inputVal&test=selectVal or individual ?test=inputVal or ?test=selectVal

What I can do is copy the whole if() statement and replace the getVal with getSelectVal but it seems inefficient and duplicating the code.

Actual code --

newSearchParams.properties.forEach(function (inputSearch) {
        // first reparse the input values to individual key value pairs
        // Checks which field is not null and with empty string (space)
        var getVal = $('textarea.input_' + inputSearch.name).val();
        var getSelectVal = $('select.select_' + inputSearch.name).val();
        if (getVal != null && (getVal != "")) {
            let inputValues = getVal
                .split("\n")
                .filter(function (str) { return str !== "" })
                .join("&" + inputSearch.name + "=");
            // then add it to the overall query string for all searches
            result = result + inputSearch.name + "=" + inputValues + "&";
        }
    }, this);
    // remove trailing '&'
    result = result.slice(0, result.length - 1);
    return result;

Sample Fiddle

test=inputVal&test=selectVal is valid i mean same prop 2 values ? — Vinod Louis
– Vinod Louis, Commented Feb 3, 2017 at 13:24
yes I've tried and the select is valid and with proper values — MrNew
– MrNew, Commented Feb 3, 2017 at 13:28
Is this you trying to achieve jsfiddle.net/3wdecqe9/1 just remember to remove the last & symbol — Vinod Louis
– Vinod Louis, Commented Feb 3, 2017 at 13:29
not quite, that will only get the select value that will leave the input. — MrNew
– MrNew, Commented Feb 3, 2017 at 13:34

Matvey Andreyev · Accepted Answer · 2017-02-03 13:55:43Z

2

In case Shibi's answer passing test as array is not fine for some reasons,

The following serializes your two form elements' values into id=value&id2=value2 using jQuery.param():

function buildQuery(){
  var $elements = $('#dd, #sel'), //or your selector
      result = {};
  
    $elements.each(function(){
      if(this.value !== '') 
        result[this.id] = this.value; //uses id attribute as variable name
    });
  
    document.getElementById('log').innerHTML = '?' + $.param(result); //see jQuery.param() docs
  
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>

<input type="text" id="dd">
<select name="" id="sel">
  <option value=""></option>
  <option value="Prepare">Prepare</option>
  <option value="Ready">Ready</option>
  <option value="Cancel">Cancel</option>
</select>

<button onclick="buildQuery()">Build query</button>

<p id="log">(This element is here just for logging the result)</p>

answered Feb 3, 2017 at 13:55

Matvey Andreyev

1,05610 silver badges22 bronze badges

Sign up to request clarification or add additional context in comments.

11 Comments

MrNew Over a year ago

Interesting, ill give it a try. Yeah my first approach was to use jQuery but when I pass the queryString name jQuery.param({input.name:val}) something like that didn't accept it because of input.name

Shibi Over a year ago

Yeah $.param look like its build for this reason. I would use it too. :)

MrNew Over a year ago

See my edit above with my actual input and select code

Matvey Andreyev Over a year ago

@MrNew If you want to use a variable as an object key, first name that object ( var obj = {}), then use brackets: obj[yourVar] = 'some value'. This is already in the answer.

MrNew Over a year ago

@MatveyAndreyev mind editing the answer using variable as an object key?

|

Shibi · Accepted Answer · 2017-02-03 13:56:13Z

1

I will do it like this and then you can add more inputs as you wish..

function buildQuery(){
    var result = '?test=';
    var getVal = $('input#dd').val();
    var getSelectVal = $('select#sel').val();
    var resultArray = [getVal, getSelectVal]; // all values array
    resultArray = resultArray.filter(v=>v!=''); // filter empty results
    if(resultArray.length > 1) {
        result += resultArray.join("&test=");
    } else {
        result += resultArray[0];
    }

    result = encodeURI(result);
    console.log(result);
}

https://jsfiddle.net/3wdecqe9/6/

edited Feb 3, 2017 at 13:56

answered Feb 3, 2017 at 13:49

Shibi

1,3832 gold badges9 silver badges8 bronze badges

6 Comments

MrNew Over a year ago

what's the weird encoded vals? ?test%5B%5D=s&test=1 is it possible to remove those and have a clean test=value instead? Looks like its the test[] can you explain that?

Shibi Over a year ago

yes its because I did the test[] as an array so you could read all his values in the server side. its like when you doing form.serialize()

MrNew Over a year ago

can it be just ?test=value instead?

Shibi Over a year ago

I update the code so its be without the array now its ?test=value

MrNew Over a year ago

Yeah get that remove [] will clean it, but what's with the encodURI(result)

|

Collectives™ on Stack Overflow

jquery select option to construct queryString

2 Answers 2

11 Comments

6 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

11 Comments

6 Comments

Your Answer

Sign up or log in

Post as a guest

Related