Как создать кнопку, которая запускает событие «щелчка» на 3 других кнопках - PullRequest
Новая
       27

Как создать кнопку, которая запускает событие «щелчка» на 3 других кнопках

0 голосов
/ 30 января 2019

У меня есть 3 поисковых входа и 3 кнопки, каждая открывает URL (в новом окне) с поисковой системой, которая ищет строки из соответствующего ввода.

Мне нужно сделать одно поле ввода (которые заполняют все остальные входы) и одна кнопка, которая при нажатии вызывает все кнопки, поэтому при нажатии она откроет 3 новые вкладки / окна.

Проблема: триггер при нажатии работает только для последнего события нажатия.

Я пытался использовать trigger("click"); или .click(); Я пытался сделать его кратным так: $("#summon,.goSearch,#scholar").trigger("click"); или тому подобное $(".summon-search-submit").trigger('click'); $(".goSearch").trigger('click'); $(".google-search-submit").trigger('click');

КОД 

jQuery(document).ready(function($) {
    /* copy search to inputs */
    $("input#lb_search").keyup(function() {
        $mySearch = $("input#lb_search").val();
        $('.summon-search-field,#primoQueryTemp,.googleSearchInput').val($mySearch);
    });

    // Make the search
    $(document).on('click', '#start_search', function(e) {

        /* check if one of the checkboxes is checked return true/false */
        $atLeastOneIsChecked = $('input[name="checkbox_lb"]:checked').length > 0;

        if ($atLeastOneIsChecked == false && $(lb_search).val() != '') {
            $("#summon")[0].checked = true;
            $(".summon-search-submit").trigger('click');
        }

        if ($atLeastOneIsChecked == true && $(lb_search).val() != '') {

            if ($('#summon').is(':checked')) {
                $(".summon-search-submit").trigger('click');
                alert('summon');
            }
            if ($('#primo').is(':checked')) {
                $(".goSearch").trigger('click');
                alert('primo');
            }
            if ($('#scholar').is(':checked')) {
                $(".google-search-submit").trigger('click');
                alert('scholar');
            }
        }
    });
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!-- The main search input/button - the clicked one.-->
<input name="lb_search" id="lb_search" type="search"><button id="start_search">search</button><input type="checkbox" name="checkbox_lb" id="summon" value="Summon" checked=""><input type="checkbox" name="checkbox_lb" id="primo" value="Primo"><input type="checkbox" name="checkbox_lb" id="scholar" value="Google Scholar">
<!--1 search engine - triggered -->
<form class="summon-search-widget" id="blablabla" method="get" name="summonBoxFormsblablabla">
   <div class="summon-search-box"><input id="summonSearchTermsblablabla" type="text" class="summon-search-field" name="q" autocomplete="off" placeholder="blablabla""><input type="submit" value="Search" class="summon-search-submit "></div>
</form>
<!-- 2 search engine - triggered-->
<form class="primo_form" id="simple" name="searchForm" method="get" target="_blank" action="blablabla/primo_library/blablabla/dlSearch.do" enctype="application/blablabla;" onsubmit="return validateForm()"><input class="searchInput" type="text" id="primoQueryTemp" value=" " name="queryTemp" onkeypress="searchKeyPress(event);"><input class="goSearch" value="search" id="go" title="Search" alt="Search" type="button" onclick="searchPrimo()"></form>
<!-- 3 search engine - triggered-->
<form class="googleForm" target="_blank" method="get" action="https://scholar.google.co.il/scholar"><input class="googleSearchInput"  placeholder="Search Google scholar" type="text" name="q"><input class="google-search-submit" type="submit" value="Search"></form>

1 Ответ

0 голосов
/ 30 января 2019

jsfiddle пример

ваш html 

<input name="lb_search" id="lb_search" type="search">
<button id="start_search">search</button>
<input type="checkbox" name="checkbox_lb" id="summon" value="Summon" checked="">
<input type="checkbox" name="checkbox_lb" id="primo" value="Primo">
<input type="checkbox" name="checkbox_lb" id="scholar" value="Google Scholar">

<form class="summon-search-widget" id="summon_form" target="_blank" action="https://www.facebook.com/">
  <input name="summon_search" id="summon_search" type="search" placeholder="summon">
  <input type="submit" value="Search" class="summon-search-submit">
</form>

<form class="primo-search-widget" id="primo_form" target="_blank" action="https://www.instagram.com/">
  <input name="primo_search" id="primo_search" type="search" placeholder="primo">
  <input type="submit" value="Search" class="primo-search-submit">
</form>

<form class="scholar-search-widget" id="scholar_form" target="_blank" action="https://jsfiddle.net/">
  <input name="scholar_search" id="scholar_search" type="search" placeholder="scholar">
  <input type="submit" value="Search" class="scholar-search-submit">
</form>

ваш JavaScript 

$(document).ready(function() {
  $("input#lb_search").keyup(function() {
    $mySearch = $("input#lb_search").val();
    $('#summon_search, #primo_search, #scholar_search').val($mySearch);
  });

  $(document).on('click', '#start_search', function(e) {
    e.preventDefault();
    if ($('#summon').is(':checked') || $('#primo').is(':checked') || $('#scholar').is(':checked')) {
      if ($('#summon').is(':checked')) {
        $("#summon_form").submit();
      }
      setTimeout(function() {
        if ($('#primo').is(':checked')) {
          $("#primo_form").submit();
        }
      }, 1000);
      setTimeout(function() {
        if ($('#scholar').is(':checked')) {
          $("#scholar_form").submit();
        }
      }, 300);
    }
  });
});

Из ваших комментариев я согласен, что мы не можемсделать триггеры один за другим.Ответ, который я дал, не является лучшим решением, но если вы хотите его достичь, вы можете сделать это с помощью функции setTimeout .Это просто способ получить желаемый результат.

...