1

I have a html form and one 'submit' button. I have two tabs that I want to do different things. One tab when submitting should go to one link, whereas the other tab should take the form to another link. Here is my fiddle to show what I am working with :

https://jsfiddle.net/4s8qevz7/

I have tried putting in actions to go to for, (as of right now) generic links. But no luck. 

<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>

My expected results would be depending on the active tab, the form would respect that when the go button is clicked.

brooksrelyt
  • 3,925
  • 5
  • 31
  • 54
Abigail
  • 33
  • 3

2 Answers2

0

1) call preventDefault() in the form submit method

2) get active tab from event.target

3) call form.submit with the correct options based on the active tab. 

<!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>

Updated JSFiddle code that I couldn't get to show up for OP:

<!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>
Dov Rine
  • 810
  • 6
  • 12
  • See my next post for a simple but complete tabs version based on this: https://www.w3schools.com/howto/howto_js_tabs.asp and your code. – Dov Rine Jun 09 '19 at 22:54
  • It would be preferred to just [edit] your answer to include the code from your other answer – Heretic Monkey Jun 09 '19 at 22:58
  • @Abigail, you should also have a look at: https://developer.mozilla.org/en-US/docs/Learn/HTML/Howto/Use_data_attributes – Dov Rine Jun 09 '19 at 23:01
  • @HereticMonkey, Thanks for the suggestion. I tried to add a fiddle, but couldn't make it public :( so I just put the code into a new answer. I'll edit the other one next time. – Dov Rine Jun 09 '19 at 23:02
  • This has nothing to do with jsfiddle. Just edit your code-only answer, copy it, edit this answer, paste the code. Otherwise, both answers are incomplete. – Heretic Monkey Jun 09 '19 at 23:04
  • Thank you I just dont know how to get it working in my code – Abigail Jun 09 '19 at 23:57
  • I just updated your fiddle at: https://jsfiddle.net/4s8qevz7/ to achieve your basic goal. You still need to actually submit the form in doSubmit. – Dov Rine Jun 10 '19 at 00:26
  • @Abigail, Btw, imho, this code can still be improved quite a bit. Please consider it a starting point. – Dov Rine Jun 10 '19 at 00:27
  • @DovRine thanks so much I appreciate it but I do not see the update code here for some reason https://jsfiddle.net/4s8qevz7/ – Abigail Jun 10 '19 at 00:36
  • @Abigail, I updated my original answer with the code on JSFiddle. It doesn't include the css, though. – Dov Rine Jun 10 '19 at 00:42
0

I couldn't get your jsfiddle to work, but here's an example of "2 actions within one form, one button." If the checkbox is checked, the action goes to bing.com, otherwise it goes to Wikipedia. Your if statement can use currentTarget as Dov Rine suggested, instead of a checkbox to dynamically change the form action. 

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>
brooksrelyt
  • 3,925
  • 5
  • 31
  • 54
Bman70
  • 743
  • 5
  • 11