How can I count the number of files that are in the file upload input using jQuery?
I have tried this but it always returns 1:
$("body").on("change", ".create-album .custom-file-input .createAlbumFileUpload", function(){
var numFiles = $("input:file", this).length;
alert(numFiles);
});
My HTML:
<form enctype="multipart/form-data" class="createAlbumFileUpload">
<input type="file" name="uploadFile[]" multiple="multiple"/>
</form>
I found this jsFiddle on another question asking the same thing, however I can't see why mine isn't working?
The fiddle you provided contains the answer.
var numFiles = $("input:file", this)[0].files.length;
http://jsfiddle.net/xvLAc/1/
You can also try with this,
Take the input in Div and give an id,
var count = $('#divPhoto').children().length; // You'll get the length in this.
You can easily check with below code and https://jsfiddle.net/vvz3a4qp/2/ :
HTML:
<form name="myForm" enctype="multipart/form-data">
<input type="text" name="name">
<input type="file" name="name1" >
<input type="file" name="name2" ><br><br>
<span id="total"></span>
</form>
JS:
$("body").change(function(){
alert($(":file").length);
$("#total").html($("input[type=file]").length);
});
Related
I have a form with which a user can dynamically add text inputs. This generates a form with multiple text inputs that have the same name. If this form is submitted they overwrite each other. To solve this I need change the names so that they are appended with an incremented prefix when the form is submitted. Can anyone help?
Example of form (once three inputs have been added):
<form action="" method="post">
<td class="recipe-table__cell">
<input id="answer" name="the_answer" type="text" value="" >
<input id="answer" name="the_answer" type="text" value="" >
<input id="answer" name="the_answer" type="text" value="" >
</td>
<input type="submit" value="Submit">
</form>
Desired Post output on submission:
Array ( [1-answer] => test [2-answer] => ok [3-answer] => nice)
rather than Array ( [answer] => test )
First, select all of the elements that you want to add the attribute for. This can be done with .querySelectorAll().
Second, loop over those elements.
Third, use .setAttribute() to change the name attribute to append the index from the loop.
Note that you'll also want to increment the ID attribute, as you can't have duplicate IDs on the same page. You'll also want to swap your <td> elements for <div> elements to both allow .querySelectAll() to work correctly, and ensure valid markup.
This can be seen in the following example:
var inputs = document.querySelectorAll("form div input");
for (var i = 0; i < inputs.length; i++) {
inputs[i].setAttribute("id", "answer" + i);
inputs[i].setAttribute("name", "the_answer" + i);
console.log(inputs[i]); // Added purely to show the change
}
<form action="" method="post">
<div class="recipe-table__cell">
<input id="answer" name="the_answer" type="text" value="">
<input id="answer" name="the_answer" type="text" value="">
<input id="answer" name="the_answer" type="text" value="">
</div>
<input type="submit" value="Submit">
</form>
Hope this helps! :)
What I am trying to accomplish: When a user inputs dates, number of adults ect it would dynamically add the info via javascript to the URL within the url variables. This is what I have so far: ( I am a Noob but trying to make it work )
<script type="text/javascript">
$(function () {
$('#submit').click(function() {
$('#button').click(function(e) {
var checkInDate = document.getElementById('checkInDate').value;
var checkInMonthYear = document.getElementById('checkInMonthYear').value;
var checkOutDate = document.getElementById('checkOutDate').value;
var checkOutMonthYear = document.getElementById('checkOutMonthYear').value;
var numberOfAdults = document.getElementById('numberOfAdults').value;
var rateCode = document.getElementById('rateCode').value
window.location.replace("http://www.Link.com/redirect?path=hd&brandCode=cv&localeCode=en®ionCode=1&hotelCode=DISCV&checkInDate=27&checkInMonthYear=002016&checkOutDate=28&checkOutMonthYear=002016&numberOfAdults=2&rateCode=11223");
window.location = url;
});
});
Ok, so first things first: You probably don't need to do this at all. If you create a form and add a name attribute to each input, then the submission automatically creates the URL for you. Fixed value fields can be set to type="hidden".
For this to work you need to use the "GET" method.
<form action="http://www.Link.com/redirect" method="GET">
<input type="hidden" name="path" value="hd"><br>
<input type="hidden" name="brandCode" value="cv"><br>
<input type="hidden" name="localeCode" value="en"><br>
<input type="hidden" name="regionCode" value="1"><br>
<input type="hidden" name="hotelCode" value="DISCV"><br>
<input type="text" name="checkInDate"><br>
<input type="text" name="checkInMonthYear"><br>
<input type="text" name="checkOutDate"><br>
<input type="text" name="checkOutMonthYear"><br>
<input type="text" name="numberOfAdults"><br>
<input type="text" name="rateCode"><br>
<input type="submit">
</form>
Clicking "Submit" changes the URL to the desired one.
If this does not suit your needs, you can replace parameters in the URL by following the advice in this SO answer: Answer Link
This is much better than trying to re-implement URL manipulation on your own.
I have to choose one simple jquery function to serialize both oft these forms by getting form name dynamically
following jsfiddle is not working.
JSFIDDLE
HTML
<form id="JotForm" method="post" enctype="text/plain" class="jot">
FirstName:<input type="text" name="FirstName">
Email:<input type="text" name="Email">
<input id="btnFade" type="button" name="submit" value="Submit">
</form>
<form id="MyForm" method="post" enctype="text/plain" class="jot">
FirstName:<input type="text" name="FirstName">
Email:<input type="text" name="Email">
<input id="btnFade" type="button" name="submit" value="Submit">
</form>
Code Part
$(function () {
$("#btnFade").bind("click", function () {
//alert(FormId);
// setTimeout(function () {
var FormId = $(".jot").attr('id');
alert(FormId);
var FormSerialize = $(FormId).serialize();
console.log(FormSerialize);
});
});
You need to change
var FormSerialize = $(FormId).serialize();
to this
var FormSerialize = $("#" + FormId).serialize();
to make it match to element with id FormId.
In future when asking questions, please provide more complete example or explain more thoroughly what you are trying to achieve. I still can't understand what you are trying to achieve with this.
Aweber from data display javascript code something look like:
<script type="text/javascript">formData.display("name")</script>
<script type="text/javascript">formData.display("email")</script>
<script type="text/javascript">formData.display("phone")</script>
Now How can I use this in input filed value like:
<form method="post" action="">
<input name="name" type="text" value="<script type="text/javascript">formData.display("name")</script>">
<input name="email" type="text" value="<script type="text/javascript">formData.display("email")</script>">
<input name="phone" type="text" value="<script type="text/javascript">formData.display("phone")</script>">
<input type="submit" value="Go">
</form>
Reference: https://help.aweber.com/entries/21696333-How-Do-I-Display-Subscribers-Names-or-Email-Addresses-On-My-Thank-You-Page-
Please help me.
You can not simple place some code inside a value attribute hoping it will work, you need to appropriate JavaScript code to add the formData to the value attribute of the input field. You can do it with something like:
window.onload = function() {
document.getElementsByName('name')[0].value = formData.display("name");
document.getElementsByName('email')[0].value = formData.display("email");
document.getElementsByName('phone')[0].value = formData.display("phone");
}
I'm trying to change the value in one textfield from the value of another textfield without any submits. Example:
[Textfield 1 (type 'hello')]
[Textfield 2 ('hello' is inserted here as well)]
Below is my form:
<form action="#" id="form_field">
<input type="text" id="textfield1" value="">
<input type="text" id="textfield2" value="">
</form>
I don't know much about JavaScript, is this even possible? Would appreciate any help.
Thanks
<form action="#" id="form_field">
<input type="text" id="textfield1" value="" onKeyUp="document.getElementById('textfield2').value=this.value">
<input type="text" id="textfield2" value="">
</form>
see it in action:
http://jsfiddle.net/4PAKE/
You can do:
HTML:
<form action="#">
<input type="text" id="field" value="" onChange="changeField()">
</form>
JS:
function changeField() {
document.getElementById("field").value="whatever you want here";
}
Sometimes this won't work. So you need to use micha's solution:
<form action="#" id="form_field">
<input type="text" id="textfield1" value="" onChange="document.getElementById('textfield2').value=this.value">
<input type="text" id="textfield2" value="">
</form>
See this solution in this jsFiddle
You can read more about .value here.
Hope this helps!
If you want to do it with jquery, then please add the following script
<script src="http://code.jquery.com/jquery-1.7.2.min.js"></script>
and then write the following code:
$("#textfield1").bind("input", function() {
$("#textfield2").val($("#textfield1").text());
}
You can use jQuery to accomplish this as #sarwar026 mentioned but there are some problems with his answer. You can do it with jQuery with this code:
$('#textfield1').blur(function() {
$("#textfield2").val($("#textfield1").val());
});
In order to use jQuery you'll need to include it on your page, before your script.