How to append parameter to querystring if and only if textbox value present in javascript?

Question

Hello all i want to append parameter to url if and only if search text box value is different than default. Actually i have 3 search text boxes and i want to append them to url

here is my code..

$("#search-btn").click(function (e) {
    e.preventDefault();
    var search_country = $("#search-country").val();
    var search_city = $("#search-city").val();
    var search_team = $("#search-team").val();
    var dataString = 'action=search'

    // var dataString = {
    //   action : 'search',
    //   param1 : $("#search-country").val() || '', 
    //   param2 : $("#search-city").val() || '',
    //   param3 : $("#search-team").val() || ''
    // };

    if (search_country != "Search by Country") {
        dataString = dataString + "&param1=" + search_country
    }
    if (search_city != "Search by City") {
        dataString = dataString + "&param2=" + search_city
    }
    if (search_team != "Search by team") {
        dataString = dataString + "&param3=" + search_team
    }
    $.ajax({
        type: "get",
        url: "SearchServlet",
        data: dataString,
        success: function (data) {
            $('body').html(data);
            $('#msg').html('Search Results')
        }
    });

});

I want to pass parameter only if user enter search criteria otherwise not....

this question might shed some light on how to check for a default value: http://stackoverflow.com/a/4591938/467164 — Zathrus Writer, Sep 26 '13 at 16:36
@undefined, placeholder attribute is not supported in Internet Explorer 9 and earlier versions. — Hugo Tostes, Sep 26 '13 at 16:38
@MikeChristensen Well, there are many polyfills for IE, http://stackoverflow.com/questions/5522164/input-placeholders-for-internet-explorer, https://github.com/walterdavis/placeholder-shiv — Ram, Sep 26 '13 at 16:41

score 2 · Answer 1 · answered Sep 26 '13 at 16:36

try this:

$("#search-btn").click(function (e) {
    e.preventDefault();
    var search_country = $("#search-country").val();
    var search_city = $("#search-city").val();
    var search_team = $("#search-team").val();
    var dataString =  {};

    dataString["action"] = "search";

    if (search_country != "Search by Country") {
        dataString["param1"] = search_country;
    }
    if (search_city != "Search by City") {
        dataString["param2"] = search_city;
    }
    if (search_team != "Search by team") {
        dataString["param3"] = search_team;
    }
    $.ajax({
        type: "get",
        url: "SearchServlet",
        data: dataString,
        success: function (data) {
            $('body').html(data);
            $('#msg').html('Search Results')
        }
    });

});

score 2 · Accepted Answer · answered Sep 26 '13 at 16:37

Last I recall, jQuery will take a JavaScript parameter object and convert it into the GET queryString parameters. Just prepare your object

$("#search-btn").click(function (e) {
  e.preventDefault();
  var search_country = $("#search-country").val();
  var search_city = $("#search-city").val();
  var search_team = $("#search-team").val();

  var params = {
    action : 'search'
  };

  if (search_country != "Search by Country") {
    params.param1 = search_country
  }
  if (search_city != "Search by City") {
    params.param2 = search_city
  }
  if (search_team != "Search by team") {
    params.param2 = search_team
   }
  $.ajax({
    type: "get",
    url: "SearchServlet",
    data: params,
    success: function (data) {
        $('body').html(data);
        $('#msg').html('Search Results')
    }
  });

});

How to append parameter to querystring if and only if textbox value present in javascript?

2 Answers2