I have a form where I can edit event information for a calendar. These specific events run every single week, but one of the form fields is for "days off" where you can enter days where the event doesn't run. using mysql and php, any current days off will be displayed in a textarea field, separated by spaces. You will also be able to put in more days off by typing in a date and making spaces. I would like to be able to style each date just like right here on stack overflow when you ask a new question and put in the tags. After you type in a tag, it gets surrounded by a box, turns blue, and gets an x for deleting it. This is what I want.
Here's a link to a screenshot of what I want it to look like.
http://www.uvm.edu/~sass/screenshot.jpg
I'm not sure how it works with dates and formatting them, but as for displaying in such style I've been using Select2 component. If you can add parsing or create valid list of dates it should give you the correct result.
Okay, I have found a solution by digging around the internet.
Stack Overflow style tagging system in jquery (view the second answer)
Someone created exactly what I want. The results are stored in a hidden field as a comma separated list so I can easily explode it into an array for use with my database, and it formats the inputs nicely with css. I modified the look with css and changed the accepted formats to work with dates and here is the result.
http://www.uvm.edu/~sass/screenshot.png
Related
The date picker doesn't show up even though i use
<input type="date" name="dob" required>
Additional information that might help you help me :
It is in a JSP file
I'm using tomcat v7.0
I need to validate the date without using JavaScript?
I tried using text for input and setting a specified format but then how can I add range there? (min max and dynamic for February issues?)
Can this issue be addressed by using combobox? How can I change value options of one combo box depending on the other? (Date options dependent on month and/or year)
Any help is highly appreciated.
P.S. Since it is a part of a registration form, I have been advised against using JavaScript validation (as it can be disabled)
Edit : I guess I'll go with a regular expression. I found one here, the second answer to this question : Regular Expression to match valid dates
The date picker doesn't show up
It does when I test it. Perhaps you are using a browser which does not support it.
I tried using text for input and setting a specified format but then how can I add range there?
If by "format" you mean a pattern, then you would need a complex regular expression that had multiple parts.
e.g. 0 followed by 1-9, or 1 followed by 0-9, or 2 followed by 0-8 followed by / followed by 02 followed by (leap year logic).
It wouldn't be short or pretty.
Regular expressions do not lend themselves to describing the format of dates.
That said, see this question.
Can this issue be addressed by using combobox?
You can't have a combobox in HTML without using JavaScript, which you ruled out.
If you mean "a collection of select elements" then that would be "dropdown menus" not "a combobox".
You could use those, but there's no good way to stop people entering dates like the 31st of February.
How can I change value options of one combo box depending on the other?
Only with JavaScript, which you ruled out.
Since it is a part of a registration form, I have been advised against using JavaScript validation (as it can be disabled)
You shouldn't depend on JavaScript for input validation because it can be bypassed… but that is true of any client-side input validation you might implement.
Client-side input checking is useful because it can give users rapid feedback if they make a mistake and enter data which doesn't make sense.
You need to accompany it with server-side input checking in order to prevent bad data being inserted into your system deliberately.
hi I actually trying to do calculate the two numbers,, it was working, but now I don't know how to turn the number into currency. so before the number it need to show £ sign.
I was researched in Google ,and i tried some things but its not actually working.
var name,child,result;
function setvalues()
{
name=Number(document.getElementById("name").value);
child=Number(document.getElementById("child").value);
}
on that name field user has to enter some number to calculate,, its was calculating but just a number not with an currency sign... I seen some of the JavaScript function to change the currency format but its not very clear... and how to add three vaules together and show in one textbox with £ sign
I am unsure of what you are trying to accomplish but I will try to answer as best I can. I would recommend that if you are working with currency(which can be a especially be a pain in JavaScript). I would recommend using a library to handle this for you. I have used accounting.js in the past and it works very well for these sorts of things:
http://josscrowcroft.github.io/accounting.js/
If you update your question with more information I will update my answer.
UPDATE
Try this: http://codepen.io/anon/pen/BjIHn/. It should produces the output you are wanting.
In my page i have a text input field and I want that when user writes code of a smileys (like :D) inside that field, input field changes that code to picture.
How can i do it?
I have came across this query earlier too. There is a chain going about the same query.
It doesnot look as easy as you are trying to potray. Writing and converting does not make sense at all.
APPROACH: You have to read each and every text entered by user if it matches the pattern of the smile and if the smiley matches then fetch the respective .gif from the images folder.
Please refer following link for a quick start.
Replace a list of emoticons with their images
This answer may be quite late, but this question still ranks high on Google...
The easiest way to add this feature ist to Use the SCEditor plugin (MIT licence). This is a JavaScript-and-CSS solution that pimps any textarea into a WYSIWYG editor. If the toolbar is disabled (see http://www.sceditor.com/documentation/options/), you result in a text input that automatically replaces emoticons with corresponding images.
Hint: It may be necessary to tell the script where to find the emoticons, using the emoticonsRoot option (took me 10 minutes to find that out - 10 of 30 minutes required from finding the SCEditor to making it work...).
I'm building a nested form in rails 3.1 and instead of pressing the "add" button i want to automaticly add an input field when typing text in an empty input field (just like making a question in facebook and adding poll options). But i also want to only add a field if there are characters typed in the field if the characters are removed the extra field should also be removed.
I am working with rails 3.1 and so jQuery and jquery-rails are included in my gem, i don't know coffee script yet.
it's really easy.
Just tap into the focus() event handler and add textboxes as you go along.
I have created a simple demo for you here: http://jsfiddle.net/mcVnN/
Warning: clicking any textbox will add a new textbox here. If you want to add new textbox ONLY on last textbox focus, just compare the id.
If you have any doubts let me know.
Cheers
--
Sorry, did not read your full question, my mistake.
I have put together some quick code http://jsfiddle.net/mcVnN/12/ again on jsfiddle, but you might want to change it to suit your needs.
I was going through my answers a now and realized I had left you in the middle of nowhere.
Took some time to completely re-write my answer - the above answer is a lot buggier, you are better off using the :last selector than manually trying to keep track of the last text box yourself.
See my rewrite here: http://jsfiddle.net/mcVnN/29/
I have also added a max text box count that you can change easily to configure how many textbox you want users to be able to add.
Please replace the above code with this one, if you are using the above one at all.
Thanks.
What I am trying to do is very similar to this question:
Using jQuery to dynamically add form fields (or fieldsets) based on a dropdown box value
Specifically, I want to use a drop down box value to add that number of input boxes to a fieldset.
I do not know jQuery so the answer I am linking to hasn't answered my question, I would like to know how to do this in JavaScript?
There are lots of instructions on how to use JQuery. I suggest that you go to http://docs.jquery.com to learn it rather than looking here for a specific answer to your question. Spending the time to figure it out for yourself will be far more useful than a copy-paste answer.
You'll follow some basic steps. Tackle each one individually.
Read the value from the drop-down when it changes.
Find the element to contain the new input boxes.
Loop through the number of values
Insert the appropriate HTML for each loop iteration.