2016-12-14 4 views
0

Ich habe folgenden Mock-Schnipsel:einen Link öffnen mit onsubmit

JS:

function generateLink() 
{ 
    var A = document.getElementById('AAA').value; 
    var B = document.getElementById('BBB').value; 

    if(B == "1" || B == "2") 
    link ='http://' + B + '.' + A + '.domain'; 
    else if(B == "3" || B == "4") 
     link ='http://' + B + '.' + A + '.domain/link.jsp'; 
    else 
    link ='/404.html'; 

    return link; 
} 

function showLink() 
{ 
    var link = generateLink(); 

    document.getElementById("link").href = link; 
    document.getElementById("link").innerHTML = link; 
} 

document.formName.onsubmit = function(){ 
    this.action = generateLink(); 
} 

HTML:

<form name="formName" target="_blank"> 

<div style="margin: 0 auto; width:600px;"> 

    <div style="float:left;"><span>Pick AAA</span><br> 
    <select id="AAA" onchange="showLink()"> 
     <option value="11">Eleven</option> 
     <option value="12">Twelve</option> 
     <option value="13">Thirteen</option> 
     <option value="14">Fourteen</option> 
    </select> 
    </div> 

    <div style="float:right;"><span>Pick BBB</span><br> 
    <select id="BBB" onchange="showLink()"> 
     <option value="1">One</option> 
     <option value="2">Two</option> 
     <option value="3">Three</option> 
     <option value="4">Four</option> 
    </select> 
    </div> 

    <div style="float:left; margin-left:120px; margin-right: 40px; margin-top:70px;"> 
    <a href="generateLink()" id="link"></a><br><br> 
    <input type="submit" value="Go to"><br><br> 
    <input type="reset" value="Reset Selection"> 
    </div> 

Wenn ich diesen Code ausführen, was passiert ist, dass Die href öffnet die richtige url in einem neuen Tab, während die submit button öffnet die Seite Ich bin gerade in einem neuen Tab. Ich bin mir nicht sicher, was ich falsch mache. Geht die document.formName.onsubmit nicht davon aus, dass die submit Taste genauso funktioniert wie die href?

Antwort

1

Ich habe versucht, eine Geige mit Ihrem Code einzurichten, und es hat gut genug funktioniert. Aber während ich das tat, merkte ich, dass ich ein Stück Code bewegen musste, um ein kleines Problem zu vermeiden, also werde ich vermuten, dass Sie die gleiche Situation haben. Meine Vermutung ist, dass Sie Ihren gesamten JavaScript-Code vor dem HTML haben. Wenn dieser Teil

document.formName.onsubmit = function(){ 
    this.action = generateLink(); 
} 

ausgeführt wird, wird die Form noch nicht vorhanden ist, und die onsubmit kann nicht eingestellt werden (sollten Sie einen Fehler über sie in der Konsole sehen, auch). Wenn Sie später auf Ihre Absenden-Schaltfläche klicken, hat das Formular keine action definiert und geht nur auf die gleiche Seite (sein Standardverhalten). Here's a fiddle mit diesem Problem haben.

Die einfachste Lösung ist das Verschieben der onsubmit Zuweisung nach dem Formular. Here's the same fiddle, with the relevant code moved, das tut tatsächlich, was Sie erwarten.

+0

Sie hatten absolut Recht. Vielen Dank! – Nik

+0

Gibt es eine Chance, dass Sie wissen, wie der "Link" über dem "submit" -Button und nicht zwischen den "select" -Elementen angezeigt wird? – Nik

+1

Nun, es hängt davon ab, wie genau es sein sollte, aber Sie können es zum Beispiel vor dem Formular verschieben. Übrigens scheinen Sie zwei Linkelemente mit derselben ID zu haben, wenn Sie beide wirklich benötigen, sollten sie unterschiedliche IDs haben. – Aioros

1

Sie wollen eine Aktion setzen = "" auf dem

<form> 

Tag. Wenn das Formular abgeschickt wird, wird es an die Seite gesendet, die in action = "" definiert ist. Wenn sie nicht definiert ist, wird sie standardmäßig auf dieselbe Seite gesendet.

Verwandte Themen