Jquery event click html() only works once - javascript

I have a function that when clicking on the element should enter a textarea value, but the function works only by clicking once and then does not work anymore, unless loading the page. How to make the function work every time I click on the element?
I made the function in javascript, but this only works in Firefox and does not work in chrome, so I gave up and tried jquery
$("#element").click(function(){
$("#nameidtextarea").html("<br>");
});
It was expected that when clicking on #element the value "<'br'>" will be inserted into the textarea

The HTML content of a textarea element is the default value, so using it will only change the value if it hasn't been changed by the user.
Do not use html() to modify the value of a form control. Use val().
You are currently setting the value to <br>. That's a replace action, not an insert action.
If you want to insert the data and not erase the existing data, then you will need to read the current value, modify it, then set the new value back.
$("#element").click(function(){
const old_value = $("#nameidtextarea").val();
const new_value = old_value + "<br>";
$("#nameidtextarea").val(new_value);
});

Related

How do I get only the value of current input when prior input values were changed?

I have a modal with an accordion in it. There is an anchor tag for each image on the page that can open the modal window. Inside the modal, the accordion has slide switches where the user can choose to turn on or off a value for that image.
The undesired behavior occurs after one input has changed on a specific image. I am receiving the value of the input values that were previously changed as well.
What I would like to see is for each image to have it own values, that is, the values that were changed specific to that image. I shouldn't see the values from any other image. In addition, if I change the value of a specific image to
true, I don't want to see that value set to true for any other image. I hope this all makes sense. I'm not very savvy with JavaScript but I've tried to explain as best I can.
This is what the JavaScript looks like
$(".glyphicon-tags").on('click', function(){
var iid = $(this).data('iid'); // this is the imageId
$(".onoffswitch ").on("click", function(){
var tid = $(this).data('tid'); // this is the tagId
alert(iid + ' ' + tid);
});
});
Using
$(".onoffswitch ").off("click").on("click", function(){
should fix it.
The way you've got it now, every time glyphicon-tags is clicked, you just keep on adding extra event handlers for "onoffswitch" and never removing the old ones. Next time onoffswitch is clicked, it runs all the defined event handlers. Setting an event handler on an element doesn't remove the old one (unless you're running IE6 or something), it adds an extra one to the existing list of handlers.
The "off" method removes previously defined event handlers on an element. See http://api.jquery.com/off/ for more details of the options you can pass in etc.

Getting the value of autofilled inputs - Jquery

So, as some browsers auto-fill sign in forms, it causes an issue with my interactive placeholders. The placeholder is a <span> element with some text in, which moves above the input itself when focussed. Upon the browser inserting the data it has 'remembered', how would I be able to detect its presence, and it's value?
Please note, that it is the auto-completed value of the input which I wish to grab.
Using the following code, I have managed to achieve the result I wished for:
setTimeout(function() {
console.log($('#input').val());
});
Using a timeout allowed the browser to load itself prior to the code requesting data from it.
Give the span an ID and run the text() method on it. Without any parameters it works as a getter.
var yourtext = $('#somespan').text();
If it was an actual textfield instead of a span, you would get the contents with the .val() method.
var yourtext = $( "#foo" ).val();

How to get all the Form elements, with values, in a popup window

I have one functionality to get the print of current page. So to prepare the content, I am showing everything on one popup up first then later a print popup and then print command.
Trying to do the same with below code.
$('#button').on('click',function() {
var popup = window.open("","mypopup","width=500,height=300");
var html = $("#form").html();
$(popup.document.body).html(html);
popup.print();
});
JSFiddle
Tried with clone() method as well but not working.
So the issue is, I am not getting the element's values in my popup.
Thanks
HI Use simple jquery line for each input field.
You can add a value attribute for your input fields.
I have changed your script a bit. Please refer it.
$('#button').on('click',function() {
var popup = window.open("","mypopup","width=500,height=300");
// I am setting the value attribute in the html . Do this for all fields
// with similar input fields you can have a jQuery('input').each(); loop
$('#name').attr('value',$('#name').val());
var html = $("#form").html();
$(popup.document.body).html(html);
popup.print();
});
Manually send the data from form through ajax call and store it in a local websql (browser)storage which can be retrived in the print preview dialog box

How do I clear a dropdown and input field with query

I have a form that is setup with twitter bootstrap and it's using tabs.
http://jsfiddle.net/mwoods98/DJeqm/4/
If you can see from the exmaple we have:
Edit existing assignments and create new assignments.
If you see on the tab under edit existing assignments, there is a drop down. What will happen is when the user selects an option from the drop down, I submit an ajax request that will go out and grab some information depending on which dropdown the user selected:
function loadQuery() {
var assign = $("#existingAssignment").val(); // Get the value of the select box so we can build the next page
$.get('Pagetoload.cfm?tour_id=' + assign ,{},function(data){
$("#centercontent").html(data)
})
return false
}
$(document).ready(function() {
$("#NewAssignment").attr('val', '');
$("#NewPosTitle").attr('val', '');
$("#NewgetPosOff").attr('val', '');
$("#loadLink").click(loadQuery)
});
The jQuery that reloads the new page is working fine and it sends the information to the center div of that tab. It effectively replaces the div with the information that was returned. So now the edit existing assignment now has new values filled in.
On the other tab "Create New Assignment" There is a form that should have all of it's values set to blank.
I am trying to reset those values right before I call the loadQuery function but when I go back to the page, the values are still there.
Is there another function that I should call or do something different to set those values to " "?
TIA
Use jQuery's built in val() method!
$("#NewAssignment").val('');
you could use .val() or .text() of JQuery. You may want to refer here for more info about JQuery functions http://api.jquery.com/
Try this -
$("#NewAssignment").val('');
$("#NewPosTitle").val('');
$("#NewgetPosOff").val('');
http://api.jquery.com/val/

Clone a file input element in Javascript

I have a file input element that needs to be cloned after the user has browsed and selected a file to upload. I started by using obj.cloneNode() and everything worked fine, that is until I tried using it in IE.
I've since tried using jQuery's clone method as follows:
var tmp = jQuery('#categoryImageFileInput_'+id).clone();
var clone = tmp[0];
Works as expected in FireFox, but again not in IE.
I'm stuck. Anyone have some suggestions?
Guessing that you need this functionality so you can clone the input element and put it into a hidden form which then gets POSTed to a hidden iframe...
IE's element.clone() implementation doesn't carry over the value for input type="file", so you have to go the other way around:
// Clone the "real" input element
var real = $("#categoryImageFileInput_" + id);
var cloned = real.clone(true);
// Put the cloned element directly after the real element
// (the cloned element will take the real input element's place in your UI
// after you move the real element in the next step)
real.hide();
cloned.insertAfter(real);
// Move the real element to the hidden form - you can then submit it
real.appendTo("#some-hidden-form");
Editing the file form field is a security risk and thus is disabled on most browsers and should be disabled on firefox. It is not a good idea to rely on this feature. Imagine if somebody was able, using javascript, to change a hidden file upload field to, lets say,
c:\Users\Person\Documents\Finances
Or
C:\Users\Person\AppData\Microsoft\Outlook.pst
:)
In jQuery fileupload widget there is a file input replace method to get around the change event listener only firing once.
https://github.com/blueimp/jQuery-File-Upload/blob/master/js/jquery.fileupload.js#L769
(_replaceFileInput method in jquery.fileupload.js)
You can apply other method. You have to send real element to an iframe and cloned elements insert to form. For example:
$("INPUT[type='file']").each
(
function(index, element)
{
$(this).wrap("<div></div>");
var Div = $(this).parent();
$(this).appendTo("FORM[name='forIframe']"); // This form for iframe
Div.append($(this).clone());
}
);
If you use this method your form will send file to a server, but only one note, in Chrome an IE inputs with files is reseted.

Categories