I have been doing some research on a good way to clear a jQuery form.
I have a couple of ideas but I want to know if someone has a better way.
I know about using reset, but sometimes it is necessary to set a field back to a particular value that may not be accomplished by reset. (ie. if a form starts with some pre-filled data and you want to clear it)
I have read some discussion here: Resetting a multi-stage form with jQuery
But I have another idea that I will post as an answer. Please let me know what you think and if you have a better solution.
More Information:
For example I have an address form. It has a couple of inputs, selects, radios, etc. along with a copy into new button and a clear button. By default I want to have this particular radio selected to option 1.
<div id = "AddressList">
<div class = "Address">
<input type="radio"/> --obviously with some options here
<button>copy into new</button>
</div>
</div>
The user selected option two and clicks copy into new. So I say something like on the click of the click of the copy into new:
$("#addressList").append($(this).closest("#Address").html());
In the second address the secon radio button is selected. The user selects the third radio button. At this point clicking the reset button would reset the input back to option two not option one.
My solution would be to add the attribute called clear.
Then say $([clear]).val($(this).atrr('clear'))
Related
I have an autogenerated select box (based on the user decisions in other fields). I am useing "onclick" event inside "onlick" event.
The plan:
If the user click on this I have to disable some other fields and the select(dropdown menu) opens. The ideal would be if after the user's previous decision this select opens automaticly but looks like I can't open a select by JS, to make is work in every type of browser, so I have to make the user do it.
At the secound click I would like to get the value what the user choose and do something with it. But the user may not choose it or missclick out from the select and may close it (It may mess up the enable/disable other fields). So I would like to force the user to click on a value if the select is already opened by the user.
Here is the code:
document.getElementById("infodropdown").onclick = (function() //the select opens + I disable other fields
{
document.getElementById("infodropdown").onclick = (function() //the user should choose a value
{
//do something with the input, and enables other fields
});
});
If there any other more advanced way to make the user select if he/she opens the dropdown very welcome. Thanks you very much for any suggestion!
I think that the best option would be to replace the dropdown list by a custom made one. Then you would have full control over it.
Using some overlays may even prevent the user from doing anything else than select an item in your list.
For a form I'm building, I'm using a jQuery UI dialog to give the user a list of about 50 check box options. The text boxes get removed from the form completely when they're added to a dialog, so I have to clone and reinsert them to the form before submission so that all of the check box values will be submitted along with the form. The problem is that the checkboxes, when added back into the form, appear visibly. I'm just trying to make them invisible and still be able to submit the values.
I thought maybe doing something like prepend() might be a solution so that the user doesn't actually see the checkboxes, being all the way at the bottom of the form--but it still pushes the form elements down. So I'm looking for a means of appending the #states_container :input to the form without it visibly affecting the form in any way.
Code:
$('#submit_btn').click(function(e){
$("#form_submission").validate({});
if ($("#form_submission").valid()) {
$("#form_submission").append($('#states_container :input').clone());
$("form#form_submission").submit();
} else {
e.preventDefault();
alert("Please make sure all required information has been provided before submission.")
}
});
Create a div at the bottom of your form. Style it's display to none and give it a unique id.
<div id="checkBoxes" style="display:none;"></div>
When you go to clone the check boxes from your jQuery dialog set their location to:
document.getElementById("checkBoxes").innerHTML = varWithCheckBoxes;
This will place all of your check boxes inside an invisible div that will have no affect on your layout and will still be submitted along with your form. In addition if the need arises to repopulate that list of check boxes to make changes you can simply grab them from the div and place them back in the dialog box.
I am currently working on a project and I am stuck. As per client requirements a small modification was made to an existing form.
Imagine the HTML page as follows:
I have added a new form element named Business Type and there are 10 options in that.
The user needs to select an option or multiple options and submit and the data would get stored in the database. The data is also getting stored in the database. I have checked that.
There is also a button within the form which opens up a small window to choose a few options. When this window opens up, the selection made in Business Type (in the form) disappears. How to prevent this from happening?
I am trying to use sessions. But is there a better and easier way to accomplish this? I want to retain the multiple selections that are made.
This can all be done client-side. Basically, you create a form with all of the questions that you want to ask and then use JavaScript to display extra questions. If the user doesn't click the button to open the extra questions, they just maintain their empty values. If they do open the extra questions, the will pop up on the page and the user will fill in the inputs. Once they are finished with those questions, you simply hide them but they still hold the values that the user set.
So put the optional fields in a hidden div in the form, and then display that div when the button is clicked.
<form ...>
... required inputs
...
...
Ask more questions
<div id="optional-inputs" style="display: none;">
<input ... />
<input ... />
'Save' optional questions
</div>
<input type="submit" value="submit" />
Then, give the #optional-inputs some CSS (or you can style it however you like):
#optional-input {
left: ...px;
position: absolute;
top: ...px;
width: ...px;
}
For the button/link that opens the other questions, add some JavaScript/jQuery to open the div as an absolute positioned window.
$('#show-optional-inputs').click(function(e) {
$('#optional-inputs').show();
e.preventDefault();
});
This will get you mostly there. You would need to bind an event to trigger the optional questions box to save/close - which is actually just hiding the box and keeping the values that the user set in the form.
I'm currently working on a Lotus Notes solution. We're just using Web forms so client side operations are done via Javascript.
What I want to accomplish is to reset a Group of Radio Buttons. There are 3 possibilities and I want to choose none. (A 'none of them' possibility would be preferable, I know but we are required to reset them)
I currently use:
//Unchecks a single group of Radio Buttons
//groupname - the name attribute of the group which selection needs to be unchecked
function clearRadioButtonGroup(groupName) {
for(i=0;i<document.forms[0].elements[groupName].length;i++) {
document.forms[0].elements[groupName][i].checked = false;
}
}
The problem with this routine is, the Radiogroup gets reset, but on a form submit the old value gets submitted. Any suggestions?
What version of Domino are you using? Since 7.x (I think) a %%Surrogate field gets generated as a hidden field in your HTML that you'll be able to reset, so after deselecting all of the radio button options, you can then clear out the %%Surrogate field and you should then avoid having to select a "None of the above" option.
Matt
The problem is that clearing the radio buttons make no information about them appear in the submitted form data, and Domino seems to interpret that as no change to the field rather than clear the field.
I haven't found any solution to this I really like, but I can think of two options:
Change the radio buttons to include a no choice option.
The alternative is a bit clumpsy:
Add an editable field to the form to use as a flag, hide it from the web browser with css.
Have clearRadioButtonGroup also set the flag field to something.
Have the onChange event of the radio buttons clear the flag field.
In a WebQueryOpen agent, set the radio buttons field to empty if the flag field is non-empty.
Another alternative could be to uses some clever javascript/css trick to hide the no choice option and have clearRadioButtonGroup simply set that choice.
Are you certain that the old value is actually being submitted? Perhaps it just isn't being updated (erased) in the NotesDocument you're editing? Just a hunch...
BTW, you can download a program called Fiddler that will let you inspect the HTTP POSTs, and you can confirm that the POST data doesn't contain any values for that radio button group. That might help narrow down the problem.
Put the following pass thru HTML code on your form:
<input type="hidden" name="FieldName" id="FieldID" value="">
(FieldName and FieldID are the name and id of your radio field on the form)
When you reset your radio through Javascript and submit your document, the field will be reset to blank.
I'm creating a data entry app for some in-house stuff.
My team needs to enter info about "items" which can have many "categories" and vice versa.
I need a quick way to let them enter an arbitrary amount of categories.
Here's my idea:
On the item entry page, I'll have it so that initially there's one text input for "categories" and if it's tabbed out of while it's empty, the input field is deleted (unless it's the only one) and focus skips to the next field. If it's not empty when it's tabbed out of and if it's the last input field in the array, then an additional "category" text input will be added and focused.
This way people can enter an arbitrary amount of categories really quickly, without taking their hands off the keyboard, just by typing and hitting tab. Then hitting tab twice to denote the end of the list.
First of all, what do you think of this interface? Is there a better way to do it?
Second of all, is there a jQuery (or something) plugin to do this? I've searched but can't find one. I searched scriptaculous/prototype and mootools too, with no luck.
I would obviously rather use something tried and tested than roll my own.
Any and all advice appreciated
First I'll try to address the problems commented on nickf solution.
To set the focus on the newly created input $copy.find(":text").focus(); will not work. The jQuery focus method only triggers the event, but does not call the underlying focus method.
You can set the focus with setTimeout(function(){$copy.find(":text").get(0).focus()}, 10); but:
setTimeout is needed in firefox or strange things will happen with the blinking cursor.
IE7 needs another input to focus when tabbing. I haven't found the way to set the focus on an input if the focus goes to the address bar. I suppose this will not be a problem because you will need at least a submit button.
To control shift-tab I've been trying to track the focused element, in order to skip the blurHandler when the focused element is a previous input, but the resulting code is really ugly so I'll post this and look for a better solution.
And last, you're asking what we think of this UI, and I think that a comma separated list of categories is easier to code an to fill in. :-)
it's actually not too difficult to implement that, even with vanilla JS (ie: no jQuery, prototype, etc), but everything is easier with jQuery, so I'll have a go at it using that:
Assuming a structure like this:
<form id="myForm">
<div class="inputRow">
<input type="text" name="myInput[]" />
</div>
<div class="inputRow">
<input type="text" name="myInput[]" />
</div>
...
</form>
Here's the JS
$('#myForm :text').blur(onBlurHandler);
function onBlurHandler() {
$row = $(this).parent();
if ($row
.nextAll(":has(:text)") // all following divs with a text element
.length == 0 // but there aren't any, we're on the last one
) {
if ($.trim($row.find(":text").val())) { // the text box isn't empty
$copy = $row.clone(true);
$copy
.find(":text") // get the new text box,
.val('') // remove any text in it
.blur(onBlurHandler) // and add the event handler (is this necessary?)
;
$copy.insertAfter($row);
} else if ($row.prev(':has(:text)').length) { // the text box is empty, and this one isn't the first row
$row.remove(); // get rid of the row.
}
}
}
Response to comments:
thanks for the answer! i've tried it but it doesn't seem to work as intended. i'm on mac firefox. if i tab off the last field, it adds the new one but focuses the address bar. i tried adding: $copy.find(":text").focus(); after the insertAfter line, but it doesn't change anything. any ideas?
also if i shift-tab the blurhandler doesn't know i'm going in the opposite direction. is there any way around that?
Hmm, I hadn't thought about that. What you could try doing is to put an element after all your text fields which can take focus (like a textbox which is rendered off-screen, eg: margin-left: -10000px). Add an onfocus handler onto that to see if the last row is empty, and if it is, then it would have been added just then by the onBlurHandler function, so pass the focus back to the last row. If the last row isn't empty, then pass the focus onto the next element (your submit button, probably). If there are issues with the last row not existing in the DOM yet, then put the above into a timeout.
(If this actually works) this should let your users tab backwards and forwards without hassle.