I want to set a variable in javascript and want it to be processed after a normal post in PHP

Question

0.00/5 (No votes)

See more:

Hello all,

I've developed an app to keep track of the time I work in different projects, slowly it is growing and offering more and more options and things that make my life easier.

In one page I have 2 columns (one to set customer and project details) and one to write the job done.
I have added a small arrow in the middle of those two columns. When I press this arrow, the left column hides and the right one occupies the entire width of the window, making it much easier to write the job being done.

The handler of the click on the arrow is Javascript, and this works as expected, the javascript code changes the styles to make that left part of the form invisible.

But when I post the form (using another button / the submit one) the PHP is not aware of hidden state of the left side so I have to click again that arrow to hide it again after each form submit.

How could I leave a variable written from Javascript that could be read after submitting the form in PHP to be able to hide again the left side if it was already hidden when submitting the form?

Thank you all!

What I have tried:

setting a cookie, without much luck.

Posted 4 days ago

Joan M

Updated 3 days ago

v2

Add a Solution

3 solutions

Solution 2

The dirty hack way of accomplishing this would be to use localStorage to track the variable. Alternatively, add a hidden property and bind your data to this - return the value from your post and update the visibility based on that.

Posted 3 days ago

Pete O'Hanlon

Comments

Joan M 24hrs ago

Thanks Pete, I've used the Richard approach, which worked very well.

Pete O'Hanlon 23hrs ago

Richard's a clever chap. I'd use his approach too.

Solution 4

'"problem" is that the onclick event is handled by javascript, and every time I press the save button, a form post happens and I must press again the arrow...'To clarify, when the user clicks upon the arrow, it submits data to a form. Do you want to prevent this form from being submitted when a user generates an onclick event?

In what way are you settting up the onclick event listener? Are you using an inline HTML attribute such as "onclick='call_example_function();'"? Are you using the "element.addEventListener" method to handle the onclick event?

If you want the arrow to function without the form post, you'll need to work with the Event object. Anytime a user invokes an event, such as a mouse click, you can control how it is handled by the browser. If you want to prevent the form from being submitted while the click event occurs, then you can use the 'event.preventDefault()' method. Calling this method in your event handler function stops any further action that would otherwise occur when the click event is invoked. In this case, the action that we want to prevent is the form submittal, correct?

I can't explain JavaScript events in just one post, so I would recommend doing some research on how JavaScript works with events by conducting a web search for the details of how things work. Perhaps this link will provide some insight into how to resolve the problem: javascript events - Google Search[^]

Posted 3 days ago

Steve Raw

Comments

Richard Deeming 3 days ago

"when the user clicks upon the arrow, it submits data to a form"
That's not what I got from the question. As I read it, the arrow works as expected, until the user clicks a different "save" button, at which point the page reloads.

Steve Raw 3 days ago

Yeah, I think we need more information to get the question right before attempting to find solutions.

Joan M 3 days ago

Updated the question to make it clearer:

Javascript handles the click of an arrow.
When I submit the form (using another button), the hidden part is visible again as the PHP side is not aware of that javascript change.
I end pressing the arrow button again to hide again the left side of the form.

I'd like to be able to set a variable (or something similar) from javascript that PHP could process at the next form load and switch the visible thing accordingly.

Thank you very much.

Joan M 23hrs ago

Thanks Steve, I'll take a look at how those events work, I have solved this using the Richard approach, which at the end is using events. I was using the direct HTML attribute onclick. Now I don't. Thanks again.

Add a Solution

Add your solution here

Treat my content as plain text, not as HTML

Preview 0

…

Existing Members

Sign in to your account

...or Join us

Download, Vote, Comment, Publish.

Your Email
Password
Forgot your password?

Your Email
This email is in use. Do you need your password?
Optional Password

I have read and agree to the Terms of Service and Privacy Policy
Please subscribe me to the CodeProject newsletters

When answering a question please:

Read the question carefully.
Understand that English isn't everyone's first language so be lenient of bad spelling and grammar.
If a question is poorly phrased then either ask for clarification, ignore it, or edit the question and fix the problem. Insults are not welcome.
Don't tell someone to read the manual. Chances are they have and don't get it. Provide an answer or move on to the next question.

Let's work to help developers, not make them feel stupid.

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Richard Deeming · Accepted Answer · 2024-09-17T00:59:00

Use sessionStorage to store the flag:
Web Storage API - Web APIs | MDN[^]
Window: sessionStorage property - Web APIs | MDN[^]

Eg:

JavaScript

document.addEventListener("DOMContentLoaded", function() {
    let isFullWidth = false;
    
    function toggleDetails(makeFullWidth) { ... }
    
    document.getElementById("ToggleDetailsButton").addEventListener("click", function() {
        isFullWidth = !isFullWidth;
        toggleDetails(isFullWidth);
        sessionStorage.setItem("isFullWidth", isFullWidth ? "true" : "false");
    });
    
    if (sessionStorage.getItem("isFullWidth") === "true") {
        isFullWidth = true;
        toggleDetails(isFullWidth);
    }
});