Search code examples
javascriptjqueryhtmlgoogle-search-api

Google search bar - add custom search text thru input checkbox

I am trying to add custom search text to a google search bar when a checkbox clicked and remove said text when this is removed. I have figured out how to add/ remove the text in a text-area and how to put custom text in the search bar but I am having some difficulties in figuring out how to replace the custom text in the search bar with the text from the checkboxes when these are clicked.

HTML

<body>
    <div id="content">
        <div id="search">
<gcse:search></gcse:search>
            <div class="check_content">
            <div class="checkbox">
                <input type="checkbox" value="Value 1" id="checkbox1" name="checkbox" />
                <label for="checkbox1" ></label>
            </div>
                 <span>Value 1</span>
            </div>
             <div class="check_content">
            <div class="checkbox">
                <input type="checkbox" value="Value 2" id="checkbox2" name="checkbox" />
                <label for="checkbox2" ></label>
          </div>
                 <span>Value 1</span>
            </div>
            <div class="check_content">
            <div class="checkbox">
                <input type="checkbox" value="Value 3" id="checkbox3" name="checkbox" />
                <label for="checkbox3" ></label>

              </div>
                <span>Value 1</span>
            </div>

        </div>
        <textarea id="text"></textarea>
        </div>

<strong>Google Search Bar with Custom Text</strong>

<script>
  (function() {
    var cx = '014565979167738564771:fixr4qj_zfs';
    var gcse = document.createElement('script');
    gcse.type = 'text/javascript';
    gcse.async = true;
    gcse.src = 'https://cse.google.com/cse.js?cx=' + cx;
    var s = document.getElementsByTagName('script')[0];
    s.parentNode.insertBefore(gcse, s);
  })();

  window.onload = function(){
      document.getElementById('gsc-i-id1').placeholder = 'This is custom text';
    };
</script>

This is placed right above the closing body tag.

Function which appends text from checkboxes to textarea

$("input[name=checkbox]").change(function() { 
  updateAllChecked(); 
}); 

function updateAllChecked() { 
  $('#text').text(''); 
  $("input[name=checkbox]").each(function() { 
    if (this.checked) { 
      let old_text = $('#text').text() ? $('#text').text() + ', ' : ''; 
      $('#text').text(old_text + $(this).val()); 
    } 
  }) 
}

Also included the JS Fiddle - https://jsfiddle.net/2pdkv6ph/1/

Solution

  • You have several problems with your code. First, $(this).val() is not the text of the span that follows the checkbox. You'll need to traverse the DOM in order to find that.

    $(this).parent('div').parent('div').find('span').text();

    Second, the order in which you're clearing the textbox and then trying to evaluate the text in the textbox is backwards (you can't clear it and then inspect it to see what the "old" text is because you just cleared it).

    A simpler approach would be to use an array, and when the checkbox is selected, push the span's text to the array. After your loop, convert your array into a comma delimited string and assign that value to the textbox.

    function updateAllChecked() {
   var myArray = [];
  $("input[name=checkbox]").each(function() {
    if (this.checked) {
    var spanText= $(this).parent('div').parent('div').find('span').text();
    myArray.push(spanText);
    }
  });
  $('#text').text(myArray.join(", "));
  //then assign to the Google text box?
  document.getElementById('gsc-i-id1').value = myArray.join(", ");
}

    NOTE: I'm not entirely clear what the purpose of your input with id="text" in relation to the Google search input. So, I've shown how to assign the span text(s) to both.

    Here is a Fiddle demo: https://jsfiddle.net/zephyr_hex/g97rzy2e/2/