Dynamically add extra input fields to html form - javascript

I am currently working on an html and php project. What I want to be able to do is to have an html with a file chooser for selecting a screenshot. Next to the file chooser will be a button/link for the user to be able to add another field. When the user clicks on the button or link I want another field to be added to the form underneath the first field, then the user can press the button/link again and another field is added all. Then when the form is submitted it gets the value of all the input fields including all the files to be uploaded that were added to the form.
What is the best method to achieve this, I assume javascript and/or jquery might be involved.
Thanks for any help you can provide.
UPDATE
I have found out how to do it but I was wondering instead how to make it fade in or make it smoothly slide the rest of the form down. I have added the fields inside a div and done javascript that makes the input field appear inside this div but it just appears, I want it to have a smooth fade in animation instead of it just flashing up on the screen. Below is the javascript that I have used to add the input field
<script>
function addFields()
{
document.getElementById("screenshotFields").innerHTML += "<input class=\"fields\" type=\"file\" name=\"filScreenshot[]\" />";
}
</script>

You want something that this tutorial calls 'Multiple File Upload Magic'.

The answer was from #ott comment to my question to another stackoverflow question

Related

Adding text into a PDF button with 1 click using Javascript

I'm creating a staff document which requires only 2 things to be unlocked.
1. A placeholder for an image, I've implemented that just fine by creating a button with "Icon only" and using a javascript code as follows:
// Mouse Up script to import a button icon
event.target.buttonImportIcon();
It works perfectly!
However I also need a text field which can be clicked once, and have text filled in and saved, because quite frankly the people that will be using the document, couldn't edit a PDF if the human race depended on it haha
Any help would be appreciated greatly!!! Thanks!
Create a text field (which I'm assuming you will want to start off as empty) and then add the following command to activate on Mouse Down:
(this.getField("TextFieldName")).value = "The text that you want to add...";
Where TextFieldName is the reference to the text field that you want to auto fill.
This will make the text appear when the text field is clicked. You could add a clear button using similar code so that erroneous clicks can be undone. Also, you could set the field to be read only to prevent unwanted changes to the auto filled text.

How can I create a Form in Web Page with giving User Option to add multiple fields and then Download PDF?

I looked through various answers for this but still cannot find a proper working solution. Here's what I am trying to accomplish:
User can add input fields, such as Page Title, Text inside Page. While everything is optional, More fields can be added, or removed. All depending option User.
Add Images, using Input Field. Again, User can click Add More Images and hence, using Onclick button, A new input field appears which can take input of Image.
After done adding the required content, User Can Download PDF.
Any Suggestions are welcome. I have spent way too much time with several PHP and JS Libraries but everything is Static, Can't generate Input Fields according to Users.

How to hide filepath input file?

I need help with javascript and some html i guess.
I have a input file button where I can choose an image and upload it, but I want to remove the "filepath" name, or at least hide it. Is that possible to do, if so how do I do that?
I am able to hide the "no file chosen" by using
but I am not able to do the same for hiding the filepath.
I've tried to use that, and to use onclick and so one but nothing seems to work.
Use display none for the input type file, and include a button with id='x' in your page.
Add a eventlistener for click on button x and when it does trigger a onchange event for input type file. It works.
Just hiding the whole thing and putting a separate button object which, when clicked, will end up clicking the input's browse button.
You can do this with the help of CSS & javascript
click here

how to add default text to an input field in a form in WP

I am using a plugin in WP that generates a form based on input in the admin area. I have five fields that are set to url validation and such types appear in a form with a second field for optional link text, meaning if the user enters "http://stackoverflow.com" in the first field they have the option to type "Stackoverflow" in the second, and that is what will appear as the link text in the resulting listing in the web site directory. If the user leaves this field empty, the plugin will insert the url from the first field to fill it.
I have set these links to be styled as buttons, thus I need to control what appears on them so they are the right size. I want to add specific default text to each of these five fields, but I can't edit the form because it is generated dynamically.
One of these input fields for optional text is coded thus:
<input type="text" id="wpbdp-field-12-title" name="listingfields[12][1]" class="intextbox" value="" placeholder="">
Is there a way to use css or javascript or magic to insert text in the fields so it is submitted with the form? I want one, for example, to have the default text "Official Website" and other to read "Facebook" and so forth.
BTW, this field will be hidden by css so the form filler doesn't alter it. I just need these fields pre-filled to save labor by the admin.
Thank you, all.
Are you sure there is no way to edit the input in the plugin you're using? If you wanted you can change it after the page load with the jQuery included in WP.
CODE
$(function() {
$('input#wpbdp-field-12-title').attr('value','your additional value text');
});
this is really not a full proof way of doing it as the plugin you use will change the ID of the field if you edit it in the future. Maybe look into using a different one or making your own php form.
EDIT
You could also have inputs with values predefined that are hidden and submitted along with it. I'm not sure if thats a possiblity for you.

Alternatives to dynamically created input text fields

I was previously using dynamically created input text fields on my form to allow a user to enter names of friends. However, on my redesign this form will be on top of an image inside a div and it'd look a bit rubbish if it extended out of that.
Are there any alternatives that allow the user to enter multiple names which look good within the confines of a background image?
You can have a button for add friends and on clicking show a small lightbox that displays a single textfield and button. On adding each friend show the selected friend in the lightbox itself. Just like facebook does when you add friends for sending msgs ;)

Categories