Alternatives to dynamically created input text fields - javascript

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 ;)

Related

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.

Trying to create a hyperlinked "hashtag" when inputting text in a text box

I'm creating a website where users will be posting text. One of the text boxes on the "posting" page is for tags/hashtags. A user will type in this text box "#food" or "food", but as soon as they hit the space bar, I would like each of those words typed to be hyperlinked.... which after posted, will be displayed on the post as a hyperlinked tag for other users to click on.
ie. JUST like the "Tags" box here on stackoverflow as I'm posting this question.
Does anyone know how to make a text box capable for this?
Don't use inline objects for that. Instead use an editable div;
<div id="myInputBox" contenteditable="true"></div>
You can also make your input-box of a block-type, but I'm not sure if all browsers will abide by those rules of inserting complex markup inside the tag then.

Information Dialog Box when selecting input fields

I have searched, but cannot find the answer to this question. I think I just do not know the proper name for what I am trying to achieve.
Basically, I want to setup some input fields as if we are creating an account at a website. However, I would like a dialog box to pop up to the right of the input field when the user clicks inside of the input field. This dialog box pop up would provide further information of what exactly needs to go inside the input field to guide the user. I would like the dialog box to not be interactive so it does not get in the way.
I am sure there is some tutorial out there for this. However, I am guessing I just do not know the correct name for this function.
I think you mean a tooltip dialog type of functionality provided by Dojo. This link should provide you with some explanation and examples. The examples show on a button but can be easily done on input field also.
I am pretty sure this would be present in other technologies also like jQuery.

How to use javascript to edit HTML content?

I have a section in my website where a user can type an answer to a Question. For example the questions states:
Movie I have watched the most times:
Answer: Wedding Crashers
I have an edit button next to the question. When the user clicks on the edit button I want the website to open up a text-box with Wedding Crashers in it in the same place as the original answer box. The user can edit the answer and change it to another movie. There should be a save and cancel button below the text-box. Once the user changes the answer from Wedding Crashers to another movie and clicks save, the text-box disappears and the new answer is displayed on the website. For now I only want to be able to edit the hard-coated HTML content. I will connect to a database later and put a query to update the users database as per his/her answer. I think it is something to do with javascript and the CSS properties of display:block and display:hide. Can anybody help?
Seeing you other question relate to Rails, you can use an edit-in-place solution such as
https://github.com/bernat/best_in_place
is that what you need?
Whoa! Clicking edit button sounds like 1999 for me ...
Did You consider using plain text input (with proper styling, no border etc.) that will appear as editable on hover/focus? You still need a bit of javascript to send a request on enter (AJAX for better UX or normal POST when js is disabled) and remove focus from the field. I do it this way at my work. It works really well.
you can use something like this:
document.getElementById('someid').innerHTML = 'Fred Flinstone';
and for changing CSS properties:
document.getElementById('someid').style.borderWidth = '4px';
Is the textbox absolutely necessary?
You can use the wonder of HTML5 (http://html5demos.com/contenteditable) for browsers that support it.

Dynamically add extra input fields to html form

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

Categories