简体   繁体   中英

Remove or Ignore Variable if Input Field is Empty

I am currently trying to construct an URL for an API based on the input that users type on the query form using JavaScript. The input of the text field is saved in a variable that is further joint together as a final URL. Nevertheless, not all input fields will be used all the time.

I was wondering how can you ignore that particular variable if its value is empty.

As I explained, I have a set of input fields:

<input id="whoValue"  type="text" value=""   placeholder="Who">    
<input id="whenStart" type="text" value="" placeholder="Start Date">
<input id="whenEnd" type="text" value="" placeholder="End Date">
<input id="whatValue"  type="text" value="" placeholder="What">
<button id="searchBtn">Search</button></br>
<input id="result" type="text" value="" placeholder="Resulting URL">

Then when the button is pressed, JavaScript joins the input fields even if their content is empty.

$('#searchBtn').click(function () {

    var url = 'http://particularURLof/';
    var who = "…WHO" + $('#whoValue').val();
    var what = "…WHAT"+ $('#whatValue').val();
    var when = "…YEAR[" + $('#whenStart').val() + "+TO+" + $('#whenEnd').val() + "]";
    var moreUrl = '…url End';

    var resultUrl = url + who + what + when + moreUrl;
    $("#result").val(resultUrl);

});

Therefore, as mentioned above, I am trying to construct that resultUrl only with the variables that hold a value in the input field .

Here is a JSFiddle of what I have as well.

short if else like:

var result = if_this_is_true ? true : false;

to give you an example with your code

$('#searchBtn').click(function () {

    var url     = 'http://particularURLof/';
    var who     = $('#whoValue').val().length > 0   ? "…WHO" + $('#whoValue').val() : '';
    var what    = $('#whatValue').val().length > 0  ? "…WHAT"+ $('#whatValue').val() : '';
    var moreUrl = '…url End';

    var resultUrl = who + what + moreUrl;
    $("#result").val(resultUrl);

});

http://jsfiddle.net/n1jtrpmv/1/

$('#searchBtn').click(function () {

var url = 'http://particularURLof/';
var who = $('#whoValue').val();
var what = $('#whatValue').val();
var whenStart = $('#whenStart').val();
var whatEnd = $('#whenEnd').val(); 
var moreUrl = "endOfUrl";

if( (who != '') && (what != '') && (whenStart != '') && (whenEnd != '') ) {
   var resultUrl = url + who + what + whenStart + whenEnd + moreUrl;
} 
else if( (who == '') && (what != '') && (whenStart != '') && (whenEnd != '') ) {
   var resultUrl = url + what + whenStart + whenEnd + moreUrl;
} 
else if( (who != '') && (what == '') && (whenStart != '') && (whenEnd != '') ) {
   var resultUrl = url + who + whenStart + whenEnd + moreUrl;
}
else if( (who != '') && (what != '') && ((whenStart == '') || (whenEnd == '')) ) {
   var resultUrl = url + who + what + moreUrl;
}

$("#result").val(resultUrl);

});

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM