[FRAGE] Warum wird Formular nicht abgesendet?

[Schmido86]

Liebe Foren-Gemeinde,

ich habe in einem Bootstrap Tab 3 Formulare.
Alle 3 reagieren auf die gleiche Funktion. Allerdings wird nur beim ersten Tab das Formular abgesandt. Beim 2. und 3. Formular passiert nichts.

Kann hier jmd. den Fehler entdecken?

<div class="tab-content">
                        <div id="synonym" class="tab-pane fade active show">
                                <form class="form-wrap mt-4" id="syn" onsubmit="javascript: Search(); return false;" action="">
                                    <div class="btn-group" role="group" aria-label="Basic example">
                                        <input type="hidden" name="type" id="type" value="Syn">
                                        <input type="text" placeholder="Suche Synonyme..." class="btn-group1" id="Searchword" name="search">
                                        <button type="submit" class="btn-form"><span class="icon-magnifier search-icon"></span><i class="pe-7s-angle-right"></i></button>
                                    </div>
                                </form>                           
                        </div>
                        <div id="verb" class="tab-pane fade">
                           <form class="form-wrap mt-4" id="verbs" onsubmit="javascript: Search(); return false;" action="">
                                    <div class="btn-group" role="group" aria-label="Basic example">
                                        <input type="hidden" name="type" id="type" value="Verbs">
                                        <input type="text" placeholder="Suche Verben..." class="btn-group1" id="Searchword" name="search">
                                        <button type="submit" class="btn-form"><span class="icon-magnifier search-icon"></span><i class="pe-7s-angle-right"></i></button>
                                    </div>
                                </form>
                        </div>
                        <div id="trans" class="tab-pane fade">
                           <form class="form-wrap mt-4" id="translation" onsubmit="javascript: Search(); return false;" action="">
                                    <div class="btn-group" role="group" aria-label="Basic example">
                                        <input type="hidden" name="type" id="type" value="Translations">
                                        <input type="text" placeholder="Suche Übersetzungen..." class="btn-group1" id="Searchword" name="search">
                                        <button type="submit" class="btn-form"><span class="icon-magnifier search-icon"></span><i class="pe-7s-angle-right"></i></button>
                                    </div>
                                </form>
                        </div>
                      </div>

Das Skript sieht so aus:

<script type="text/javascript">
	function Search()
	{
            
		var searchword = $("#Searchword").val();
                var type = $("#type").val();
		if(searchword != '')
		{
                    
			searchword = searchword.replace(/\?/g, "");

                        if(type === "Syn") {
                            location = '{$systemUrl}'+searchword+".html";
			}
			else if(type === "Translations") {
                            location = '{$systemUrl}'+"tradutor/"+searchword+".html";
                                
			}
			else {
                            location = '{$systemUrl}'+"verb/"+searchword+".html";
			}

		}
	}
        </script>

Vielen lieben Dank!

 

[kkapsner]

Eine ID muss dokumentenweit eindeutig sein. Du hast #type dreimal vergeben.

Um die drei Formulare in der Funktion zu unterscheiden, solltest du im onsubmit das this als Parameter an Submit (kein besonders guter Funktionsname) übergeben.

PS: "javascript: " in onsubmit ist überfüssig.

 

[Schmido86]

Lieber kkapsner,

vielen Dank für deine Unterstützung.
Ich habe die type Definition als Parameter ausgelagert:

<div class="tab-content">
                        <div id="synonym" class="tab-pane fade active show">
                                <form class="form-wrap mt-4" id="syn" onsubmit="Search('Syn'); return false;" action="">
                                    <div class="btn-group" role="group" aria-label="Basic example">
                                        <!--<input type="hidden" name="type" id="type" value="Syn">-->
                                        <input type="text" placeholder="Suche Synonyme..." class="btn-group1" id="Searchword" name="search">
                                        <button type="submit" class="btn-form"><span class="icon-magnifier search-icon"></span><i class="pe-7s-angle-right"></i></button>
                                    </div>
                                </form>                           
                        </div>
                        <div id="verb" class="tab-pane fade">
                           <form class="form-wrap mt-4" id="verbs" onsubmit="Search('Verb'); return false;" action="">
                                    <div class="btn-group" role="group" aria-label="Basic example">
                                        <!--<input type="hidden" name="type" id="type" value="Verbs">-->
                                        <input type="text" placeholder="Suche Verben..." class="btn-group1" id="Searchword" name="search">
                                        <button type="submit" class="btn-form"><span class="icon-magnifier search-icon"></span><i class="pe-7s-angle-right"></i></button>
                                    </div>
                                </form>
                        </div>
                        <div id="trans" class="tab-pane fade">
                           <form class="form-wrap mt-4" id="translation" onsubmit="Search('Translations'); return false;" action="">
                                    <div class="btn-group" role="group" aria-label="Basic example">
                                        <!--<input type="hidden" name="type" id="type" value="Translations">-->
                                        <input type="text" placeholder="Suche Übersetzungen..." class="btn-group1" id="Searchword" name="search">
                                        <button type="submit" class="btn-form"><span class="icon-magnifier search-icon"></span><i class="pe-7s-angle-right"></i></button>
                                    </div>
                                </form>
                        </div>
                      </div>

Leider tut sich beim 2. und 3. immer noch nichts.

Die Funktion ist entsprechend angepasst:

function Search( type )
	{
            
		var searchword = $("#Searchword").val();

		if(searchword != '')
		{
                    
			searchword = searchword.replace(/\?/g, "");

                        if(type === "Syn") {
                            location = '{$systemUrl}'+searchword+".html";
			}
			else if(type === "Translations") {
                            location = '{$systemUrl}'+"tradutor/"+searchword+".html";
                                
			}
			else {
                            location = '{$systemUrl}'+"verb/"+searchword+".html";
			}

		}
	}

Woran hapert es nun noch?

 

[Dormilich]

Woran hapert es nun noch?

Gleicher Fall wie bei den <form>, nur diesmal mit <input>. Du hast wieder IDs mehrfach vergeben.