Getting the value of autofilled inputs - Jquery - javascript

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();

Related

Jquery event click html() only works once

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);
});

Content added by jquery is cleared after pressing submit

This is my code which I am currently working on. I have to display the value passed by the user. In here I am displaying only a string which I will modify afterwards. When I click the add button I get some strange code in my alertbox. This is the fiddle which I have made while running fiddle I am getting shell form doesn't validate. May be my code have some problem. Here is the code which I get in my alertbox.
In the console I am getting a warning:
The character encoding of the HTML document was not declared. The document will render with garbled text in some browser configurations if the document contains characters from outside the US-ASCII range. The character encoding of the page must be declared in the document or in the transfer protocol.
Please help me sorting this out.
Thanks
Dibya
Follow up: I have missed to mention. After clicking Ok button the text disappears in the div. What causes this? How can I prevent?
you mised the function call with () that's why you get displayed the jQuery function for val.
this fiddle is working because I added () to the var x = $('input[name="time"]').val; code.
It should be
var x = $('input[name="time"]').val();
$('input[name="time"]').val refers to the val function and alert(x) in that case returns the string representation of val.
In order to call the method val and retrieve the returned value you need to use val().
Demo: Fiddle

basic live text input without html <input>'s

I'm trying to start a project that requires that the javascript know every word that's typed in. An example of something I would try to accomplish would be that you would type 4 + 4, the interpreter on the webpage knows what you mean, and automatically puts = 8 on to the end of that line to show it's computed it, without having to submit anything or press any button.
I've looked into the element, but I don't want to reinvent the wheel or go against what the spec says. With putting a <textarea> as input on top of a canvas, the javascript on the page can only know what is in the textbox when the user submits the text. Is there anything out there that would help with this?
Thanks in advance!
To get the value of a textarea you can just access it via the DOM:
var textArea = document.getElementById("id-of-textarea");
To the textarea you can attach different eventlisteners, and in your case I would use onkeypress
textArea.onkeypress = function () {
var ta_value = textArea.value;
alert(ta_value);
}
Of course you'd have to write your own interpreter, I wouldn't recommend running eval on the input...
try adding a hidden input element and give it the focus when the page load is complete, and use the onkeyup handler to do whatever u want.

Getting HTML with the data using jQuery

I have a form which has many elements (e.g. textarea, input, select), after users have entered some data the states of these elements should change.
For example, an input[type="radio"] element will have the attribute checked="checked" if a user has checked it. The value attribute of an input[type="text"] element will contain the text entered by user.
The problem is that the html string returned by $('#form1').html() does not contain these data.
Feel free to take a look at this example:
http://jsfiddle.net/cmNmu/
You can see that no matter what your inputs are, the html returned is still the same (having no attribute data).
Is there any easy way to collect the html including their states?
Thanks in advance.
use below code getting the value of input type text via jQuery
alert($("input:text").val())
Maybe you could use the 'onblur' event handler to set the value of the element when you leave it
You should get the value using :
$('#form1').find(':input').val();
$('#form1').find(':radio[name=gender]:checked').val();
if you have multiple input then you can filter them bu their name or class or even id. Then you will need to select input using .find(':input[name=input_field_name]'). My Suggestion is : use name property instead of other property if you want to use form.
People usually use $('#form1').serialize() to get the values. If html() doesn't return both the source and data, I don't think that there is something you can other than manually constructing the full html by looking at the data.
Live demo: http://jsfiddle.net/cmNmu/6/
By using the jQuery formhtml plugin written by gnarf:
jQuery html() in Firefox (uses .innerHTML) ignores DOM changes
The changes in the input elements can be reflected in the html string returned by formhtml().
Thank you very much everyone.

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