个人中心
gpt4 book ai didi

javascript - 如何在一个表单、一个按钮中执行 2 个操作？

转载 作者：行者123 更新时间：2023-11-28 19:24:48 24 4
gpt4 key购买 nike

我有一个 html 表单和一个“提交”按钮。我有两个选项卡，我想做不同的事情。提交时的一个选项卡应转到一个链接，而另一个选项卡应将表单转到另一个链接。这是我的 fiddle 来展示我正在使用的东西:

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>

我的预期结果将取决于事件选项卡，当单击转到按钮时，表单会遵守该结果。

最佳答案

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>

关于javascript - 如何在一个表单、一个按钮中执行 2 个操作？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/56518530/

24 4 0
文章推荐： javascript - 使用按钮更改颜色文本
文章推荐： html - CSS 网格移动元素而不是重叠 z-index
文章推荐： css - 当父容器启​​用了内容可编辑时，不会显示 Microsoft Edge 中的调整光标大小
文章推荐： css - 使 Bandcamp iframe 响应 - 居中和溢出问题
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com