Removing required from a form element via Javascript - javascript

I have a form that hides and shows option based on a drop down. If one option is selected there is a form that had required fields (). If the other option is selected I need to disable those required fields or the form won't submit.
Long and short. How do I remove the required for the input element via Javascript?
I was trying document.getItemById('firstName').?

document.getElementById('firstName').removeAttribute('required');

Related

Under what conditions is an input submitted?

When submitting a form, what inputs are submitted?
As an example:
disabled inputs are not submitted...
inputs wihtout a name attribute are not submitted...
I am looking for a more comprehensive/official document which explains what inputs are submitted?
There's a range of conditions.
The control's form owner must be the form being submitted and none of the following are true:
The field element has a datalist element ancestor.
The field element is disabled.
The field element is a button but it is not submitter.
The field element is an input element whose type attribute is in the Checkbox state and whose checkedness is false.
The field element is an input element whose type attribute is in the Radio Button state and whose checkedness is false.
The field element is an object element that is not using a plugin.
and a name must be established.
Details are in the HTML5 spec at 4.10.21.4 Constructing the entry list
As W3 document (https://www.w3.org/TR/html401/interact/forms.html#successful-controls) said:
A successful control is "valid" for submission. Every successful control has its control name paired with its current value as part of the submitted form data set. A successful control must be defined within a FORM element and must have a control name.
However:
Controls that are disabled cannot be successful.
If a form contains more than one submit button, only the activated submit button is
successful.
All "on" checkboxes may be successful.
For radio buttons that share the same value of the name attribute, only the "on" radio
button may be successful.
For menus, the control name is provided by a SELECT element and values are provided by OPTION elements. Only selected options may be successful. When no options are selected, the control is not successful and neither the name nor any values are submitted to the server when the form is submitted.
The current value of a file select is a list of one or more file names. Upon submission of the form, the contents of each file are submitted with the rest of the form data. The file contents are packaged according to the form's content type.
The current value of an object control is determined by the object's implementation.
More details in the document.

Form validation in javascript when drop down dependency is involved

I have used ng-disabled for my form validation for ADD button.
i.e. ng-disabled="conditionForm.$invalid". But , My form contains two text boxes which are hidden at first , and when a type is selected from drop down , only the respective Text box div should be visible. The Problem i'm facing is ,when the above ng-disabled validation is used , the ADD button is still disabled when one of the text box is selected and an input is provided. After the second input is also selected from the drop-down , then the ADD button is getting enabled.
Can you please provide me with an alternate validation , where the ADD button can get enabled every time a value is selected from drop down and a valid input is provided.
If you're ng-disabled is on a form being valid or invalid it sounds like those may have required inputs set. If that is case look at using ng-required so you can explicitly set required based on expression. You can then control when the form is valid.
The exact answer: Answer

Jquery ajaxSubmit plugin form input file

In my website I have a form which contains more than one file input fields. The first one is:
<input type="file" name="questionimages[]" multiple />
I use this one to upload multiple images. The next ones are:
<input type="file" name="optionimages1" />
<input type="file" name="optionimages2" />
<input type="file" name="optionimages3" />
...
<input type="file" name="optionimagesn" />
The number of these input fields varies depending on user input. All except the first input fields are inserted dynamically by the user, I basically use jquery and use the html method to insert a new input field every time the user clicks a button, and the name of the input fields changes by adding and incrementally bigger value at the end of the name of the input filed, so I can distinguish it from the rest.
I am using the Jquery form plugin to upload the images through ajax using the ajaxSubmit function.
The problem is, when the user clicks the respective button to insert a new input, that new input filed has the name attribute equal to questionimages[] which is the name of the first input field, which is always there regardless of the user input. Even though I write something like:
$('#someID').html('<input type="file" name="optionimages1" />');
The input field gets the name questionimages[] instead of the name optionimages1. What is causing this? Is the Jquery form plugin automatically overwriting the name values of the newly inserted input tags?
NOTE: I want to add images from the dynamically added fields so I can distinguish them from the images uploaded through the first input field with PHP, that is why I don't use the first input field to upload all of the images. The first input field can add multiple images if it wants, but the ones added through the other input fields are images that I need for another purpose so I need to distinguish them from the images uploaded through the first input field.
I think the problem is in the way you are adding the fields. However if you want to manualy set the name of the field you can always use:
$("#newfield").attr("name","theNameIWant");
to change the attribute "name" of the input field.
You can also select the last input field like this:
$(".container input:last")
That way you can alter only the newly added field without having to set an ID

How can I exclude HTML form radio button values from being submitted?

I need to submit just one input field value to a cgi script via a web form.
I've added a couple of extra form controls (a check box and radio buttons) which manipulate the input value depending on the states selected.
When the form is submitted, the extra form field values are submitted as well which breaks the cgi script (which I don't have access to). I removed the 'name' attribute from the check boxes so they are not submitted but cannot do this for the radio buttons as it breaks their grouping.
How can I prevent radio button values from being submitted?
You can add a disabled attribute to them in the submit handler, this will prevent them from being serialized, either by jQuery or a normal <form> submission. For example:
$("#myForm").submit(function() {
$(this).find(":radio, :checkbox").attr("disabled", true);
});
Or you can .serialize() only the elements you want, for example:
$.post("myPage.cgi", $("#myForm input[type=text]").serialize());
Make them "unsuccessful". There are several ways to achieve this:
http://www.w3.org/TR/html401/interact/forms.html#h-17.13.2
It is also possible to have two different forms: one that has visible form elements and one that has a hidden input that represents the end result to be submitted. You can either attach onchange handlers to your visible form elements so that they call some JavaScript to update the invisible field, or you can run a function as part of the onsubmit handler to set the invisible value directly before it is submitted.
Here's a jsFiddle demonstrating the second approach (the onsubmit handler): http://jsfiddle.net/gtU4J/

Lotus-Notes: Reset Radiogroup via Javascript

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.

Categories