I have 5 input fields in a form and I would like to add their respective parameters and values, if set, to query string

What I am trying to do is to make it add ? before the first parameter at the end of domain.tld, if there is none, and show the particular parameter with it's value of first input then if other input, add & and next parameter with the value, then & and rest of parameters and values as query string is structured and only add parameters and their values if there is value inserted in their respective inputs by element ID.

In the task it is required to add the query string with parameters and their values, if and only if there is respective input for them. Not sure why it does not work. This would have worked well with PHP's strpos() (already having similar functionality for a redirect elsewhere and it works) and indexOf() in JavaScript is kind of the equivalent of PHP's strpos(), right?. What I tried is provided below.

Somehow I am missing the continuation thinking the **url = url + ** part would suffice. In the end I want to show the URL in a textarea element. Just adding the parameters to URL and show result in texarea for copying on click for use. Already have the click to copy figured out.

function parameterize() {
  var paramter0 = document.getElementById('parameter0').value;
  var parameter1 = document.getElementById('parameter1').value;
  var parameter2 = document.getElementById('parameter2').value;
  var parameter3 = document.getElementById('parameter3').value;
  var parameter4 = document.getElementById('parameter4').value;

  var url = '';

  if (paramter0) {
    if (indexOf(url, '?') !== false) {
      var symbol_insert = '&';
    } else {
      var symbol_insert = '?';
    }
    url = url + symbol_insert + 'paramter0=' + paramter0;
  }
  if (parameter1) {
    if (indexOf(url, '?') !== false) {
      var symbol_insert = '&';
    } else {
      var symbol_insert = '?';
    }
    url = url + symbol_insert + 'parameter1=' + parameter1;
  }
  if (parameter2) {
    if (indexOf(url, '?') !== false) {
      var symbol_insert = '&';
    } else {
      var symbol_insert = '?';
    }
    url = url + symbol_insert + 'parameter2=' + parameter2;
  }
  if (parameter3) {
    if (indexOf(url, '?') !== false) {
      var symbol_insert = '&';
    } else {
      var symbol_insert = '?';
    }
    url = url + symbol_insert + 'parameter3=' + parameter3;
  }
  if (parameter4) {
    if (indexOf(url, '?') !== false) {
      var symbol_insert = '&';
    } else {
      var symbol_insert = '?';
    }
    url = url + symbol_insert + 'parameter4=' + parameter4;
  }
}
document.getElementById('paramed_url').innerHTML = url;

document.getElementById('add_parameters').addEventListener('click', parameterize);

<div id="parameters" class="panel-collapse collapse">
  <ul class="list-group">
    <li class="list-group-item">
      <label class="parameter">parameter0 0:</label> <input type="text" class="select-selected" id="parameter0" name="parameter0" maxlength="64">
    </li>
    <li class="list-group-item">
      <label class="parameter">parameter 1:</label> <input type="text" class="select-selected" id="parameter1" name="parameter1" maxlength="64">
    </li>
    <li class="list-group-item">
      <label class="parameter">parameter 2:</label> <input type="text" class="select-selected" id="parameter2" name="parameter2" maxlength="64">
    </li>
    <li class="list-group-item">
      <label class="parameter">parameter 3:</label> <input type="text" class="select-selected" id="parameter3" name="parameter3" maxlength="64">
    </li>
    <li class="list-group-item">
      <label class="parameter">parameter 4:</label> <input type="text" class="select-selected" id="parameter4" name="parameter4" maxlength="64">
    </li>
  </ul>
  <button id="add_parameters" name="submit" class="btn btn-primary">
        APPLY
        </button>
</div>

I have 5 input fields in a form and I would like to add their respective parameters and values, if set, to query string

What I am trying to do is to make it add ? before the first parameter at the end of domain.tld, if there is none, and show the particular parameter with it's value of first input then if other input, add & and next parameter with the value, then & and rest of parameters and values as query string is structured and only add parameters and their values if there is value inserted in their respective inputs by element ID.

In the task it is required to add the query string with parameters and their values, if and only if there is respective input for them. Not sure why it does not work. This would have worked well with PHP's strpos() (already having similar functionality for a redirect elsewhere and it works) and indexOf() in JavaScript is kind of the equivalent of PHP's strpos(), right?. What I tried is provided below.

Somehow I am missing the continuation thinking the **url = url + ** part would suffice. In the end I want to show the URL in a textarea element. Just adding the parameters to URL and show result in texarea for copying on click for use. Already have the click to copy figured out.

