2016-12-14 10 views
0

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

何が起こるかということですhrefは新しいタブで正しいurlを開き、submitボタンを押すと、私は新しいタブで大変賑やかなページを開きます。私は何が間違っているのか分かりません。 document.formName.onsubmitsubmitボタンをhrefと同じように動作させることはできませんか?

答えて

1

あなたのコードでフィーリングをセットアップしようとしましたが、十分に機能しました。しかし、それを実行しながら、小さな問題を避けるためにコードを移動しなければならないことに気がついたので、私は同じ状況を抱えていると推測します。 私の推測では、HTMLの前にすべてのJavaScriptコードがあると思います。この部分

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

が実行されると、フォームがまだ存在していない、とonsubmitは(あなたも、あなたのコンソールで、それに関するエラーが表示されます)を設定することはできません。後で送信ボタンをクリックすると、フォームにはactionが定義されておらず、同じページ(デフォルト動作)になります。 Here's a fiddleこの問題があります。

最も簡単な修正は、フォームの後にonsubmit割り当てを移動することです。 Here's the same fiddle, with the relevant code moved、それは実際にあなたが期待することを実行します。

+0

あなたは絶対に正しいです。ありがとう! – Nik

+0

'link'が' submit'ボタンの上に表示され、 'select'要素の間に表示されないようにする方法を知っていますか? – Nik

+1

さて、どのように正確にする必要があるかによって異なりますが、フォームの前に移動することができます。ところで、あなたは本当に両方の異なるIDを持つ必要がある場合は、同じIDを持つ2つのリンク要素を持っているようです。 – Aioros

1

あなたは

<form> 

タグに "" =アクションを設定したいです。フォームが提出されると、action = ""で定義されたページに送信されます。定義されていない場合は、デフォルトで同じページに戻されます。