是否可以显示带有网址的div？

Question

I created the sign up form as a hidden div above the whole website with some js. Now, I want to create the php part, in a different file. I have 3 files. The html, where is the div, form. The js file, where is the switch between the hidden and show state, and it's called by a button. And the 3. one is the php, where are the if-s(empty fields, wrong datas, etc.), the mysql stuff. If the user make a mistake, I want to send back to the main html file, where is the form, with the given datas in the url, so I can say what was the problem. But if I do this, the registration form will be closed, because it's again a display:none. How can I set the div's display again from the php, after I send back the user? Sorry if it's complicated...

I tried to call the js function in the php, after I send back with the header function, but it didn't work.

HTML div:

<div id="reg-Page">
 <!-- Form, and others -->
</div>

---

Call div:

<button type="button" name="button" onclick="return regForm()">Signup</button>

---

js function:

 function regForm() {
  var logWindow = document.getElementById('reg-Page');
  if (logWindow.style.display != 'block') {
    logWindow.style.display = 'block';
  } else {
    logWindow.style.display = 'none';
  }
}

---

PHP file:

 if (empty($username) || empty($password) || empty($password2) || empty($email)) {
    ?>
      <script src="js/scripts.js" type="text/javascript">
        return regForm()
      </script>
    <?php
    header("Location: ../index.php?error=emptyfields&uid=".$username."&mail=".$email);
    exit();
  }

I tried to set the div display to block again, after the send back.

Answer 1

I tried to call the js function in the php, after I send back with the header function, but it didn't work.

This is most like a race condition. Your server is sending an html file with a script tag in it, and a div tag in it, but which loads first, and what parts of the DOM are accessible when the script runs, isn't clear with this method. At minimum you should do:

    ?>
      <script src="js/scripts.js" type="text/javascript">
        $(regForm);
      </script>
    <?php

That's assuming you have jQuery, using the $(document).ready() shorthand . The idea here is the function doesn't run until the DOM is complete (ie the browser has parsed to the end of the document), and then your script has a shot at finding the div it wants to unhide.

However, FYI, this is an antiquated way of doing things. You should learn more about client/server programming (some commenters have provided links about this). I would build the system more like a single-page app where the server had an API, and the client could send xhr requests based on the form, and take action based on the server's response. This is completely possible with the php/mysql stack you're describing.

Answer 2

Is it possible to show a div with an url?

I've added your title above here because I could help you with this, but did not really understand what the rest of your question was. Could you help us further by making your question more precise?

Use the :target pseudo element selector in CSS. This way you can listen for a hash or # in the URL and select an element with the id that matches the hash.

And if possible use classes to hide or show elements to separate your HTML from your CSS.

So add CSS that specifies the states of the elements(default, target and hidden). In your JS switch over to changing the classes instead of the inline style properties. If you do that, you're missing out on some of the best CSS features.

And in your PHP simply add a # with the id of the element you want to show to your redirect URL. In your case #reg-Page .

HTML

<div id="reg-Page">
 <!-- Form, and others -->
</div>

CSS

#reg-Page {
  display: none;
}

#reg-Page:target {
  display: block;
  /* Set your properties here */
}

.hidden {
  display: none;
}

JS

function regForm() {
  var logWindow = document.getElementById('reg-Page');
  if (!logWindow.classList.contains('hidden')) {
    logWindow.classList.add('hidden') 
   } else {
    logWindow.classList.remove('hidden')
  }
}

PHP

<?php
// Add the ID of the div with add # before it at the end of the page.
header("Location: ../index.php/?error=emptyfields&uid=".$username."&mail=".$email.'#reg-Page');
?>

Let me know if I understood your question correctly and if this helps.

Answer 3

In index.php you can check if an error message is set into the URL and use that information to output a bit of JS to trigger the function to enable to form when the page is ready:

<?php if (isset($_GET['error'])): ?>
    <script type="text/javascript">
        window.addEventListener("load", regForm);
    </script>
<?php endif; ?>