Im working for a school project and Im stuck and I was not able to find a script snippet or an answer to my problem in google.
After uploading an image the script shows the thumbnail and the link to that image inside a text field.
<input type="text" id="imlink" name="imlink" onclick="s(this);" size="70" value="'.SURL.''.$imagesfolder.'/' . $bigboy . '">
My problem is that when I upload 10 images it takes too much time to copy each field, so what I want to do is to show the "value" of all those 10 text inputs into one single textarea.
<textarea>
my_image1.jpg
my_image2.jpg
my_image3.jpg
my_image4.jpg
my_image5.jpg
</textarea>
Is there any solution for my problem ?
thanks in advance !
The .value property can be used to extract the values for each <input /> field. These values can then be inserted into the <textarea />:
var values = "";
$("input").each(function(i) {
values += (i > 0 ? "\n" : "") + this.value;
});
$("textarea").val(values);
Demo.
(This can be wrapped in a function and attached as a "change event handler" on the <input /> elements.)
Related
I'm trying to change/input the value of in wordpress contact form 7 using javascript. I found that the form id can be identified in 3 ways
<label> [text your-name id:poo] </label>
<label id="poo"> [text your-name] </label>
<label> [text your-name html_id:poo] </label>
In all three ways, i tried the javascript method
document.getElementById("poo").value = "Jonny"
but the javascript code doesn't seem to have any effect on the form when displayed on the webpage. Any idea on how i can go about this?
I also did place the code in the form editor field, if that is a wrong section to write the code which may be the cause of it not being executed, please specify. Thank you
I've been able to figure out a way to resolve it and i guessed posting it here might help.
I checked the source code (ctrl + u) of the page where the contact form tag is located and I noticed that each tag is converted to an HTML language.
E.g
<label> <[text your_name id:poo ""] </label>
this will be converted in the page and display in the source code as
<input type="text" name="your_name" value="" id="poo" />
So the javascript code does not have to be placed on the contact form editor. Rather, it should be place on the page where the contact form short code is located: below is an example of the short code
[contact-form-7 id="289" title="Your contact form"]
So in the page where the short code is located, you can now use;
document.getElementById("poo").value = "jonny"
This will alter the value of the text field within the label tag.
Try this:
document.getElementById("poo").innerHTML = "Jonny"
I must be missing something very obvious with this but when I try to pass text into an input field, the script doesn't fail but it also isn't entering text into the text field. If it makes any difference, the text field will only accept numbers.
This is the html
<input type="number" class="form-control au-target form-control-warning" value.bind="bidAmount & debounce:500 & validate" au-target-id="126" placeholder="Enter Amount">
This is how I try it on my page object file
var amount = 60;
return element(by.valueBind('bidAmount & debounce:500 & validate"')).clear().sendKeys(amount);
I've also tried by.cssContainingText() and by.css() but neither are working
You can try,
$("input[placeholder='Enter Amount']").clear().sendKeys('hello');
or more explicit
element(by.css("input[placeholder='Enter Amount']")).clear().sendKeys('hello');
Do you get it with :
$('input[type="number"][class="form-control au-target form-control-warning"]').clear().sendKeys(amount);
Basically what my problem is that I have a input field and text area like so:
<input type="text" placeholder="Your URL*" id="userURL" ng-model = "usermodel"/><br />
<textarea id="final">{{usermodel}}</textarea><br />
So my problem is that text will be manipulated via controller, and I want the user to be able to type into the field WITHOUT the textarea refreshing.
For example:
controller: {
textareaoutoutput = "hi ..... How are you";}
textarea: hi {{usermodel}} how are you? <br>
input field: john
BUT when I type into the field, "Hi how are you" gets removed, and only the text field input is shown. I would like it so that the "Hi how are you" is fixed and will not change while the user can enter and still see it add instantly.
I hope that makes sense
inside controller :
$scope.textVal = " hi "+ $scope.usermodel + " how are you?"
<textarea id="final">{{textVal}}</textarea><br />
I hope you can understand it always try to function for the manipulate string
or
<textarea id="final">Hi {{usermodel}} how are you!</textarea><br />
hm, I am not sure if this will work.
the controller is going to output text to the text area, but I want the angular expression tags {{x}} to be in the middle of the the document will be outputting
Maybe this example will be better
textarea:
TEXTA + {{angular expression}} + TEXTB
is it possible to output data to text a and text b and have a user still add something to the {{x}} without refreshing the textarea
Hello first of all sorry if Im not explaining very well but its difficult even to me. What Im try to do its get the value from an input to after that print that value into a label.
Here is what I have
Code Example
I show the preview of the image with a input down, I want to get the text that user types in that input.
<div class="col-lg-12">
<label for="files" class="hidden-print">Select multiple files:</label>
<input id="files" class="hidden-print" type="file" multiple="multiple" />
<output id="result" />
</div>
If have questions about something please let me know and again sorry if I not much clear.
It would be relatively simple, just fetch and add an event listener after you have inserted the element into the (D.O.M.). In this case, you would add (right after output.insertBefore(div, null)):
// fetch the element
var input = document.getElementById('txt')
// attach an relevant event listener to it
input.addEventListener('input', function (event) {
console.log(event.target.value) // what ever is typed
});
Here is your updated fiddle: https://jsfiddle.net/xLopjwh9/2/
I hope that helps!
I have a problem with my dynamic form. This input is:
<input type="text" class="form-control" placeholder="EX: (XX)-XXXX-XXXX" name="phone[]" id="phone">
This input have a mask
$('#phone').mask('(00)-0000-00000');
Everything works fine, but when I add a button who append a new input after the first the .mask filter doesn't work to the new .
How can I apply a dynamic mask in an dynamic form?
The .append function is:
$('#plusPhone').click(function(){
$('#appendPhone').append("<div class=\"row\"><div class=\"col-md-6\"><div class=\"form-group\"><label class=\"control-label col-md-3\">Phone</label><div class=\"col-md-9\"><input type=\"text\" class=\"form-control\" placeholder=\"EX: (XX)-XXXX-XXXX\" name=\"phone[]\" id=\"phone\"></div></div></div></div>"); });
You will have to add it dynamically just like this.
This is an untested code but the idea remains the same.
$('#plusPhone').click(function(){
$('#appendPhone').append("<div class=\"row\"><div class=\"col-md-6\"><div class=\"form-group\"><label class=\"control-label col-md-3\">Phone</label><div class=\"col-md-9\"><input type=\"text\" class=\"form-control\" placeholder=\"EX: (XX)-XXXX-XXXX\" name=\"phone[]\" id=\"phone\"></div></div></div></div>");
var code = "<script>$('#telefone').mask('(00)-0000-00000');</scr"+"ipt>";
$('#appendPhone').append($(code)[0]);
)};
Here is an example of how to execute js by appending it dynamically in htmls - enter link description here
This way you can append the code snippet to dynamically created htmls. Hope it helps
Pamio is on the right track. But appending the script to the page doesn't seem to work(?).
The following works for me:
$('#plusPhone').click(function(){
var HTML = 'this contains an input field with the class you want to mask';
jQuery('#element-you-want-to-append-to').append(HTML);
jQuery('.class-you-want-masked').mask('99-99-9999');
//Just call the mask AFTER appending the input, and it should be applied.
)};