I have a section on my site with a list of pdf files (it looks like this image 1). I need a popup to appear by clicking on the "download" button and there were inputs for the email and name. And only after the user entered this data, the download began.
I have a static site, so there is no need to do php sending yet. I'm just trying to make the download only after entering the email and name.
My popup is made with bootstrap. Here is the code for the individual item.
<article class="pdf-block__item pdf-block-item col-md-4">
<div class="pdf-block-item__img">
<img class="pdf-block-item__img-image" src="images/banner.jpg" alt="pdf-img">
</div>
<div class="pdf-block-item__title">
PDF item test 1
</div>
<div class="pdf-block-item__text">
In this eBook you will learn 21 key KPIs that will form the building blocks in
your marketing reporting and how to develop the ultimate dashboard for your SaaS business.
</div>
<div class="pdf-block-item__button">
<button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">
download
</button>
</div>
</article>
You can use JavaScript validation for this.
First, you have to write a JavaScript function as given here and map it to the download button. After checking your Name and Email fields, you can redirect to the PDF document to download.
JavaScript validation: https://www.w3schools.com/howto/howto_js_validation_empty_input.asp
Redirecting: https://www.w3schools.com/howto/howto_js_redirect_webpage.asp
Note: If you use just a script without any server-side validation like using PHP, techie users can find the URL from the script and take the PDF directly.
You Have to Add a form in Your Popup modal with Required Fields and Then add the download button as submit button. And Add Your File URL in the form action.
Eg:
<form action="Your_Download_URL">
<input type="text" placeholder="Name" required> <!-- Name input with required tag -->
<input type="email" placeholder="Email" required><!-- Email input with required tag -->
<button type="submit">Download</button>
</form>
This Will also Do Not Send any Form Data to Your Download URL.
Related
How do I make this in such a way that when I press enter the mail and press the button, a letter is sent to the specified e-mail?
<div class="home-get">
<input type="text" placeholder="Enter your work email…" class="text-input">
<div class="button-home">
<a class="button" href="#">Get a demo</a>
</div>
</div>
Unfortunately this is impossible to do with just html, since you will need to use a web server to actually send the email. In nodejs, I am rather certain you can use node-mailer.
Problem:
I am trying to build a webapp with a password change feature that doesn't use a form submit.
The flow is a bit like this:
Bootstrap modal popup
user enteres text
On Modal 'Ok' a fetch is triggered that updates the database.
On API confirm [somehow trigger the 'update your password' dialouge in firefox/chrome/etc.]
Due to previous confusion: The 'update your password' dialouge refers to the browser password manager popup that gets
shown when a login form is send.
picture of the popup i am talking about
(source: https://linuxhint.com/force_firefox_never_save_passwords/)
Tech stack:
In case it is relevant here is my tech-stack:
Vue.js ( No plugins or modules except VueX )
Bootstrap (with all the included js)
Code
<h1>Submit form: (Works)</h1>
<form action="/login" method="post">
<input type="text" name="username" id="">
<input type="password" name="password" id="">
<button type="submit">Submit</button>
</form>
<h1>My version (simplified):</h1>
<p>Enter your new password</p>
<input type="text" v-model="password">
<!-- modal -->
<div class="modal">
<p>Please enter your old password</p>
<input type="text" v-model="old">
<button #click="updatePassword">Update</button>
</div>
//vue stuff
function updatePassword(){
// a fetch wrapper
callAPI( '/api/update_password', { old:this.old, password:this.password } )
}
What i tried:
I am aware of the fact that i could use a hidden form pointed to a 'dead' endpoint that is submitted by Javascript.
Why i don't like that solution:
It feels like a hack
I don't want to create unecessary requests
creating and destroying DOM-Elements for Javascript-only use is not 'the clean way' (as far as i know)
This has to be a common thing, am i missing an API?
Thanks in advance!
- Stevetec
The browser does not want to allow you to force that. For one, users can disable the feature locally. On top of that, it could allow for some very nasty attacks if the website could force security-related popups.
I have a question about having two submit buttons on a single form (the two buttons are below). I currently have two buttons, one to submit the login data and attempt to validate the login by running a database query, and the other to bring the user to a page to generate a random string and set it as their new password.
I want to be able to make it so that when I hit enter, the second button (the login process button) is triggered, where it is currently the initial button that is done. I have tried turning the first button from an input to a normal button tag, but the issue still persists. Brief snippet of the buttons below, if the full form would be helpful I can edit it in.
I tried some solutions I found online such as this, but I couldn't get it working - maybe I'm just a bit stupid!
Any and all help is fully appreciated. Thanks in advance.
<div class="column">
<div class="field">
<p class="control">
<!-- if clicked, brings user to reset password-->
<input type='submit' class="button is-danger" id='loginRequest' value="Forgot Password" formaction="resetpassword.php">
</p>
</div>
</div>
<div class="column">
<div class="field">
<p class="control">
<!-- if clicked, posts info and attempts to validate login through database-->
<input type='submit' class="button is-primary" id='loginRequest' value="Login" name="requestlogin">
</p>
</div>
</div>
Disclaimer: I’m a backend programmer and I would like to minimize javascript code in my webpages.
I’m considering using the login form given here as example. In this example we have this
<form class="ui large form">
<div class="ui stacked segment">
<div class="field">
<div class="ui left icon input">
<i class="user icon"></i>
<input type="text" name="email" placeholder="E-mail address">
</div>
</div>
<div class="field">
<div class="ui left icon input">
<i class="lock icon"></i>
<input type="password" name="password" placeholder="Password">
</div>
</div>
<div class="ui fluid large teal submit button">Login</div>
</div>
<div class="ui error message"></div>
</form>
The login button is just a div which does nothing. There is no action argument in the form tag and there is no submit type input tag.
How do I get the page to send the input field values back to the backend server ?
Note that there is some javascript code visible in the source page that checks the validity of the fields. But there is no hint on how to get send the email and password to the backend and load the logged in page.
The login button is just a div which does nothing
Make it a <button>.
There is no action argument in the form tag
Add one if you want the data to be submitted to a different URL then that of the current page.
Your form should also be method="POST". Passwords do not belong in URLs (which are often logged in plain text).
How do I get the page to send the input field values back to the backend server ?
Use a <button> element to represent your submit button and not a <div> element. The <div> element is when you need a block element and HTML lacks an element with the semantics to describe your content. That isn't the case here, you want to submit a form and that is what submit buttons are for.
I want to submit a form with a file programmatically but i learned there is no way to pass file to input type="file" because of security. So i am searching a way to submit form with file from url. Html is below.
<form class="converter-form" id="iri-converter-form">
<label for="iri-converter-input">Custom Ontology:</label>
<input type="text" id="iri-converter-input" placeholder="Enter ontology IRI">
<button type="submit" id="iri-converter-button" disabled>Visualize</button>
</form>
<div class="converter-form">
<input class="hidden" type="file" id="file-converter-input" autocomplete="off">
<label class="truncate" id="file-converter-label" for="file-converter-input">Select ontology file</label>
<button type="submit" id="file-converter-button" disabled>
Upload
</button>
</div>
You'll just want to pass the URL to the server. When the server receives the url, it will download the file to disk.
On the HTML/ javascript side of things, you'll probably want to show the Upload File input but give a button to upload from url. When they click that button, hide the upload file button and show a plain textbox for them to drop their url.
You may also want to check that the url is valid: Check if a Javascript string is a url
Also, make sure that the file type is one that you accept, there is always the possibility of malicious code being uploaded and run on the server