Make a specific query based on the chosen radio value-CodePudding

I have a form like this:

<form>
    <input type="text" id="searchedWord"  value="words here"/>
    <button type="submit" id="findWord" >Search</button>
    
    <div>
      <input type="radio" value="exact match" id="exact-match">
      <label for="exact-match"  checked>Exact match</label>
      <input type="radio"  value="all matches" id="all-matches">
      <label for="all-matches">All matches</label>
    </div>
  </form>

Because I can't use name="" for radio buttons in this project, I made a script to toggle them using a class.

    let radioBtns = document.querySelectorAll('input[type="radio"]');

    function toggleCheck() {
      radioBtns.forEach(function (radioBtn) {
        radioBtn.classList.toggle('checked');
        radioBtn.classList.contains('checked') ? radioBtn.checked = true : radioBtn.checked = false;
     });
    }

    radioBtns.forEach(function (radioBtn){
    radioBtn.addEventListener('click', toggleCheck, false);
    });

    let anyMatch = document.getElementById('all-matches').classList.contains('checked');
    console.log(anyMatch);
    let exactMatch = document.getElementById('exact-match').classList.contains('checked');
    console.log(exactMatch);

Based on the chosen radio, I have to do a different query. If I choose exact match, the word(s) from input will contain quotes (queryWithQuotes). If I choose all matches, the words from input don't contain the quotes (queryWithoutQuotes).

        let pageUrl = window.location.protocol   "//"   window.location.host;
        const searchTerm = document.getElementById("searchedWord").value.replace("'", "''");

        if (exactMatch === true) {
            let queryWithQuotes = pageUrl    "/_api/search/query?querytext='"   '"'   searchTerm   '"'   "'&selectproperties='Path,Url'&sourceid='xxxxx'";
            console.log(`queryWithQuotes variable is: ${queryWithQuotes }`);
            $.ajax(
                {
                    url: queryWithQuotes,
                    method: "GET",
                    headers: { "Accept": "application/json; odata=verbose" },
                    success: success,
                    error: error
                }
            );
        } else if (anyMatch === true) {
            let queryWithoutQuotes = pageUrl    "/_api/search/query?querytext='"   searchTerm   "'&selectproperties='Path,Url'&sourceid='xxxxx'";
            console.log(`queryWithoutQuotes variable is: ${queryWithoutQuotes }`);
            $.ajax(
                {
                    url: queryWithoutQuotes,
                    method: "GET",
                    headers: { "Accept": "application/json; odata=verbose" },
                    success: success,
                    error: error
                }
            );
        } else {
            console.log('There is an error');
        }

For some reasons, the search is taking into consideration only the exact match. Even if I switch to All matches, search will continue with Exact match.

What is the reason?

CodePudding user response：

I cleaned up the code and this works fine in jsfiddle and SO code snippet. I don't know if you left important stuff out but maybe this'll help out in better understanding where your problems are coming from. I've commented all the changes I've made; feel free to ignore any that are just a result of posting here.

  let radioBtns = document.querySelectorAll('input[type="radio"]');

  function toggleCheck() {
    radioBtns.forEach(function (radioBtn) {
      radioBtn.classList.toggle('checked');
      radioBtn.checked = radioBtn.classList.contains('checked') ? true : false; // I fixed this ternary operator.
    });
  }

  radioBtns.forEach(function (radioBtn){
    radioBtn.addEventListener('click', toggleCheck, false);
  });

  function doSearch() {
    // I suspect this is the key issue that you had. The checks for anyMatch and exactMatch need to be inside the function for them to update.
    let anyMatch = document.getElementById('all-matches').classList.contains('checked');
    let exactMatch = document.getElementById('exact-match').classList.contains('checked');
    
    console.log('exact match:', exactMatch, '; any match:', anyMatch);
    
    // ... do the actual code here where you check anyMatch and exactMatch
  }

<input type="text" id="searchedWord"  value="words here"/>
<button type="button" onclick="doSearch()" id="findWord" >Search</button> <!-- I changed this button from submit to regular button since you're handling everything in javascript anyway -->
    
<div>
  <input type="radio" value="exact match" id="exact-match"  checked> <!-- I gave one of the radio buttons a "checked" by default -->
  <label for="exact-match"  checked>Exact match</label>
  <input type="radio"  value="all matches" id="all-matches">
  <label for="all-matches">All matches</label>
</div>