如何在一种形式(一个按钮)中进行2个动作?

时间:2019-06-09 21:34:37

标签: javascript html css

我有一个html表单和一个“提交”按钮。我有两个标签,我想做不同的事情。提交时,一个选项卡应转到一个链接,而另一选项卡应将表单带到另一个链接。 这是我的小提琴,以显示我正在使用的工具:

https://jsfiddle.net/4s8qevz7/

我已经尝试将动作链接到(到目前为止)通用链接。但是没有运气。

<form style="margin-top:40px;" id="search-box" action="">
    <div class="search-tab" data-search-type="catalog" action="http://catalog.com/" onClick="changePlaceholder(this)">Catalog </div>
    <div class="search-tab selected" data-search-type="website" action="https://www.google.com/"onClick="changePlaceholder(this)">Website </div>

我的预期结果将取决于活动选项卡,单击“执行”按钮时表单将尊重该结果。

2 个答案:

答案 0 :(得分:0)

1)以表单提交方法调用preventDefault()

2)从event.target获取活动标签

3)调用form.submit,并根据活动选项卡使用正确的选项。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
    .tab {
        overflow: hidden;

        /* Style the buttons that are used to open the tab content */
        .tab button {
            background-color: #f1f1f1;
            float: left;
            border: solid 1px #ccc;
            outline: none;
            cursor: pointer;
            padding: 14px 16px;
            transition: 0.3s;
        }

        /* Change background color of buttons on hover */
        .tab button:hover {
            background-color: #ddd;
        }

        /* Create an active/current tablink class */
        .tab button.active {
            background-color: #ccc;
        }

        /* Style the tab content */
        .tabcontent {
            display: none;
            padding: 6px 12px;
            border: 1px solid #ccc;
            border-top: none;
        }
        #search-text-form{
            margin-top: 2rem;
        }
        #current-action-section{
            margin-top: 2rem;
        }
    </style>
    <script>
    function openTab(evt, tabName) {
            // Declare all variables
            var i, tabcontent, tablinks;

            // Get all elements with class="tabcontent" and hide them
            tabcontent = document.getElementsByClassName("tabcontent");
            for (i = 0; i < tabcontent.length; i++) {
                tabcontent[i].style.display = "none";
            }

            // Get all elements with class="tablinks" and remove the class "active"
            tablinks = document.getElementsByClassName("tablinks");
            for (i = 0; i < tablinks.length; i++) {
                tablinks[i].className = tablinks[i].className.replace(" active", "");
            }

            // Show the current tab, and add an "active" class to the button that opened the tab
            document.getElementById(tabName).style.display = "block";
            evt.currentTarget.className += " active";
        }

    </script>
</head>
<body>
    <section id="search-bar">
        <div class="tab">
            <button id="openByDefault" class="tablinks" onclick="openTab(event, 'Catalog')" data-action="http://catalog.com">Catalog</button>
            <button class="tablinks" onclick="openTab(event, 'Website')" data-action="https://www.google.com">Website</button>
        </div>

        <div id="Catalog" class="tabcontent">
            <h3>Catalog</h3>
            <p>Catalog</p>
        </div>

        <div id="Website" class="tabcontent">
            <h3>Website</h3>
            <p>Website</p>
        </div>

        <form id="search-text-form">
            <input type="text" id="search-text" placeholder="Search Website"><button id="go">Submit</button>
        </form>

        <script>
            const form = document.getElementById('search-text-form');
            form.onsubmit = e => {
                e.preventDefault();
                const activeTab = document.getElementsByClassName('tablinks active')[0];
                const {action } = activeTab.dataset;

                console.log(action);
                document.getElementById('current-action').innerHTML = `Current Action: ${action}`;
                // when you're ready, call whatever api is usually called in the submit function

            }
            document.getElementById("openByDefault").click();
        </script>
    </section>
    <section id="current-action-section">
        <h3 id="current-action"></h3>
    </section>
    <script>
    var emailAddress = "jimmyleespann@outlook.com";
    //email; 
    var text = "https://docs.google.com/forms/d/e/1FAIpQLSdFDFGDFVDGGjdfgdfgdx8P4DOw/viewform?usp=pp_url&entry.745541291="+room+"&entry.1045781291="+rr+"&entry.1065046570=4&entry.1166974658="+hr+"&entry.839337160="+spO2+"&entry.103735076=&entry.515842896="+e1Name+"&entry.631828469="+e1Reps+"&entry.1814472044="+e2Name+"&entry.905508655="+e2Reps+"&entry.1234390406="+isVol+"&entry.197252120="+education+"&entry.1748983288="+notes; var message = 'Dear ' + patientName + '\n\n' + "Thank you for submitting.\n\nHere is an autofill link: " + text; var subject = 'Submission Confirmation'; GmailApp.sendEmail(emailAddress, subject, message);
    </script>
</body>
</html>

我无法为OP显示的更新的JSFiddle代码:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script>
        const state = {
            targetUrl: 'https://www.google.com'     // because this is the default selected tab
        }
        function setTargetUrl(url){
            state.targetUrl = url;
        }
        function changePlaceholder(div) {
            const searchTextEl = document.getElementById("search-text")
            searchTextEl.placeholder = `Search ${div.innerHTML.trim()}`;
            setTargetUrl(div.dataset.action);
        }
        function doSubmit(){
            console.log('submitForm', state);
        }
    </script>
</head>
<body>
    <form style="margin-top:40px;" id="search-box" onsubmit="submitForm">
        <div 
            class="search-tab" 
            data-search-type="catalog"
            data-action="http://catalog.com/" 
            onclick="changePlaceholder(this)">
                Catalog
        </div>

        <div 
            class="search-tab selected" 
            data-search-type="website"
            data-action="https://www.google.com/" 
            onclick="changePlaceholder(this)">
                Website
            </div>
        <script>
        </script>
        <a href="t$003f/" target="_blank" style="text-decoration:none">
            <div class="search-tab-link"> Login </div>
        </a>

        <div class="search-tab-content">
            <div class="search-bar">
                <input type="text" id="search-text" placeholder="Search Website" name="q">
                <span id="search-text-icon" onclick="doSubmit()" style="cursor:pointer;">
                    <img 
                        alt="go" 
                        title="Search"
                        src="img/search.png"
                        style="height:1.2rem;"
                    >
            </span>
        </div>
        <div id="search-old-catalog">
            <a href="http://.com/" target="_blank">
                Old Catalog
            </a>
        </div>
    </form>
</body>
</html>

答案 1 :(得分:0)

我无法让您的jsfiddle工作,但是这里有一个示例:“在一个表单中,一个按钮执行2个操作”。如果选中此复选框,则操作将转到 bing.com ,否则将转到 Wikipedia 。您的if语句可以按照Dov Rine的建议使用currentTarget,而不是使用复选框动态更改表单操作。

function ActionSelect() {
  if (document.getElementById('bing').checked) {
    document.getElementsByTagName('form')[0]['action'] = 'https://bing.com';
  }
}
<form style="margin:40px 50px;" action="https://www.wikipedia.org">
  Choose your form action:<br/>
  <input type="checkbox" id="bing"> Bing
  <p>
    <button type="submit" onclick="ActionSelect()">Submit</button>
  </p>
</form>