style change not taking effect using javascript
Question
I want the text box to go away once data is sent via POST method. But I cant get the Javascript to work. Page keeps Re-loading and therefore, textbox is always there.
<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>
Once I click the button I want the textboxes disappear and, I want want them to Reappear once I click the button again.
2 answers
solution1
2 2017-11-11 09:13:31
Notice that you're doing a form submit every time you press the button and therefore, the browser must "reload" the page. And I put quotes because it's not a real reload. If you put in other destination you will see that you go to another page, because it's the form destination.
If you want to avoid that reload, there are several ways to do it, like preventing the submit event, changing the submit type button to a normal button,... some ones are more correct than the others.
Then you should handle your request with AJAX, like @Andreas suggested you.
When you handled your request like that, you can fix the problem with you text boxed being showed or not, like @Rahele suggested you for example.
Anyways, try to take a look on javascript documentation, because the whole thing sounds like you don't understand some basics of how the form submits work.
solution2
1 2017-11-11 09:00:46
try this :
function puff() {
var x = document.getElementById("updat");
if (x.style.display === "none") {
x.style.display = "block";
} else {
x.style.display = "none";
}
}
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.