JSON to HTML CSS output

Question

I have a registration form, on data.error PHP outputs as JSON the errors
exit('{"error": "Passwords do not match!"}');

After a successful register, the user will be redirected to exit('{"location": "home.php"}');

I want the json output, instead of plain text to be put into html+css for styling,
so i can style div for the errors

            document
                    .querySelector(".register form")
                    .addEventListener("submit", async (e) => {
                        e.preventDefault();
                        const form = e.target;
                        const body = new FormData(form);
                        const res = await fetch(form.action, {
                            method: "POST",
                            body,
                        });
                        const data = await res.json();
                        if (data.error) { // If there is an error
                            document.querySelector("#msg").innerHTML = data.error; 

                        }
                        else if (data.location) { // If we want to redirect the user somewhere
                            window.location.href = "./" + data.location;
                        }
                    });

If i add a class, <div id="msg" class="error"></div> doesn't output anything,
while only inline style style="background-color:red;"> will work

.error {
    background: #F2DEDE;
    color: #A94442;
    border-radius: 4px;
    font-weight: bold;
    text-align: center;

}

I been researching this for 12 hours, i've seen few examples about JSON.stringify and others,
but i don't know how could i implement this into my code

Simply wrap what you're returning in html tags. exit('{"error": "<div class="error">Passwords do not match!</div>"}'); or style the element with id msg. I really don't see where is the problem — esQmo_
– esQmo_, Commented Nov 6, 2021 at 16:00
edit: i did <div class="msg" style="background-color:red;"></div> and worked. — user17340218
– user17340218, Commented Nov 6, 2021 at 16:06
Well, probably I don't get what you want to achieve. What do you mean by it will still do plaintext? — esQmo_
– esQmo_, Commented Nov 6, 2021 at 16:08
for some reason only inline css will work within the div tag, (for the json) if i try to take from style.css it won't output (while the file is correct) — user17340218
– user17340218, Commented Nov 6, 2021 at 16:11

esQmo_ · Accepted Answer · 2021-11-06 16:34:29Z

1

Well I still don't know if I understand your case correctly. You can add a class to element msg for when an error is returned.

if (data.error) { // If there is an error
document.querySelector("#msg").classList.add("error"); //This will be styled from your CSS. Add a background, etc
document.querySelector("#msg").innerHTML = data.error;
}

CSS:

.error {
  color: white;
  font-size: 14px;
  margin-top: 10px;
  background-color: red;
  }

edited Nov 6, 2021 at 16:34

answered Nov 6, 2021 at 16:20

esQmo_

1,7094 gold badges20 silver badges45 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

user17340218 Over a year ago

For some reason it won't output the text with the added line

esQmo_ Over a year ago

HUM! I don't know what style you're applying. Kindly update your question with relevant infos.

user16435030 · Accepted Answer · 2021-11-06 16:14:01Z

function login($username, $password) {
  // do a login

  // if any errors
  header('Content-Type: application/json');
  echo json_encode($response);
  exit;

  // or if you're using any framework/controller then return properly
  // using a json response containing the error i.e. "Invalid Login"
}

You want to do something like that server side. Then on the client side you want to get the response, check if there are errors and display the errors if they exist. Use a visible class or something for that so that you can change the visibility and display errors. So you create the div and css the way you want to and just use display: none on it, then if you do get errors you make it visible.

Don't use PHP to generate HTML/CSS, especially not in this way, unless you're using a proper view engine, otherwise you'll end up creating a mess. Send back a proper JSON response and do your UI stuff client side based on that response.

Collectives™ on Stack Overflow

JSON to HTML CSS output

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related