CODEWITHSUNDEEP
javascriptphphtml
Wisam Ahmed
Wisam Ahmed

Reputation: 155

style change not taking effect using javascript

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.

Upvotes: 1

Views: 118

Answers (2)

dlopez
dlopez

Reputation: 995

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.

Upvotes: 2

Rahele Dadmand
Rahele Dadmand

Reputation: 573

try this : 

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

Upvotes: 1

Related Questions