function parameterize() {
  var paramter0 = document.getElementById('parameter0').value;
  var parameter1 = document.getElementById('parameter1').value;
  var parameter2 = document.getElementById('parameter2').value;
  var parameter3 = document.getElementById('parameter3').value;
  var parameter4 = document.getElementById('parameter4').value;

  var url = 'https://domain.tld';

  if (paramter0) {
    if (indexOf(url, '?') !== false) {
      var symbol_insert = '&';
    } else {
      var symbol_insert = '?';
    }
    url = url + symbol_insert + 'paramter0=' + paramter0;
  }
  if (parameter1) {
    if (indexOf(url, '?') !== false) {
      var symbol_insert = '&';
    } else {
      var symbol_insert = '?';
    }
    url = url + symbol_insert + 'parameter1=' + parameter1;
  }
  if (parameter2) {
    if (indexOf(url, '?') !== false) {
      var symbol_insert = '&';
    } else {
      var symbol_insert = '?';
    }
    url = url + symbol_insert + 'parameter2=' + parameter2;
  }
  if (parameter3) {
    if (indexOf(url, '?') !== false) {
      var symbol_insert = '&';
    } else {
      var symbol_insert = '?';
    }
    url = url + symbol_insert + 'parameter3=' + parameter3;
  }
  if (parameter4) {
    if (indexOf(url, '?') !== false) {
      var symbol_insert = '&';
    } else {
      var symbol_insert = '?';
    }
    url = url + symbol_insert + 'parameter4=' + parameter4;
  }
}
document.getElementById('paramed_url').innerHTML = url;

document.getElementById('add_parameters').addEventListener('click', parameterize);

<div id="parameters" class="panel-collapse collapse">
  <ul class="list-group">
    <li class="list-group-item">
      <label class="parameter">parameter0 0:</label> <input type="text" class="select-selected" id="parameter0" name="parameter0" maxlength="64">
    </li>
    <li class="list-group-item">
      <label class="parameter">parameter 1:</label> <input type="text" class="select-selected" id="parameter1" name="parameter1" maxlength="64">
    </li>
    <li class="list-group-item">
      <label class="parameter">parameter 2:</label> <input type="text" class="select-selected" id="parameter2" name="parameter2" maxlength="64">
    </li>
    <li class="list-group-item">
      <label class="parameter">parameter 3:</label> <input type="text" class="select-selected" id="parameter3" name="parameter3" maxlength="64">
    </li>
    <li class="list-group-item">
      <label class="parameter">parameter 4:</label> <input type="text" class="select-selected" id="parameter4" name="parameter4" maxlength="64">
    </li>
  </ul>
  <button id="add_parameters" name="submit" class="btn btn-primary">
        APPLY
        </button>
</div>

• javascript
• input
• query-string
• getelementbyid
• indexof

• Can you show your current output? – holydragon Commented Mar 1, 2019 at 8:37
• 2 This will be way easier if you would collect the inputs in an array. – Shilly Commented Mar 1, 2019 at 8:41
• I made you a minimal reproducible example- It gives an error. - indexOf is not defined – mplungjan Commented Mar 1, 2019 at 8:42
• Syntax missing here for indexOf(). It should be url.indexOf('?'). Fore more developer.mozilla/en-US/docs/Web/JavaScript/Reference/… – Sagar Commented Mar 1, 2019 at 8:43
• also, to extend on @Sagar's ment, you should pare like this: url.indexOf('?') > -1 because it never returns false but -1 if not found – Kaddath Commented Mar 1, 2019 at 8:46

5 Answers 5

You have a syntax error as I pointed out in a ment: indexOf is not defined

