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
Related
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
Pretty straightforward. I want the text input to look disabled (browser's default disabled style) but without actually being disabled so I can still sell it trough post.
If you just need to send it throung post you can make the input field as hidden instead of making it look disabled
<input type="hidden" value="yourvalue">
Its not direct way to make it look disabled as disabled input field looks different in every other browser...
If you want to display data that the user can't change, and then send it to a server with a POST then include it as a hidden <input>
<input type=hidden name=myHiddenValue value="My Hidden Value">
It will appear as $_POST['myHiddenValue'] when the form is submitted.
If you need to display it too then you can include it in your HTML, just not as an <input> field.
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');
I'm having some problems adding a dropdownlist with ajax and stuff using jQuery. When you click or you type on the input text a method creating the jQuery dropdownlist will be called. However if you already submitted this form, when you type you get the typical browser simple dropdown with previous submitted data. I'm having a hard time figuring what event do trigger clicking in that dropdownlist element.
Just add
autocomplete="off"
attribute to your input fields, for example:
<input type="text" name="myField" autocomplete="off">
I've got three form fields, two inputs and one textarea. When I hit the submit button before entering any data my browser says the first input field and the textarea must be entered, but the second input field is ignored. Does anyone got an idea how I should fix this?
Posted the code on http://jsfiddle.net/D5tk4/
Thanks!
Your input fields have id attributes but not name attributes. Inputs need to have name attributes.
http://jsfiddle.net/petersendidit/D5tk4/2/