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.
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.
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).
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).
Guys, I so appreciate your time with my questions!!!
@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.
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.
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">×</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.
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