If you insist, it is if (url.indexOf('?') !== -1) { to test if there is a ?

I ASSUME you do not just want to submit a form in which case you do not need any processing, the form submit will do it for you

Here is how to append parameters to a URL using the URL.searchParams

Add this to get Internet Explorer support

<script src="https://cdn.polyfill.io/v2/polyfill.min.js"></script>

NOTE: I changed the name to parameterize

var url = new URL('https://domain.tld');

function parameterize() {
  document.querySelectorAll(".select-selected").forEach(function(inp) {
   url.searchParams.append(inp.name,inp.value); // if (inp.value) ...
  })
  console.log(url)
}

document.getElementById('add_parameters').addEventListener('click', parameterize);

<div id="parameters" class="panel-collapse collapse">
  <ul class="list-group">
    <li class="list-group-item">
      <label class="parameter">parameter0 0:</label> <input type="text" class="select-selected" id="parameter0" name="parameter0" maxlength="64">
    </li>
    <li class="list-group-item">
      <label class="parameter">parameter 1:</label> <input type="text" class="select-selected" id="parameter1" name="parameter1" maxlength="64">
    </li>
    <li class="list-group-item">
      <label class="parameter">parameter 2:</label> <input type="text" class="select-selected" id="parameter2" name="parameter2" maxlength="64">
    </li>
    <li class="list-group-item">
      <label class="parameter">parameter 3:</label> <input type="text" class="select-selected" id="parameter3" name="parameter3" maxlength="64">
    </li>
    <li class="list-group-item">
      <label class="parameter">parameter 4:</label> <input type="text" class="select-selected" id="parameter4" name="parameter4" maxlength="64">
    </li>
  </ul>
  <button type="button" id="add_parameters" class="btn btn-primary">
        APPLY
        </button>
</div>

jQuery Note I am here testing the value. If nothing is filled in, you get the original URL

var url = new URL('https://domain.tld');

function parameterize() {
  $(".select-selected").each(function() {
   if (this.value) url.searchParams.append(this.name,this.value); // only if value entered
  })
  console.log(url)
}

$('#add_parameters').on('click', parameterize);

<script src="https://cdnjs.cloudflare./ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="parameters" class="panel-collapse collapse">
  <ul class="list-group">
    <li class="list-group-item">
      <label class="parameter">parameter0 0:</label> <input type="text" class="select-selected" id="parameter0" name="parameter0" maxlength="64">
    </li>
    <li class="list-group-item">
      <label class="parameter">parameter 1:</label> <input type="text" class="select-selected" id="parameter1" name="parameter1" maxlength="64">
    </li>
    <li class="list-group-item">
      <label class="parameter">parameter 2:</label> <input type="text" class="select-selected" id="parameter2" name="parameter2" maxlength="64">
    </li>
    <li class="list-group-item">
      <label class="parameter">parameter 3:</label> <input type="text" class="select-selected" id="parameter3" name="parameter3" maxlength="64">
    </li>
    <li class="list-group-item">
      <label class="parameter">parameter 4:</label> <input type="text" class="select-selected" id="parameter4" name="parameter4" maxlength="64">
    </li>
  </ul>
  <button type="button" id="add_parameters" class="btn btn-primary">
        APPLY
        </button>
</div>

Maybe it's what you want jsFiddle.

document.getElementById('add_parameters').addEventListener('click', parametrize);

function parametrize() {
  let url = 'https://domain.tld';
  let params = {};
  document.querySelectorAll('#parameters input.select-selected').forEach((element) => {
    if (element.value.length > 0)
        params[element.id] = element.value;
  });
  let esc = encodeURIComponent;
  let query = Object.keys(params)
    .map(k => esc(k) + '=' + esc(params[k]))
    .join('&');
  url += '?' + query;
  alert(url);
}

Note that if you don't want to apply a special processing to your inputs, all you are doing is strictly equivalent to this (added type="submit" to the button to submit the form):

<div id="parameters" class="panel-collapse collapse">
 
 <form action="https://domain.tld" method="get">
  
  <ul class="list-group">
    <li class="list-group-item">
      <label class="parameter">parameter0 0:</label> <input type="text" class="select-selected" id="parameter0" name="parameter0" maxlength="64">
    </li>
    <li class="list-group-item">
      <label class="parameter">parameter 1:</label> <input type="text" class="select-selected" id="parameter1" name="parameter1" maxlength="64">
    </li>
    <li class="list-group-item">
      <label class="parameter">parameter 2:</label> <input type="text" class="select-selected" id="parameter2" name="parameter2" maxlength="64">
    </li>
    <li class="list-group-item">
      <label class="parameter">parameter 3:</label> <input type="text" class="select-selected" id="parameter3" name="parameter3" maxlength="64">
    </li>
    <li class="list-group-item">
      <label class="parameter">parameter 4:</label> <input type="text" class="select-selected" id="parameter4" name="parameter4" maxlength="64">
    </li>
  </ul>
  <button id="add_parameters" name="submit" type="submit" class="btn btn-primary">
        APPLY
  </button>

 </form>
 
</div>

Explanation: by using method="get" in a form tag, all inputs values will be passed in the URL on submission with the format url?{input1_name}={input1_value}&{input2_name}={input2_value}..., exactly like you are doing in a custom way

If you collect the inputs in an array, you can just filter and join them, no matter how many parameters you have. That way you don't have to write new code every time you add a parameter, since the start of the query string ? will always go before the array join and the & seperator between the array items. I moved the .parameter clas to the inputs since it made more sense ther eto me than on the labels.

const create_uri = () => {
  const parameters = [ ...document.querySelectorAll( '.parameter' ) ];
  const root = 'https://domain.tld';
  const query_string = parameters.map( input => input.value ? `${ input.id }=${ input.value }` : '' );
  return `${ root }?${ encodeURIComponent( query_string.join( '&' )) }`;
};

const parameterize = () => {
  const uri = create_uri();
  console.log( uri );
};

document.getElementById('add_parameters').addEventListener('click', parameterize);

<div id="parameters" class="panel-collapse collapse">
  <ul class="list-group">
    <li class="list-group-item">
      <label>parameter 0:</label>
      <input type="text" class="select-selected parameter" id="parameter0" name="parameter0" maxlength="64">
    </li>
    <li class="list-group-item">
      <label>parameter 1:</label>
      <input type="text" class="select-selected parameter" id="parameter1" name="parameter1" maxlength="64">
    </li>
    <li class="list-group-item">
      <label>parameter 2:</label>
      <input type="text" class="select-selected parameter" id="parameter2" name="parameter2" maxlength="64">
    </li>
    <li class="list-group-item">
      <label>parameter 3:</label>
      <input type="text" class="select-selected parameter" id="parameter3" name="parameter3" maxlength="64">
    </li>
    <li class="list-group-item">
      <label>parameter 4:</label>
      <input type="text" class="select-selected parameter" id="parameter4" name="parameter4" maxlength="64">
    </li>
  </ul>
  <button id="add_parameters" name="submit" class="btn btn-primary">
  APPLY
  </button>
</div>

Corrected your indexOf() syntax else everything is good

function parameterize() {
  var paramter0 = document.getElementById('parameter0').value;
  var parameter1 = document.getElementById('parameter1').value;
  var parameter2 = document.getElementById('parameter2').value;
  var parameter3 = document.getElementById('parameter3').value;
  var parameter4 = document.getElementById('parameter4').value;

  var url = 'https://domain.tld';

  if (paramter0) {
    if (url.indexOf('?') !== -1) {
      var symbol_insert = '&';
    } else {
      var symbol_insert = '?';
    }
    url = url + symbol_insert + 'paramter0=' + paramter0;
  }
  if (parameter1) {
    if (url.indexOf('?') !== -1) {
      var symbol_insert = '&';
    } else {
      var symbol_insert = '?';
    }
    url = url + symbol_insert + 'parameter1=' + parameter1;
  }
  if (parameter2) {
    if (url.indexOf('?') !== -1) {
      var symbol_insert = '&';
    } else {
      var symbol_insert = '?';
    }
    url = url + symbol_insert + 'parameter2=' + parameter2;
  }
  if (parameter3) {
    if (url.indexOf('?') !== -1) {
      var symbol_insert = '&';
    } else {
      var symbol_insert = '?';
    }
    url = url + symbol_insert + 'parameter3=' + parameter3;
  }
  if (parameter4) {
    if (url.indexOf('?') !== -1) {
      var symbol_insert = '&';
    } else {
      var symbol_insert = '?';
    }
    url = url + symbol_insert + 'parameter4=' + parameter4;
  }
  console.log(url)
}

document.getElementById('add_parameters').addEventListener('click', parameterize);

<!DOCTYPE html>
<html>

<body>

  <div id="parameters" class="panel-collapse collapse">
    <ul class="list-group">
      <li class="list-group-item">
        <label class="parameter">parameter0 0:</label> <input type="text" class="select-selected" id="parameter0" name="parameter0" maxlength="64">
      </li>
      <li class="list-group-item">
        <label class="parameter">parameter 1:</label> <input type="text" class="select-selected" id="parameter1" name="parameter1" maxlength="64">
      </li>
      <li class="list-group-item">
        <label class="parameter">parameter 2:</label> <input type="text" class="select-selected" id="parameter2" name="parameter2" maxlength="64">
      </li>
      <li class="list-group-item">
        <label class="parameter">parameter 3:</label> <input type="text" class="select-selected" id="parameter3" name="parameter3" maxlength="64">
      </li>
      <li class="list-group-item">
        <label class="parameter">parameter 4:</label> <input type="text" class="select-selected" id="parameter4" name="parameter4" maxlength="64">
      </li>
    </ul>
    <button id="add_parameters" name="submit" class="btn btn-primary">
    APPLY
    </button>
  </div>



</body>

</html>