How to change CSS after submission of a form

Question

I am displaying data on a page after submitting a form, in a div below the form whose visibility is initially set to hidden

using JavaScript I have set it to turn visible after button click

HTML:

<form action = "page2.php" method = "POST">
<select>
    <option selected>Choose...</option>
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
</select>

<select>
    <option selected>Choose...</option>
    <option value="4">4</option>
    <option value="5">5</option>
    <option value="6">6</option>
</select>

<button type="submit" name="btn1" onclick="showDiv()">Next</button>
</form>

<div style = "visibility:hidden" id = "aftersubmit">
    <p>Data</p>
    ...
</div>

JS:

function showDiv() {
document.getElementById("aftersubmit").style.visibility = 'visible';
}

I want the div to be visible after I click the submit button on the form, but since the form is being posted, the page refreshes and the style goes back to hidden.

use AJAX if you don't want the refresh, or use some backend variable (like testing $_POST in PHP) to set the CSS, or cookies, or local storage, etc — Temani Afif, Feb 03 '19 at 15:49

Dialex · Accepted Answer · 2019-02-03T16:05:43.700

2

You could use Ajax to send the form without refreshing.

For an easier solution, you can set a GET variable in the url and check if the variable is set. I am assuming that you send the data to the same page and that you want a javascript solution only.

HTML

<form action = "page2.php?submitted" method = "POST">
<select>
    <option selected>Choose...</option>
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
</select>

<select>
    <option selected>Choose...</option>
    <option value="4">4</option>
    <option value="5">5</option>
    <option value="6">6</option>
</select>

<button type="submit" name="btn1" onclick="showDiv()">Next</button>
</form>

<div style = "visibility:hidden" id = "aftersubmit">
    <p>Data</p>
    ...
</div>

JS

if(window.location.href.indexOf("submitted") > -1){
   document.getElementById("aftersubmit").style.visibility = 'visible';
}

edited Feb 03 '19 at 16:05

answered Feb 03 '19 at 15:57

Dialex

439
2
9

the form is sent with a POST method – Temani Afif Feb 03 '19 at 15:58
Yes, but you can still set a variable in the url in the form action – Dialex Feb 03 '19 at 15:59
@Dialex Thanks this worked, but is it the best solution to this problem?, or should I look into AJAX, I am willing to do so if that's whats better. – Repub619 Feb 03 '19 at 16:58
It really depends on your needs. I don't know the context of your code (I don't know if you use PHP or not), but if it's enough for you, you can stay with that code. The advantage of ajax is that it won't refresh the page and you will get the result immediately on the page. – Dialex Feb 03 '19 at 17:00
@Dialex I am using PHP for my code, I think I will look into AJAX because that might be better in my case. Anyhow, thanks. – Repub619 Feb 03 '19 at 17:02
Yes, then I recommend it. It can be useful for other cases you may have in the future :-) – Dialex Feb 03 '19 at 17:03

BenHerbert · Answer 2 · 2019-02-03T16:04:59.213

if you are not going to use AJAX, then perhaps a shorthand ternary to swap a class is an a good option.

I am using a utility class in the example (u-visible).

HTML / PHP

<div id="aftersubmit" class="<?php echo (isset($_POST) ? 'u-visible' : 'u-hidden'); ?>">
    <p>Data</p>
    ...
</div>

CSS

.u-hidden {
    visibility: visible
}

.u-visible {
    visibility: hidden;
}

EDIT: I use $_POST on its own here, but you could attach to an input name, or add a hidden input to your form to use instead e.g.

<input type="hidden" name="formSubmitted">

isset($_POST) && $_POST['formSubmitted']

I hope this helps. :-)

score -2 · Answer 3 · answered Feb 03 '19 at 16:03

-2

To do this, you need to send the data by Ajax and use always() and done() and other functions !

answered Feb 03 '19 at 16:03

irmmr

39
1
7

How to change CSS after submission of a form

3 Answers3