I have a textbox and a set of buttons below the text box. What is suppose to happen is that a user fills in a number in the text box and that number determines how many buttons can be clicked. E.g if the text box has a value of 2, then the user can only select two button, a button is selected if the button turns red, it is not selected if it turns or stays white.
The problem is what is happening is that if the value is 1 or above, the user can select all the buttons, in other words if they just keep clicking on buttons then all the buttons would turn red, when what should happen is if the user goes over the value, then an error message appears stating you have went over the limit, please deselect a button if you want to choose another button.
How can I get it so that the number of buttons selected matches the value from the textbox?
code is in jsfiddle, click here (for some strange reason it is not letting me click on any button and text box is allowing entry of letters in jsfiddle, even though in my app with the exact code it works fine. Please look at function btnclick (btn) to help you.)
You're resetting the total on each click, so you're not really counting. Move the currenttotal = 0; outside the click function (and declare it with var).
Secondly, you have really much of the same code. You could also iterate to make the .className assignments on the buttons a bit more concise:
for(var i = 65; i <= 90; i++) { // iterate over character codes for A to Z
var letter = String.fromCharCode(i);
document.getElementById("answer" + letter).className = "answerBtnsOff";
}
You could also put the class names in HTML with the class="answerBtnsOff" attribute. You could even create the buttons through JavaScript. That would make for some cleaner and more readable code, but of course these optimizations are not necessary.
http://jsfiddle.net/7WwaK/3/
(For the jsFiddle to work, you have to select no wrap (body) in the left panel, but that's just how jsFiddle inserts the JavaScript.)
If I'm getting you right, you should do (IMHO) the following this:
Move var currenttotal = 0; outside your function. You are resetting it on each click on a button.
Edit the currenttotal after the user changes the number of answers. Add therefore the line currenttotal = document.getElementById('numberAnswerTxt').value(); to the function called getButtons().
You could implement the loop that pimvdb suggested to reduce your code (=
Please tell me if this is working.
Related
Working on clone in jQuery. With my current code original div getting cloned validation working fine for the original one and cloned one. These things are working with my code.
Initially if the user click next button it will show the message as You have missed 7 fields. Please fill before submitted. Once the user starts fill the fields it will automatically starts get reduced.
If the user clicked the add more button it will get cloned the div.
Once the user starts fills any of the field in the cloned one and he missed the rest of the mandatory fields if user click the next button it will show these many number of fields are missed.
Below things are not working:
With my current code if I have select drop down / radio button in the cloned div validation was not working
The validation count was wrong after the cloned
function bind_change_events(){
$('.cloned_field').on('input',function(e){
if($(this).val().trim().length > 0)
{
//$(this).removeClass("cloned_field");
$(this).addClass("required_field");
var parent_div = $(this).closest("div.cloned-row1,div.cloned-row2,div.cloned-row3,div.cloned-row4,div.cloned-row5").find("input","select");
parent_div.each(function () {
$(this).addClass("required_field");
});
}
check_for_validation_removal($(this));
bind_validation();
});
}
Here is the updated fiddle.
When you are cloning the elements, you do not clone the class .required_field. Which in your code only to that class, adds required: true part.
I Now figured out the problem definitely is in your cloning part.
if($(this).hasClass("required_field"))
{
$(this).removeClass("required_field");
$(this).addClass("cloned_field");
//$(this).addClass("errRed");
}else{
$(this).removeClass("errRed");
$(this).removeClass("text-error-red");
}
You had if it has the class required_field, remove it.
So i just deleted this line $(this).removeClass("required_field"); and when adding more education forms, it increased the unfilled count.
I just tested the same idea for the second cloning part. And that did the job. So this is the solution to the count.
Now your talking about the cloned div or radio button not working in your code, in the liveweave code, the drop downs works for me, tho I can't find any radio buttons.
Please try the answer I specified, and if any problems keep to exist, please update your question or leave a comment here.
What I'm aiming for
When the user focuses the input: if it's empty, we insert the prefix text and move the cursor to the end. It should also work if they tab into the input.
Context/demo
I'm making a jQuery plugin that adds a flag dropdown next to an telephone number input. When the user focuses the input, it gets populated with a little prefix (the selected country's dial code). Demo here.
Problems
By default, the cursor will appear where ever they clicked i.e. potentially in the middle of the prefix). I found this mini plugin to move the cursor to the end, which works well if you put it in a click event handler, BUT then this wont fire if you tab into the input. I tried putting it in a focus event handler instead, but that didn't work (I think because the click event is fired after the focus event).
Bonus points
For a simple, elegant solution, using no global variables, and the least number of event listeners possible. Also if possible, don't show the cursor where they are clicking before moving it to the end.
This is the best solution I have come up with so far. It ticks all the boxes, except it's not the most elegant solution - I feel like I might be missing something obvious. Ideally, it would only require one event listener.
var input = $("input"),
prefix = "prefix ";
input.focus(function(e) {
if (!input.val()) {
input.val(prefix);
}
});
input.mousedown(function(e) {
// mousedown decides where the cursor goes, so if we're focusing
// we must prevent this from happening
if (!input.is(":focus") && !input.val()) {
e.preventDefault();
// but this also cancels the focus, so we must trigger that manually
input.focus();
putCursorAtEnd(input);
}
});
Here's a codepen demo.
Focus, clear value, then revert to original value
1st save the value to a temporary variable.
2ndly clear the input field
3rdly focus that empty field & again paste the saved value from temporary variable.
it will always focus to the end of the field.
$tempVal = $("#digibox_otp").val();
$("#digibox_otp").val('');
$("#digibox_otp").focus().val($tempVal);
Im doing an assignment where I have to create a form where the user can enter multiple values... values in a text box as well as choosing 1 option from a radio button. I need to create an alert that shows the user their choices.. I have found a way to create an alert but it only allows me to 1 value... see below
var username=document.getElementById("yourname").value;
var toAlert="Thank you "+username;
toAlert=toAlert+", have a good day";
alert(toAlert);
but like I said, it need the alert to indicate multiple values. Simply adding additional "+blahblah" does not work... I hope this question makes sense...
I also need to know how I can get the user's radio button selection in the pop up as well...
create field called e.g. secondfield
var username=document.getElementById("yourname").value;
var secondfield=document.getElementById("secondfield").value;
var toAlert="Thank you "+username+", have a good day. Second field: "+secondfield;
alert(toAlert);
I am trying to get the anchorOffset of text selected by the user in A UIWebView. I have a short Javascript function (below) that is called when the user selects text and chooses an option from a custom contextual menu.
function textPosition()
{
var text = window.getSelection();
var x = text.anchorOffset;
return x;
}
I have a simple paragraph displayed in the UIWebView starting with:
This is a test sentence
Everything works as expected if I select a whole words... eg. if I select This the function returns 0, if I select sentence the function returns 15.
However if I move the handles on the selected text in the UIWebView the anchorOffset is different than expected. Eg. Selecting portions in the order as follows in the first word , this returns the following:
his returns 4
hi returns 1
Thi returns 3
Furthermore this is different depending on the order that I change the selection:
This returns 0
Thi returns 0
hi returns 3
It appears that the anchorOffset is different depending on from which end of the selection I alter the selection.
My questions are:
Am I making an obvious mistake?
Is this expected behaviour?
Is there something I can do to make the result consistent?
Thank you!
I now understand what I was doing wrong. It came from my misunderstanding of what an anchor actually is. I thought the anchorOffset referred to the the first part of a selection geographically but actually it relates to where the moused button was initially pressed (obviously not on a touch screen). The focusOffset relates to where the mouse button was released.
A nicer explanation can be found here:
mozilla developer site
With regard to a UIWebView an initial selection will place the anchor geographically at the start of the selected range and the focus at the end. However each time a selection handle is moved it becomes the focus and the other handle becomes the anchor.
I am creating a form wizard that guides the user through each form element, showing a tooltip describing each element. What I am trying to accomplish is:
Keep each form field disabled, excluding the form field the user is currently filling out.
When the user wants to continue onto the next field, they need to click on the tooltip for the field they're currently on. Also, the field needs to be non-empty to advance.
I have the tooltip appearing correctly, and it vanishes upon click. What I can't figure out is how to say in JavaScript code: "Has the user entered data into the current field and clicked on the tooltip to advance? Okay, then continue onto the next field until we've reached the submit button. Otherwise, stay here on the current field."
Here is my code:
function prepareForm() {
var inputs = document.getElementsByTagName("input");
for (var i = 0; i < inputs.length; i++){
if (i !== 0){
inputs[i].disabled = "disabled";
}
// Make sure the tooltip tag is present...
if (inputs[i].parentNode.getElementsByTagName("span")[0]) {
inputs[i].onfocus = function () {
this.parentNode.getElementsByTagName("span")[0].style.display = "inline";
}
// When the user has entered information and clicked the tooltip, continue onto the next field.
inputs[i].parentNode.getElementsByTagName("span")[0].onclick = function () {
this.parentNode.getElementsByTagName("span")[0].style.display = "none";
}
}
}
}
window.onload = prepareForm;
I've tried entering other logic in the onclick function, but because it gets executed at any time, I don't have access to the inputs array. Any help on how I can accomplish this would be really appreciated. Thanks!
As you said that you are comfortable with jQuery,I created this fiddle for you.As i dont know how are you showing the tool-tip,let me know if mine is not the one you are using.This example can help you start and add your own requirements.
I would not recommend this. You are changing the default behavior of forms... with little or no benefit for the end user.
In addition you are forcing the users to do additional work between fields clicking on non-form field elements.
This fails basic usability and will only confuse users. On a side note, if you haven't read "Don't Make Me Think" by Steve Krug please check it out at your earliest convenience - it is chock full of eye opening details about why "inventing" new UI concepts is often a bad idea.
Update: So I think its only fair that I provide a different recommendation based on the information given about this form being very much a hand-holding exercise.
Thus based on the need to control input field by field, I think the only way to do so in a usable way would be to provide this as a wizard, one field per page. There are some added benefits to this in that if a decision is made in an early step that negates the need for a future step it can be omitted completely.
As a result I envision a form where there is a Previous/Next button at the bottom of each step (where applicable... e.g. step 1 would have no previous). The Next button would start disabled and only enable itself when the user has put input into the field on that page. When each step is shown, the focus should automatically be put into the field to enable quicker entry.
If possible, a progress bar or % complete indicator can be added to give the user a better understanding of how many steps remain.
Pros/Cons to this approach.
Pros:
The user does not need to click anywhere to enable a valid transition to the next field
No fields are disabled causing user confusion (except the Next button which is expected)
The user can focus on the one field that matters at that moment (e.g. phone number) and there is plenty of room for instructions/help
If step 1 is asking for say "Gender" and the user selects "Male" then step 6 that asks if the user has ever been pregnant can be skipped/auto-answered
If the user wants to go back they can
The user can't "accidentally" get to the next field without filling out the previous field
The user will be familiar with this style/behavior of wizard, this is fairly typical of many wizards/installers
Cons:
User can not see all questions at once
User can not enter field values out of order
User can not simply tab from field to field thus the overall form will be slower for advanced users vs. a single form