I have two inputs of type file. I want to sync those two inputs, such that when I select an image in the first input, it will be automatically added to the second input and I can access it from there.
<input name="input1" type="file" multiple>
<input name="input2" type="file" multiple>
Inputs for files are special in that the file selection is not stored in the value attribute, hence ngModel won't work. You can reference each input by using a template reference variable like #variablename. Then, when the first input changes, you add the file selection to the second input with (change)="input2.files = input1.files".
<input name="input1" type="file" multiple #input1 (change)="input2.files = input1.files">
<input name="input2" type="file" multiple #input2>
Try it out here
Related
I've created a functionality for user(s) to be able to upload multiple images to a website with different html input tags like so:
<input type="file" name="photos[]" required>
<input type="file" name="photos[]">
<input type="file" name="photos[]">
<input type="file" name="photos[]">
<input type="file" name="photos[]">
The idea is to allow only a maximum of 5 images to be uploaded. I know I can just do <input type="file" name="photos[]" multiple> but this doesn't allow them to choose files from different folders from their device, hence the reason why I have multiple <input type="file">.
I know this pattern works well with radios and checkboxes, but the issue I'm having now is to validate the field as one and not multiple inputs.
I know there are javascript/jquery libraries I can use to achieve this, but I really do not want to use any.
Is there a workaround towards achieving this?
I've got really simple question - is there any way to disable HTML5 validation only for some chosen inputs (instead of setting "novalidate" for whole form)?
I mean something like <input type='number' requirednovalidate>. But this doesn't work.
You may ask why I need type="number" or "required" then? Well, I need it there because my framework uses it for its own validation.
EDIT
It is about one special input - birth number. I need it to be of type number (because of mobile devices) but its value is mostly used with "/" (e.g. 860518/8757) which is not valid character for type number. So I need user to fill it without slash (8605188757). The problem is when there is invalid value filled in html5 input (e.g. "fsda" in number type), it seems like it is empty, with no value.
So when user fill the value in wrong format (860518/8757), html validation is disabled so the JS validation runs, it is validated like empty field. So the error message is like "Please fill the field birth number" (which is really confusing) instead somthing like "Sorry, wrong format".
My solution was to enable html5 validation for this field (so the default browser message is displayed when there is wrong format filled) but disable it for other fields so that they would be validated only with my JS validation.
You cannot disable HTML5 validation for a chosen input(s).
If you want to remove validation on the entire form you can use formnovalidate in your input element.
For example,
<input type="submit" value="Save" class="button primary large" formnovalidate/>
Note you can use formnovalidate with <input type=submit>, <inut type=image> or <button> -source
For more info go here or here.
novalidate attribute is only for form tag, it can't be applied on form controls.
You can remove the required attribute in js, after your framework validates:
$('[Selector]').removeAttr('required');
Now the selected field will not be validated.
Inputs will be validate when:
have attr required or prop required=true
aren't empty; don't have to have attr required or prop required=true
and have no attr disabled or prop disabled=true
If you want to validate data in a specific way, use pattern attr.
JSFiddle
(function() {
document.querySelector('form').addEventListener('submit', function(event) {
event.preventDefault();
});
})();
<form>
1. <input type='text'><br>
2. <input type='text' required><br>
3. <input type='text' required disabled><br>
4. <input type='text' value="" pattern="\d*"><br>
5. <input type='text' value="" pattern="\d*" required><br>
6. <input type='text' value="" pattern="\d+"><br>
7. <input type='text' value="" pattern="\d+" required><br>
8. <input type='text' value="test" pattern="\d+" required disabled><br>
<button>check field validity</button>
</form>
I am using input type hidden for getting hidden data in URL. Here is my code
<input type="hidden" name="post_type" value="kcc-product">
<input type="hidden" name="post_type" value="kcc-manufacturer">
When I am using it, I am getting URL as &post_type=kcc-product&post_type=kcc-manufacturer
But I need it like: &post_type=kcc-product&kcc-manufacturer
Just I have to remove **post_type=** from URL. I tried with
<input type="hidden" name="post_type" value="kcc-product">
<input type="hidden" name="" value="kcc-manufacturer">
But, it is not working. How can I remove **post_type=** from URL? Any Ideas?
<input type="hidden" name="post_type[]" value="kcc-product">
<input type="hidden" name="post_type[]" value="kcc-manufacturer">
try this. Both value of post_type will be avilable in $_GET['post_type'] as an array.
Not that I am advocating this approach but ..
why don't you just have one hidden field variable instead of both?
<input type="hidden" name="post_type" value="kcc-product&kcc-manufacturer">
That will produce the url you are after "&post_type=kcc-product&kcc-manufacturer"
First thing is, there should not be two hidden fields with same name.
So, You can remove one extra hidden field and make them as one. And then write as below:
<input type="hidden" name="post_type" value="kcc-product&kcc-manufacturer">
Otherwise, if you use two hidden fields, it considers as two separate parameters and shows as two separate parameters.
Otherwise specify method="POST" in form tag, it will automatically doesn't show in url.
I guess, it might helps.
I'm using Blueimp File Upload, how can I limit the upload to the last single element selected or (drag and) dropped? I already deleted the multiple attribute from input form and I set the maxNumberOfFiles option to the value 1 but if the first upload fails (because of the option maxFileSize or acceptFileTypes) the first element stays on top of the listed selected files (generated by template) and further files cannot be uploaded because they infringe the maxNumberOfFiles option. I'd desire that if an accepted file is upload and/or dropped, instead of being appended, it would replace the old (not accepted) file. I would also that the templates never prints more than one file when multiple files are dropped but only the first file.
change input tag from:
<input type="file" name="files[]">
to:
<input type="file" name="file">
Remove files array and remove multiple attribute:
<input id="fileupload" type="file" name="files[]" multiple>
to:
<input id="fileupload" type="file" name="file">
Also change the multiple attribute if it is set from
<input type="file" multiple="" name="file">
to:
<input type="file" name="file">
Suppose this checkbox snippet:
<input type="checkbox" value="1">Is it worth?</input>
Is there any reason to statically define the value attribute of checkboxes in HTML? What does it mean?
I hope I understand your question right.
The value attribute defines a value which is sent by a POST request (i.e. You have an HTML form submitted to a server).
Now the server gets the name (if defined) and the value.
<form method="post" action="urlofserver">
<input type="checkbox" name="mycheckbox" value="1">Is it worth?</input>
</form>
The server would receive mycheckbox with the value of 1.
in PHP, this POST variable is stored in an array as $_POST['mycheckbox'] which contains 1.
I just wanted to make a comment on Adriano Silva's comment.
In order to get what he describes to work you have to add "[]" at the end of the name attribute, so if we take his example the correct syntax should be:
<input type = "checkbox" name="BrandID[]" value="1">Ford</input>
<input type = "checkbox" name="BrandID[]" value="2">GM</input>
<input type="checkbox" name="BrandId[]" value="3">Volkswagen</input>
Then you use something like: $test = $_POST['BrandID']; (Mind no need for [] after BrandID in the php code).
Which will give you an array of values, the values in the array are the checkboxes that are ticked's values.
Hope this helps! :)
One reason is to use the ease of working with values in the system.
<input type="checkbox" name="BrandId" value="1">Ford</input>
<input type="checkbox" name="BrandId" value="2">GM</input>
<input type="checkbox" name="BrandId" value="3">Volkswagen</input>
When the form is submitted, the data in the value attribute is used as the value of the form input if the checkbox is checked. The default value is "on".
$('form').on('change', update).trigger('change')
function update() {
var form = $(this)
form.find('output').text('→ ' + form.serialize())
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
<input type="checkbox" name="foo">
<output></output>
</form>
<form>
<input type="checkbox" name="foo" checked>
<output></output>
</form>
<form>
<input type="checkbox" name="foo" value="1" checked>
<output></output>
</form>
<form>
<input type="checkbox" name="foo" value="bananas" checked>
<output></output>
</form>
For the sake of a quick glance answer, from MDN
when a form is submitted, only checkboxes which are currently checked are submitted to the server, and the reported value is the value of the value attribute
It can be confusing because seeing something like
<input type='checkbox' name='activated' value='1'> might lead one to believe that the 1 means true and it will be treated as though it is checked, which is false. The checked attribute itself also only determines if the checkbox should be checked by default on page load, not whether it is currently checked and thus going to be submitted.