I have a javascript capturing signatures and data.
The " are getting lost/cutoff and not conserving. I assume this is a URLEncoding issue.
This is the original.
'<input type="hidden" name="rvnotes" value="' + rvnotes + '"/>' +
And I have tried this, but still no luck. Any idea how to URL Encode the Javascript submission.
'<input type="hidden" name="rvnotes" value="' + encodeURIComponent(rvnotes) + '"/>' +
The trick must be done in <form>.
<form enctype="application/x-www-form-urlencoded" ...>
Related
is it possible to set variable value in html form action?
var serverUrl=homeURL + "/runapp?requestType=Import&subRequestType=importScenario&userName=";
refButton = '<form id="importForm" action="serverUrl" class="userInputForm" enctype="multipart/form-data" method="post">' +
'<input id="file" name="file" type="file" />' +
'</form>';
You mean insert the value of the variable? Why wouldn't it? In this case you're creating an HTML string to return, so something like this should work:
returnedHTML = '<form action="'+JSvariable+'" id="myId>
or
returnedHTML = '<form action="<?=$phpVariable?>" id="myId>
I am building a custom Dropzone.js: http://www.dropzonejs.com/ layout. The upload is working well. I am wanting to save additional data in the form that the Dropzone is in for a specific post.
I need to index the array so that all the data is posted is relevant in the array.
The 'previewTemplate' allows for strings only - no function.
eg: lead_image[ INDEX HERE ][filename]
uploader.dropzone({
url: "/admin/upload",
acceptedFiles: 'image/*',
thumbnailWidth: 80,
thumbnailHeight: 80,
parallelUploads: 20,
autoProcessQueue: true, // Make sure the files aren't queued until manually added
clickable: ".fileinput-button", // Define the element that should be used as click trigger to select files.
previewsContainer: "#previews", // Define the container to display the previews
init: function() {
this.on("addedfile", function(file) {
var index = $('li.image').length;
});
},
previewTemplate: '<li class="image row dd-item">' +
'<div class="col-sm-1 dd-handle">' +
'<span class="preview">' +
'<img data-dz-thumbnail />' +
'</span>' +
'</div>' +
'<div class="col-sm-8">' +
'<p><span class="name" data-dz-name></span> | <span class="size" data-dz-size></span></p>' +
'<input type="hidden" class="form-control" name="lead_image[ INDEX HERE ][filename]" data-dz-name/>' +
'<input type="text" class="form-control" name="lead_image[ INDEX HERE ][title]" value="" placeholder="Title" />' +
'<input type="text" class="form-control" name="lead_image[ INDEX HERE ][alt]" value="" placeholder="Alt Tag" />' +
'<input type="text" class="form-control" name="lead_image[ INDEX HERE ][caption]" value="" placeholder="Caption" />' +
'<input type="text" class="form-control" name="lead_image[ INDEX HERE ][sort]" value="" placeholder="Sort Order" />' +
'<strong class="error text-danger" data-dz-errormessage></strong>' +
'</div>' +
'<div class="col-sm-2">' +
'<button data-dz-remove class="btn btn-danger delete"><i class="glyphicon glyphicon-trash"></i><span>Delete</span></button>' +
'</div>' +
'</li>',
});
I am having difficulty passing the template the index of the current item as these items are passed through later.
Has anyone dealt with this or can see a solution? I am currently trying to inject the file name as the index as a solution, but this isn't the best way to go in my mind.
Thanks in advance for taking the time to help.
bI sorted this in the end.
init: function() {
this.on("success", function(file, responseText) {
console.log(responseText);
// Create the hidden fields
// Created_at
file.createdat = Dropzone.createElement("<input type=\"hidden\" class=\"form-control input-sm\" name=\"" + this.options.inputName + "[" + responseText.id + "][created_at]\" value=\"" + responseText.created_at + "\" />");
file.previewElement.appendChild(file.createdat);
}
}
On the init function, you are basically waiting to hear back from Dropzone of the successful uploaded. So, depending on your server side implementation, you can pass back any data you want about the file. In my case, I stored it in the DB and returned the row's info.
From there, to save that information in in the current post, I just created some hidden fields to store the data and then repeated the above for each hidden field I wanted. You can of course add other non-hidden fields for things like alt tags, titles or anything you like.
The index I was after in the the responseText: this.options.inputName + "[" + responseText.id + "][created_at]
Hope it helps.
As a side note, you can also do the same thing when loading files that have been stored on the server that you want to retrieve for this specific post. Just Google mockfile and dropzone and you should find a million results helping you. Its the same principle.
I've been looking an answer, but I don't find anything.
I got a JSF page with a button. This button call a JavaScript function :
function postAdd(id) {
var quant = document.getElementById("hell:quantite");
$('<form action="addto.xhtml" method="POST">' +
'<input type="hidden" name="productkey" value="' + id + '">' +
'<input type="hidden" name="howmany" value="' + quant.value + '">' +
'</form>').submit();
}
This works fine, I've tested it.
But in my addto.xhtml page, when I call param.productkey and param.howmany, I got nothing.
I used this method on other page and works fine but here, it doesn't work...
Any idea ?
Thanks.
The answer was to add to form inside the JSF page directly and get all parameters with #{function(param[form:idOfInput]}
This question already has answers here:
unterminated string literal error
(4 answers)
Closed 8 years ago.
I'm trying to use javascript/jquery to dynamically add to a form based on responses to previous elements. However, I keep getting an "unterminated string literal" error. When looking at it with colour-coding/highlighting, it looks fine…
Originally I had everything on one line (no escapes), and I got a unterminated string literal error, so I tried escaping new lines, and I got a bad escape error.
Code: http://jsfiddle.net/jshado1/8PTbL/
btw, I looked thru a bunch of older posts, but just found questions from people asking about HEREDOC (which I had looked up previously).
Where is qArray and counter_oneChoice defined?
You'll need to break up the script tags like so:
'<scr' + 'ipt type="text/javascript"> \
$(\'input[name="'+id+'"]\').change(
function(){ counter_oneChoice(qArray, 40);
}); \
</scr' + 'ipt>');'
Otherwise, your jslint errors might just be shortcomings in the linter because of the odd formlation of the code. This is a pretty messed up what to do it.
This is more a remark than an answer but here is a an efficient and readable way to insert big amount of html at once:
make an array
push your markup into the array as strings
join and append
Example:
var id = 0, drug = 'hello', html = [];
html.push('<ul id="' + id + '">');
html.push('<li>In the <span class="highlight">past 12 months</span>, how often did you use <span class="highlight">' + drug + '?</li>');
html.push('<li><input name="' + id + '" type="radio" value="0" />Never</li>');
html.push('<li><input name="' + id + '" type="radio" value="0" />More than once a day</li>');
html.push('<li><input name="' + id + '" type="radio" value="0" />Once a day</li>');
html.push('<li><input name="' + id + '" type="radio" value="0" />More than once a week</li>');
html.push('<li><input name="' + id + '" type="radio" value="0" />Once a week<</li>');
html.push('<li><input name="' + id + '" type="radio" value="0" />More than once a month</li>');
html.push('<li><input name="' + id + '" type="radio" value="0" />Once a month</li>');
html.push('<li><input name="' + id + '" type="radio" value="7" />Less than once a month</li>');
html.push('<li><input name="' + id + '" type="radio" value="77" />I prefer not to answer</li>');
html.push('<li><input name="' + id + '" type="radio" value="99" />Don\'t know</li>');
html.push('</ul>');
$("body").append(html.join(''));
$('input[name="niu12"]').change(function() {
alert("changed");
$('input[name="niu12"][type="radio"]').removeAttr("checked");
var id = this.value;
var drug = $(this).attr("title");
$("#nidu_fq").append('<ul id="'+id+'"> \
<li>In the past 12 months</span>, how often did you use <span class="highlight">'+drug+'</li> </ul>');
}); // done
This works - just keep adding line by line to this.
modified the code a bit. I get errors that some functions are missing.
JS Fiddle Link
I have a simple ui which has a link that says "add item". When this is clicked, a pair of input boxes appears below it. If it is clicked again, yet another pair appears. I'm trying to think of the best way to generate these elements and turn it into some sort of json array of key value pairs (the first input element in each pair being the key and the second input element being the value).
Right now I just have a counter and I generate the ids using it, such as (in the click event of the "add item" link):
$('#features').append('<input id="feature-name-' + self.featureCount + '" type="text" name="asdf" /><a class="delete-feature" data-id="' + self.featureCount + '">Delete</a><input id="feature-description-' + self.featureCount + '" type="text" name="asdf" />');
I don't know what to use as the "name" attributes in order to make it easy to create a json array from them.
you can do something like this without using id attributes.
$('#features').append('<div><input type="text" />
<a class="delete-feature" data-id="' + self.featureCount + '">Delete</a><input type="text" /></div>');
And your javascript,
var yourArray=[];
$('#yourButton').click(function(){
$('#features div').each(function(){
var div=$(this);
var k=$('input:first',div).val();
var v=$('input:first',div).next().val();
yourArray.push({key:k, value: v});
});
});
It doesn't matter what you use for a name attribute, so long as there name and description names are different. Let's say that these elements are all appended to a form with the id myform. Give each pair its own wrapper object. Here, I've used a div, but a fieldset is equally appropriate.
$('#features').append(
'<div class="feature-div">
'<input id="feature-name-' + self.featureCount + '" type="text" name="asdf" />' +
'<a class="delete-feature" data-id="' + self.featureCount + '">Delete</a>' +
'<input id="featurena-description-' + self.featureCount + '" type="text" name="asdf" />' +
'</div>');
Now, it's possible to extract each pair sensibly:
var myarray = [];
$('#myform .feature-div').each(function(i, v) {
myarray.push([
$('input[name=name]', v).val(), $('input[name=description]', v).val()]);
});
Or however you want the data to be presented.