Creating a pop-up alert - javascript

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

Related

how to duplicate the value of one form field in another in jquery

I have a form where a user can chose the applications he has access to? and when he the applications he wants access to, he is presented with more options. One of them is notification email address. if the user choses two applications, he gets two notification email address fields to fill. But both of them are stored in the same column in the database.
There are multiple fields like user authorisation level, user branch etc which are uniform accross all applications.
i am trying to replicate the value of one field in the other with jquery. i tried the below which obviously fails. Can anyone suggest how to acheive the replication?
$("#email").val().change(function() {
$("#email1").val($("#email").val());
});
Edit: I have drop down fields as well as text boxes.
.val() returns a string which cannot have a change event. You need to use
$("#email").change(function() {
$("#email1").val($(this).val());
});
You will want to bind the change event using on or live depending on your version of jquery, if you haven't wrapped this piece of code in a ready block.:
$("#email").on("change",function() {
$("#email1").val($(this).val());
});
This fiddle shows setting a <select> tags value using .val() http://jsfiddle.net/8UG9x/
It is an often asked question:
Copy another textbox value in real time Jquery
depending on when you need this action to execute, but if live
$(document).ready(function() {
$('#proname').live('keyup',function() {
var pronameval = $(this).val();
$('#provarname').val(pronameval.replace(/ /g, '-').toLowerCase());
});
});
http://jsfiddle.net/KBanC/
another one, basically same:
JQUERY copy contents of a textbox to a field while typing

How to disable Sharepoint textbox?

I am trying to disable a textbox in SharePoint WSS3 and force a specific value (given by another JavaScript function) but I can't seem to find the right way of doing it. I have come across different issues. Let's say I have a normal single line text value named prova and another one named Description. Description is required, prova is not.
First Issue: If the field IS required, even if there is something in the textbox, SharePoint says otherwise and does not allow me to insert the entry.
$(document).ready(function(){
//var value = someFunction(...);
var value = "test";
$("input[title='Description']").attr("disabled", "disabled");
$("input[title='Description']").val(value);
});
Second Issue: If the field IS NOT required SharePoint doesn't say anything but it inserts a blank value instead of the one given.
$(document).ready(function(){
//var value = someFunction(...);
var value = "test";
$("input[title='prova']").attr("disabled", "disabled");
$("input[title='prova']").val(value);
});
I have a feeling that tells me that there is some kind of SharePoint JavaScript function somewhere that listens for KeyUp or something. I have really no idea what to do now...
EDIT: It looks like the problem is related to disabling the textbox, if I comment the line where I disable the textbox it works in both scenarios. Maybe if I catch the insert request I can re-enable the textbox before SharePoint do the actual post. No idea how to do it though...
Your problem really is related to disabling the textbox first. By default disabled textboxes are not contained in the POST request in IE.
See this post: Disabled form inputs do not appear in the request or this one: how to save data by disabled text box?
What you actually want to do is set the readonly attribute of the field, not disable it (readonly="readonly"). The problem with that is that the readonly state sometimes looks the same as the default state, so you also have to add some CSS to make it look greyed out.

Re-enable radio inputs with a clear function

