How to change order of files before form submit - Jquery / Javascript
I am not so familiar with Javascript / frontend and I use Jquery to get simple functionality done. My use case is as below.
User selects multiple files. User will have option to reorder the files (done through Jquery UI sortable along with file change). I have two challenges
I am capturing the change via start and update and trying to reset the files array. However on form submit, the files are going in original order. Should I submit the form from Javascript rather than direct submit button. If so, how do I tie these events together. I have code as below so far.
$( function() {
var startIndx, updtIndx, temp;
$( "#sortable" ).sortable({
update: function(event, ui) {
updtIndx = ui.item.index();
//alert('update: '+updtIndx)
},
start: function(event, ui) {
startIndx = ui.item.index();
//alert('start: ' + ui.item.index())
}
});
temp = files[startIndx];
files[startIndx] = files[updtIndx];
files[updtIndx] = temp;
$( "#sortable" ).disableSelection();
} );
When user clicks on Select Files again, and adds some more files, I am able to show the ul/li with more file names but how do I store reference to previous files to submit them all?
javascript jquery
asked Nov 20 at 5:38
Karthik
170312
|
show 4 more comments
I am not so familiar with Javascript / frontend and I use Jquery to get simple functionality done. My use case is as below.
User selects multiple files. User will have option to reorder the files (done through Jquery UI sortable along with file change). I have two challenges
I am capturing the change via start and update and trying to reset the files array. However on form submit, the files are going in original order. Should I submit the form from Javascript rather than direct submit button. If so, how do I tie these events together. I have code as below so far.
$( function() {
var startIndx, updtIndx, temp;
$( "#sortable" ).sortable({
update: function(event, ui) {
updtIndx = ui.item.index();
//alert('update: '+updtIndx)
},
start: function(event, ui) {
startIndx = ui.item.index();
//alert('start: ' + ui.item.index())
}
});
temp = files[startIndx];
files[startIndx] = files[updtIndx];
files[updtIndx] = temp;
$( "#sortable" ).disableSelection();
} );
When user clicks on Select Files again, and adds some more files, I am able to show the ul/li with more file names but how do I store reference to previous files to submit them all?
javascript jquery
asked Nov 20 at 5:38
Karthik
170312
We need to see your code on how your form submits.
– Daniel Cheung
Nov 20 at 6:21
It is not possible to change the value of a file field using the script, so try to find other solution for this
– Nidhi
Nov 20 at 7:13
one suggestion for achive this is make an array of files and do all upadates on this array, On submit pass that array with your request.
– Nidhi
Nov 20 at 7:22
@DanielCheung, I had two versions of the code, both are not working, one is doing $('#formId').submit() and the other is using the jquery ajax request, in both cases, it is not working. I am assuming the changes made in Javascript are not applying to the form submission.
– Karthik
Nov 20 at 23:48
@Nidhi, I tried with storing in a different array, but the challenge is, the new array needs to be submitted as Ajax request with a new dynamic form. This is making me lose the output set as downloadable file. Do you have a sample where the array can be used to submit the same form or create a new form and simulate form submission instead of Ajax form submission?
– Karthik
Nov 20 at 23:50
|
show 4 more comments
I am not so familiar with Javascript / frontend and I use Jquery to get simple functionality done. My use case is as below.
User selects multiple files. User will have option to reorder the files (done through Jquery UI sortable along with file change). I have two challenges
I am capturing the change via start and update and trying to reset the files array. However on form submit, the files are going in original order. Should I submit the form from Javascript rather than direct submit button. If so, how do I tie these events together. I have code as below so far.
$( function() {
var startIndx, updtIndx, temp;
$( "#sortable" ).sortable({
update: function(event, ui) {
updtIndx = ui.item.index();
//alert('update: '+updtIndx)
},
start: function(event, ui) {
startIndx = ui.item.index();
//alert('start: ' + ui.item.index())
}
});
temp = files[startIndx];
files[startIndx] = files[updtIndx];
files[updtIndx] = temp;
$( "#sortable" ).disableSelection();
} );
When user clicks on Select Files again, and adds some more files, I am able to show the ul/li with more file names but how do I store reference to previous files to submit them all?
javascript jquery
asked Nov 20 at 5:38
Karthik
170312
I am not so familiar with Javascript / frontend and I use Jquery to get simple functionality done. My use case is as below.
User selects multiple files. User will have option to reorder the files (done through Jquery UI sortable along with file change). I have two challenges
I am capturing the change via start and update and trying to reset the files array. However on form submit, the files are going in original order. Should I submit the form from Javascript rather than direct submit button. If so, how do I tie these events together. I have code as below so far.
$( function() {
var startIndx, updtIndx, temp;
$( "#sortable" ).sortable({
update: function(event, ui) {
updtIndx = ui.item.index();
//alert('update: '+updtIndx)
},
start: function(event, ui) {
startIndx = ui.item.index();
//alert('start: ' + ui.item.index())
}
});
temp = files[startIndx];
files[startIndx] = files[updtIndx];
files[updtIndx] = temp;
$( "#sortable" ).disableSelection();
} );
When user clicks on Select Files again, and adds some more files, I am able to show the ul/li with more file names but how do I store reference to previous files to submit them all?
javascript jquery
javascript jquery
asked Nov 20 at 5:38
Karthik
170312
asked Nov 20 at 5:38
Karthik
170312
asked Nov 20 at 5:38
Karthik
170312
asked Nov 20 at 5:38
Karthik
170312
asked Nov 20 at 5:38
Karthik
170312
170312
We need to see your code on how your form submits.
– Daniel Cheung
Nov 20 at 6:21
It is not possible to change the value of a file field using the script, so try to find other solution for this
– Nidhi
Nov 20 at 7:13
one suggestion for achive this is make an array of files and do all upadates on this array, On submit pass that array with your request.
– Nidhi
Nov 20 at 7:22
@DanielCheung, I had two versions of the code, both are not working, one is doing $('#formId').submit() and the other is using the jquery ajax request, in both cases, it is not working. I am assuming the changes made in Javascript are not applying to the form submission.
– Karthik
Nov 20 at 23:48
@Nidhi, I tried with storing in a different array, but the challenge is, the new array needs to be submitted as Ajax request with a new dynamic form. This is making me lose the output set as downloadable file. Do you have a sample where the array can be used to submit the same form or create a new form and simulate form submission instead of Ajax form submission?
– Karthik
Nov 20 at 23:50
|
show 4 more comments
We need to see your code on how your form submits.
– Daniel Cheung
Nov 20 at 6:21
It is not possible to change the value of a file field using the script, so try to find other solution for this
– Nidhi
Nov 20 at 7:13
one suggestion for achive this is make an array of files and do all upadates on this array, On submit pass that array with your request.
– Nidhi
Nov 20 at 7:22
@DanielCheung, I had two versions of the code, both are not working, one is doing $('#formId').submit() and the other is using the jquery ajax request, in both cases, it is not working. I am assuming the changes made in Javascript are not applying to the form submission.
– Karthik
Nov 20 at 23:48
@Nidhi, I tried with storing in a different array, but the challenge is, the new array needs to be submitted as Ajax request with a new dynamic form. This is making me lose the output set as downloadable file. Do you have a sample where the array can be used to submit the same form or create a new form and simulate form submission instead of Ajax form submission?
– Karthik
Nov 20 at 23:50
We need to see your code on how your form submits.
– Daniel Cheung
Nov 20 at 6:21
We need to see your code on how your form submits.
– Daniel Cheung
Nov 20 at 6:21
It is not possible to change the value of a file field using the script, so try to find other solution for this
– Nidhi
Nov 20 at 7:13
It is not possible to change the value of a file field using the script, so try to find other solution for this
– Nidhi
Nov 20 at 7:13
one suggestion for achive this is make an array of files and do all upadates on this array, On submit pass that array with your request.
– Nidhi
Nov 20 at 7:22
one suggestion for achive this is make an array of files and do all upadates on this array, On submit pass that array with your request.
– Nidhi
Nov 20 at 7:22
@DanielCheung, I had two versions of the code, both are not working, one is doing $('#formId').submit() and the other is using the jquery ajax request, in both cases, it is not working. I am assuming the changes made in Javascript are not applying to the form submission.
– Karthik
Nov 20 at 23:48
@DanielCheung, I had two versions of the code, both are not working, one is doing $('#formId').submit() and the other is using the jquery ajax request, in both cases, it is not working. I am assuming the changes made in Javascript are not applying to the form submission.
– Karthik
Nov 20 at 23:48
@Nidhi, I tried with storing in a different array, but the challenge is, the new array needs to be submitted as Ajax request with a new dynamic form. This is making me lose the output set as downloadable file. Do you have a sample where the array can be used to submit the same form or create a new form and simulate form submission instead of Ajax form submission?
– Karthik
Nov 20 at 23:50
@Nidhi, I tried with storing in a different array, but the challenge is, the new array needs to be submitted as Ajax request with a new dynamic form. This is making me lose the output set as downloadable file. Do you have a sample where the array can be used to submit the same form or create a new form and simulate form submission instead of Ajax form submission?
– Karthik
Nov 20 at 23:50
|
show 4 more comments
active
oldest
votes
Your Answer
StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");
StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});
function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});
}
});
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53386860%2fhow-to-change-order-of-files-before-form-submit-jquery-javascript%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
active
oldest
votes
active
oldest
votes
active
oldest
votes
active
oldest
votes
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Some of your past answers have not been well-received, and you're in danger of being blocked from answering.
Please pay close attention to the following guidance:
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53386860%2fhow-to-change-order-of-files-before-form-submit-jquery-javascript%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
We need to see your code on how your form submits.
– Daniel Cheung
Nov 20 at 6:21
It is not possible to change the value of a file field using the script, so try to find other solution for this
– Nidhi
Nov 20 at 7:13
one suggestion for achive this is make an array of files and do all upadates on this array, On submit pass that array with your request.
– Nidhi
Nov 20 at 7:22
@DanielCheung, I had two versions of the code, both are not working, one is doing $('#formId').submit() and the other is using the jquery ajax request, in both cases, it is not working. I am assuming the changes made in Javascript are not applying to the form submission.
– Karthik
Nov 20 at 23:48
@Nidhi, I tried with storing in a different array, but the challenge is, the new array needs to be submitted as Ajax request with a new dynamic form. This is making me lose the output set as downloadable file. Do you have a sample where the array can be used to submit the same form or create a new form and simulate form submission instead of Ajax form submission?
– Karthik
Nov 20 at 23:50