0

I have a form in my screen. I want to initially hide it. The user can enable it later on, enter the value, and submit the form. Submitting the form would update the screen. But this time I would like the form to stay visible. How do I do that?

The below javascript would hide the form initially.

$(document).ready(function(){           

    document.getElementById( 'form1' ).style.display = 'none';          

});

The below script would submit the form. But is there anyway I could ensure the form stay visible afterwards? what I have right now 'document.getElementById( 'form1' ).style.display = 'yes'' does not work.

function SubmitForm1(){ 

        document.getElementById("form1").submit();  
        document.getElementById( 'form1' ).style.display = 'yes'    

}
dickli2119
  • 145
  • 1
  • 14
  • the opposite of `display:none;` is not `yes` but rather `inherit` or `block` for form. and you'd better set the form with a style:"display:none" in its HTML tag rather than hide it on document ready. – Metaphox Aug 14 '17 at 20:02

2 Answers2

1

There are two easy ways to persist state across pages(outside local storage).

The first is to place information into your form urls. Ex. http://localhost?loaded=true. You can then use code like How can I get query string values in JavaScript? to retrieve the value and adjust the visibility of your form.

The second and more common is to store some sort of state on your server either in the Session or in a persistent storage like a database. When you serve the page you use whatever server side templating language you are using to adjust the visibility of the form based on the data you saved.

I would ask you to consider if you should be redirecting to a second page where the form is visible instead of manipulating visibility on the same page.

Deadron
  • 5,135
  • 1
  • 16
  • 27
0

'Yes' is not a valid property of the "display" attribute.

Think about what you are doing by setting the elements display to 'none'. You are manually setting the css of the element to .form { display: none;}.

If you want to keep your code as is ,try setting the value of the display attribute to a valid property. Like "block" or "inline".

However if you are using JQuery I suggest that, on form submit you 'toggle' the desired element. Like:

document.getElementById( 'form1' ).toggle();

This will toggle the display from non-visible to visible, and vice-versa.

Below is a link to the different property values of the display attribute. https://www.w3schools.com/cssref/pr_class_display.asp

Casper-Evil
  • 31
  • 1
  • 2