I've tried a number of different things, including typical form reset and jQuery examples I've found across the web with no luck.
Screenshot:
The Goal:
I have a rankable list where a user is expected to rank items from 1-6 according to importance to them. If they select "2" for a certain row, we don't want to let them select "2" for another row. Here is the jQuery that's accomplishing this:
// Disable sibling radio buttons in form once an item is selected
$("input:radio").click(function() {
var val = $(this).val();
$(this).siblings("input:radio").attr("disabled","disabled");
$("input:radio[value='" + val + "']").not(this).attr("disabled","disabled");
});
The Issue:
This code seems to be working, with a couple of quirks.
The code correctly disables sibling rows, but if the user wants to change, they're stuck. They can click "2" on a row, then click "3" on the same row, but that leaves all other "2" and "3" options disabled completely.
The user needs a way to completely clear the form via a "start over" or "reset" button that apparently needs some special jQuery magic that I haven't been able to figure out yet.
I took code referenced in another post from this url, but it seems to only half work on my site. I notice on that fiddle link that if you click "1", it also disables "2" and "3" on the same row, which doesn't happen on my local development attempt. It does, however, permanently disable "2" in other rows if you were to click "2"...so I'm unsure why it works in the example but not my code (above).
There's got to be some easier way around this that I'm just not seeing here. I appreciate any help or code examples that might work along these lines.
Instead of outright disabling radio options that are not valid, you can instead take one of two approaches:
When the user clicks an option, validate the option on the fly, i.e., that "3" is not already selected when you click another "3". If not valid, then display a popup to user and clear it out.
When the user clicks an option, say a "3", then clear out all other "3" options so that only one is rated at that amount at a time.
Here is a sample code that will use method #2, clearing out all same value options whenever an option is clicked: http://jsfiddle.net/xy9wC/
From a users perspective, disabling these kinds of radio buttons may be very annoying to deal with as it forces the user to use two clicks instead of one while selecting something else.
A better alternative would be to "suggest" errors to the user, then enforce them on submit. For example, you could make the row with the invalid option red, then allow the user to discover the error and fix it themselves.
An even better way than that, use jQuery to create a sortable list.
http://jqueryui.com/demos/sortable/
-Sunjay03

Form Field Input One After Another

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

Clean and accesible Other option (Check box and text box)

When I have a set of either check boxes or radio buttons I often need to have an Other choice. This check box or radio button is very often accompanied by a text box where the user is supposed to fill out what this Other is.
How do you usually handle this set up? What kind of markup do you use? What do you require in your validation? Do you use java script for anything? For example:
How do you make the form accessible? Do you use and how do you use the label tag, for example.
Do you connect the check box and text box in any way with some javascript? For example, do you activate the text box when the check box is checked? Do you check or uncheck the check box automatically if the text box is filled out or cleared?
Do you let validation fail with error messages if the check box is checked but the text box is not filled out, or if the text box is filled out but the check box is not checked? Or do you just consider it not filled out and not checked?
Very unsure how to best deal with this issue, so any advice and examples are most welcome c",)
Typically when I have dynamic forms, I insert the input dynamically. That is, in the case of jQuery, I'll use .append('<input...') or some other similar function to actually insert the elements, and id it (or class it, depending), so that it can be easily .remove()-ed if the user decides they want to use another option instead. Validation is either handled via an onClick on an input button. If I'm feeling feisty, I'll go the AJAX route, and skip the <form> altogether.
I would definitely let the validation fail. They want "Other", and you want to know what "Other" is. If you don't care what Other is, then don't bother with the input box.
Edit: Might look something like this.
$('input[type="radio"]').click( function() {
if($(this).next().attr('name') != 'other' && $(this).attr('name') == 'other_input') {
$(this).after('<textarea name="other"></textarea>');
} else {
$('textarea[name="other"]').remove();
}
}
The click will react to any radio being clicked, and the if will make sure that it's only the "other" radio button that will react to the click, and that it will only react if there isn't already a textarea after it (so you don't get multiple textarea propogations).
On the processing side of things, you'll have to do a validation at first to see if other was checked, and to grab the input of the textarea if it was. You should probably use server-side validation for that.
Hope that gets you started.
I usually enclose my radio buttons in a label like this:
<label><input type=radio value=xyz name=stjames>Saint James</label>
this way the user can click on the text to trigger the button.
When deciding how to behave, I usually say to myself "what do you think the user expected when they did that..." and that often gives me the answer. So, upon click or Focus of the text box, turn on the radio that goes with it. This won't work if you've disabled the text box!
( ) US ( ) UK (*) Other [________________]
If the Other choice is a dangerous one (deleting data), though, I'd disable the text box until the user explicitly clicks Other. Then, the Radio drives the Text Box instead of the other way around. You want the user to have to go through another step in this case. It depends on the situation - think about what'll happen in each case.
I usually try to make it impossible or annoying for the user to do something 'wrong'. EG disable the OK button if something is inconsistent. Or, select the Other radio when the user types in text. If there's text in the text box but the radio buttons are set to something different, I'd usually just ignore the text. But if it's a serious/dangerous situation, you want to make sure the user's made up their mind; if you delete the text when the user chooses a different radio, that might piss them off but it might be appropriate if they should be careful.

Categories

Resources