2017-11-11 6 views
1

POSTメソッドを使用してデータを送信すると、テキストボックスが消えてしまいます。 しかし、私はJavascriptを動作させることはできません。ページの再読み込みが行われるため、テキストボックスは常に存在します。javacriptを使用してスタイルの変更が有効にならない

<script> 
function puff() 
{ 
if (document.getElementById("updat").style.display == "block") 
    document.getElementById("updat").style.display = "none"; 
else 
    document.getElementById("updat").style.display = "block"; 
} 
</script> 
</head> 
<body> 
<div class="container" id="upd"> 
    <form class="form-signin" action="rough_page.php" method="POST"> 
    <div class="input-group" id="updat"> 
    <input type="text" name="text1" class="form-control" value=""/> 
    <input type="text" name="text2" class="form-control" value=""/> 
    <input type="text" name="text3" class="form-control" value=""/> 
    <input type="text" name="text4" class="form-control" value=""/> 
    <input type="hidden" name="flag" class="form-control" value=""/> 
    </div> 
    <button class="btn btn-lg btn-primary btn-block" onclick="puff()" type="submit">Update</button> 
    </form> 
</div> 
</body> 

私はテキストボックスが消えると、私はもう一度ボタンをクリックすると、それらが再表示されたいたいたいボタンをクリックすると。

+1

https://developer.mozilla.org/en-US/docs/AJAX/Getting_Started – Andreas

+0

jqueryを使用できますか? –

答えて

2

はこれを試してください:あなたはフォームをやっている

function puff() { 
    var x = document.getElementById("updat"); 
    if (x.style.display === "none") { 
     x.style.display = "block"; 
    } else { 
     x.style.display = "none"; 
    } 
} 
2

通知は、ボタンを押すと、そのため、ブラウザがページを「リロード」しなければならないたびに提出します。実際のリロードではないので、引用符を付けます。他の場所に置くと、別のページに行くことがわかります。これはフォームの宛先なのでです。

再ロードを避けたい場合は、送信イベントの防止、送信ボタンを通常のボタンに変更するなど、いくつかの方法があります。他のものよりも正しいものがあります。

次に、@Andreasが示唆したように、AJAXでリクエストを処理する必要があります。

このようなリクエストを処理したときに、@Raheleがあなたの提案したように、表示されているかどうかにかかわらず、テキストボックスの問題を修正できます。

とにかく、フォームがどのように動作するかの基本を理解していないように、javascriptのドキュメントを見てみてください。

関連する問題