HTML form > JS > Page/redirect

Hi guys -

I got an HTML form where the Submit button triggers a JS window (agreement type popup). This is as far as I made it on my own.

I need assistance to:

  • Display the file name of the chosen file “upload” right below as the default does. How it is now, that text is nowhere to be shown. My CSS is:
        button.uploadfile {
          border: 1px solid #000;
          padding: 0.em 1em;
          border-radius: 0.8em;
          font-size: 1.1em;
          height: 8em;
          width: 14.8em;
          background: #fff url('https://i.ibb.co/JKb99gK/uploadicon.jpg') center;
          background-repeat: no-repeat;
          color: #000;
          text-transform: capitalize;
  • When clicking on “I agree” inside the popup, user successfully gets redirected to page # (Right now it redirects right after the popup shows… It need to redirect when “I agree” is pressed.

Link to my page

You question is little confusing, you meant how to display filename for the styled ‘file-uploader’ below ‘Phone Number’ field just like the normal file loader?

@Randore yes, you see the bottom (default) one - after you select file, it shows file name right next to it.

The one that I want to use is the one below Phone Number. I need it to display the file name right below so the user knows that it has been selected properly.

  1. I’m not sure I understand the question. But you have hidden the file output for that input .fileupload input[type=file]. I think you likely have to use JS to make that kind of customization (i.e. hide/customize the button but show the file select info). You can look at the docs for the input type=“file”, it has an example of customizing the look using JS (or google, first link).

  2. It is because the default behavior for a button inside a form is to submit. Generally speaking, you need to use preventDefault to make the form not submit. However, the way you have made the form and modal (which is also a form) doesn’t really work without some extra logic.

One option would be to make a checkbox on the main form which lets the user agree to the terms. When the user checks it, it will open the modal and if the user agrees (BTW right now you can’t say no) you keep the checkmark otherwise you remove it.

Then on form submit you can use auto validation by making the checkbox required so the form will not submit without it being checked. Then just remove the modal trigger on the submit button and let it do the submit only. You should probably also make the modal a normal element and get the answer yes/no so you can check against it (for keeping or removing the checkmark).

1 Like

Check this out

1 Like

Guys, I so appreciate your time with my questions!!!

  1. @lasjorg Sorry for the confusion. I got it to work now with the link that @Randore provided. I just added "Chosen file: " in the JS part so the file name does not only just float around.

  2. I need to stick to the sidepanel form and the pop up with agreement (for now to pass this project anyway, but I absolutely agree to use checkboxes!)

Is there any way to replace the submit type with something more appropriate? And then make the I AGREE button the actual submit functionality (to submit the form so to speak.)

You can give the main form an id and then give the “real” submit button the form attribute with the value set to the form id. Then use e.preventDefault() in the open.onclick function to stop the form from submitting on modal open, or you can change the element to something other than a button.

open.onclick = function(e) {
  e.preventDefault()
  modal.style.display = "block";
}

Here is a contrived example. You can test the actual submit is working using formspree.
https://codepen.io/anon/pen/oKXroz

This is what I got for the initial HTML form: (giving the form id = hello)

<form id="hello">
  <input type="text" name="firstname" value="First name" required>
  <input type="text" name="lastname" value="Last name" required>
  <input type="text" name="email" value="Email" required>
  <input type="text" name="phonenumber" value="Phone number" required>
  <label for="file-upload" class="fileupload">
    <i class="fa fa-cloud-upload"></i> 
  </label>
  <input id="file-upload" name='upload_cont_img' type="file" style="display:none;">
  <label id="file-name"></label>
   
    
  <button id="openPopup">Submit</button>
</form>

And this is the HTML for the popup: (not sure why it has an id)

<div id="permissionPopup" class="windowPopup">
  <div class="permissiontext">
    <form id="submitform" action="">
    <span class="close">&times;</span>
    <p>Lorem ipsum, or lipsum as it is sometimes known, is dummy text used in laying out print, graphic or web designs. The passage is attributed to an unknown typesetter in the 15th century who is thought to have scrambled parts of Cicero's De Finibus Bonorum et Malorum for use in a type specimen book.</p>
    <p>It usually begins with: “Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.” The purpose of lorem ipsum is to create a natural looking block of text (sentence, paragraph, page, etc.) that doesn't distract from the layout.</p>
    
    <button class="agree" value="hello">I agree</button>
  </div>
</div>

And JS is:

document.querySelector("#file-upload").onchange = function(){
  document.querySelector("#file-name").textContent = "Chosen file: " + this.files[0].name;
}


open.onclick = function(e) {
  e.preventDefault()
  modal.style.display = "block";
}

var modal = document.getElementById("permissionPopup");
var open = document.getElementById("openPopup");

var span = document.getElementsByClassName("close")[0];
var agree = document.getElementsByClassName("agree")[0];

open.onclick = function() {
  modal.style.display = "block";
}

// Close popup with <span> (x) and/or button (I agree)
span.onclick = function() {
  modal.style.display = "none";
}
agree.onclick = function() {
  modal.style.display = "none";
}

// Clicks anywhere outside of the window = close the window
window.onclick = function(event) {
  if (event.target == modal) {
    modal.style.display = "none";
  }
}

function myFunction() {
  document.getElementById("submitform").submit();
}

Now this seems messy to me. As I try now to submit to get the popup it reloads the page and gives out a weird url for extension.

Hi @rachb,

I hope you’ve come right by now. If not, I recently came across the difference between client side routes and server routes. if possible, route the submit button from the main form, to the form that confirms with “i agree”, and instead have THAT form perform the POST to the server. hope this makes sense.

There are a bunch of ways actually. You could also shift focus to the “i agree” checkbox element, if the user hasn’t checked it. maybe trigger an animation in the process. If you condense the forms into 1 form…
Also, you could write a javascript function for the modal window and instead of posting, have the buttom call the js function :slight_smile:

Hope this helps!

Best,
B