現在のhtmlフォームに<object>を挿入する

Question

私は入力ボックスとボタン付きのWebページを持っています。ユーザーがいくつかの値を入力すると（12345）、そのフォームの下または代わりにオブジェクトを表示する必要があります（入力ボックスとボタン）。

私はを通じて値チェックを処理していますし、私の全体のコードは次のようになります。

<form name="form" action="" method="post"> 
    <input type="text" name="subject" id="subject" placeholder="UNESI KOD"> 
</form> 

<button onclick="proveriKljuc()" style="margin-top:20px">Potvrdi!</button> 
<script> 
    function proveriKljuc() { 
    if (document.getElementById("subject").value == 12345) { 
     document.write(
     "<center><object id='object1' data='http://termodom.rs/wp-content/uploads/2016/12/akcija1-1.jpg'></object></center>" 
    ); 
    } 
    } 

</script> 

は現在、このコードは、新しいウィンドウ（ページ上のオブジェクトのみ）でオブジェクトを示しています。

また、これは重要ですが、助けがあれば、入力を押してファンクションproveriKljuc()を有効にするとどうすれば処理できますか？

Answer 1

document.writeを使用しないでください。あなたのオブジェクトは、フォームの下に表示させたい場合は

<div id="wrapper"> 
<form name="form" action="" method="post"> 
    <input type="text" name="subject" id="subject" placeholder="UNESI KOD"> 
</form> 
</div> 

<button onclick="proveriKljuc()" style="margin-top:20px">Potvrdi!</button> 
<script> 
function proveriKljuc() 
{ 
if(document.getElementById("subject").value == 12345) 
{ 
document.getElementById("wrapper").innerHTML = "<center><object id='object1' data='http://termodom.rs/wp-content/uploads/2016/12/akcija1-1.jpg'></object></center>"; 
} 
} 
</script> 

：あなたは現在のフォームを交換したい場合は

<div id="wrapper"> 
<form name="form" action="" method="post"> 
    <input type="text" name="subject" id="subject" placeholder="UNESI KOD"> 
</form> 
</div> 

<button onclick="proveriKljuc()" style="margin-top:20px">Potvrdi!</button> 
<script> 
function proveriKljuc() 
{ 
if(document.getElementById("subject").value == 12345) 
{ 
document.getElementById("wrapper").innerHTML += "<center><object id='object1' data='http://termodom.rs/wp-content/uploads/2016/12/akcija1-1.jpg'></object></center>"; 
} 
} 
</script> 

Answer 2

あなたは、ページのロード後にdocument.writeを使用することはできません。ページを消去します。代わりに、divやspanを持って、そのinnerHTMLや、document.createElementを使って作成したdivのappendChildを埋めてください。提出を停止したり、ボタンtype="button"を作るために偽のonSubmitを返す - 代わりHow to show hidden div after hitting submit button in form?

隠されたdiv要素を示しstacksnippetsが問題である何

window.onload = function() { 
    document.getElementById("form").onsubmit = function() { 
    if (this.elements["subject"].value == 12345) { 
     document.getElementById("objContainer").innerHTML = "<center><object id='object1' data='http://termodom.rs/wp-content/uploads/2016/12/akcija1-1.jpg'></object></center>"; 
    } 
    return false; // ignore submit 
    } 
} 

<form id="form" action="" method="post"> 
    <input type="text" name="subject" id="subject" placeholder="UNESI KOD"> 
    <button type="submit" style="margin-top:20px">Potvrdi!</button> 
</form> 
<div id="objContainer"></div>