I have a php page with a form that has a textarea input object. The onchange isn't firing and I can't work out why - it should be so simple! I read through many similar questions online, and I tried adding onkey, onblur, and addEventListener (as per the example below), none of which worked.
But then I discovered that my code works fine in a html page but not in a php page. Is there something about php that makes this event fire differently?
Thanks!
<textarea name="Address" ID="Address" onChange="alert('You just changed the textarea.')">xxx</textarea>
</form>
<script type="text/javascript">
Address.addEventListener('input', () => {
console.log("You just changed the textarea.");
}, false);
</script>
Your code have error "Address" on Address.addEventListener(...), because Address is not an object. You need to replace the line:
Address.addEventListener('input', () => {
to
document.getElementById('Address').addEventListener('input', () => {
Change the onchange to onkeyup and will work as you expected:
<textarea name="Address" ID="Address" onkeyup="alert('You just changed the textarea.')">xxx</textarea>
So, I figured out what was causing the issue. There was a plug-in using the textarea object elsewhere in the app that was effecting any change events.
Many thanks to everyone who took the time to reply. Much appreciated!
Related
first my code, all in one .hbs file:
<form id='specialform'>
<input name='about' type='hidden'>
<div id='editor'><p>Type something :D</p></div>
<button type='submit'>Reload</button>
</form>
<script>
var form = document.querySelector('#specialform');
form.onsubmit = function() {
var about = document.querySelector('input[name=about]');
about.value = JSON.stringify(quill.getContents());
console.log('Submitted!');
console.log('Submitted!', 'Serialized:', $(form).serialize(), 'Serialize Array:', $(form).serializeArray());
alert('Open Console!');
return false;
}
</script>
Now when I'm trying to press the submit button while testing, nothing happens instead of the expected console.log(...).
I looked everywhere for an answer, hope you guys can help me. I'm just learning node.js and quilljs and it's pretty difficult.
Thanks for the help. I got the code from this preset https://quilljs.com/playground/#form-submit.
EDIT: Fixed the document.querySelector('specialform') to document.querySelector('#specialform'), still does not work.
EDIT2: Function is now closed with }, just forgot it when copying the code. Problem still persists.
EDIT3:
Made a dummy function:
form.onsubmit = function() {
alert('This one works');
console.log('Submitted!');
return false;
}
Which did NOT work without the return false; statement, but DOES work with it! I changed the original function and included the return, but it still does NOT work sadly.
EDIT4:
I played around with the dummy function some more and have isolated the problem.
It stems from this line:
console.log('Submitted!', 'Serialized:', $(form).serialize(), 'Serialize Array:', $(form).serializeArray());
Can someone tell me why it does not work? :)
One can ignore the problem with that line if one does: function (e) { e.preventDefualt(); ... }, but the change only "goes around"(?) the problem and does not fix it.
EDIT5:
With e.preventDefault() the function works, but there is still no 2nd console.log. So apparently handlebars has a problem with the $(form).serialize(), or I'm just too stupid to see my error. Thanks everyone who helped me anyway!
EDIT6:
ISSUE SOLVED! $.(form).serialize() uses the jquery library which is not that easy to work with in node.js and obviously has to get imported first. I thank everybody who helped me solve it!
try this
var form = document.querySelector('#specialform');
you've missed a hash while using the id selector
document.querySelector needs a valid CSS selector.
document.querySelector('specialform');
is saying, hey JS -- get all specialform elements. If you had <specialform><!-- content goes here --></specialform> elements on your page, then that would work.
Instead, you probably want
document.querySelector('#specialform');
That's saying, hey JS -- get all elements with an ID of specialform.
var form = document.getElementById('specialform');
If you know that you are serching by id than i would use this.
Its faster than query, because it doesnt take care about classes attributes and so on.
And its less error prone if you are unsure about query selectors.
In my opinion the querySelector makes more sense if your structure is more complex.
My friends, the code below used to work in Chrome till version 52.x but in the newest version it does not work anymore. Does any of you have any idea why it does not work?
https://jsfiddle.net/2jtrs2m2/
<input type="text" id="test" />
<script type="text/javascript">
var my_event = document.createEvent("TextEvent");
my_event.initTextEvent("textInput",true,false,window,"T");
document.getElementById("test").focus();
document.getElementById("test").dispatchEvent(my_event);
</script>
Usually when I executed this code, Chrome would insert the character T in the input. I dont want to use document.getElementById("xxx").value = "T" cause in some very specific cases I am working on, I really can only use the code above firing the oninput event which for some reason is not working anymore.
Try using document.execCommand
ie;
document.execCommand("insertText", false, "foo");
I need to save the content of the textarea. I tried onkeyup, it is working properly but it is very heavy and some performance issue and onchange and onpropertychange is not working for me. Can anyone suggest some alternative.
function setMsgSession(){
var newMsg = $('#newComposeMessage').val();
alert(newMsg);
}
<h:inputTextarea id="newComposeMessage" pt:placeholder="Message" pt:maxlength="29000" rows="10" queryDelay="750" minQueryLength="4" onpropertychange="setMsgSession()" >
So I have this little function that takes the value or text input and gives it to an iframe's src attribute. It seems to work great on my codepen, but when I export it (with all of the files etc(codepen style) (jquery and everything is loaded properly) and put it on a server, it doesn't work. Does anyone have any ideas why this might be? or how I could be going about this in a better way? --
this is what shows in the url bar on submit with the live version in chrome if that means anything to you.
http://site.com/?url-input=http%3A%2F%2Fmy-site.com
A working codepen
HTML
<form class="visitor-input-form">
<label for="url-input" >
Type in your current URL and see what your website looks like to almost everyone else.
</label>
<input type="text" name="url-input"
class="currentUrl"
placeholder="http://nouveau.io" id="txtSRC" />
<input type="submit" class="submit-button" value="View site" />
</form>
jQuery
$(".submit-button").click( function() {
$(".i-frame").attr("src", $("#txtSRC").val());
});
Thanks for your time.
Update:
So to further test I'm using this. Page loads, tells me the dom is ready. So everything is loading in order. Then I input the url, it tells me the button was pushed, THEN - it tells me the dom is ready AGAIN. So, when I'm pressing enter, it is reloading the page. I do not want the page to reload. I just want the iframe to get switched out. So that is at least a little window to what might be the problem.
jQuery( document ).ready(function($) {
alert("dom is ready");
$(".submit-button").click( function() {
alert("button was pushed");
$(".i-frame").attr("src", $("#txtSRC").val());
});
}); // end dom ready
Make sure you either execute your jQuery at the end of the document, after the elements already exist in the page, or in the head within a document ready call:
$(document).ready(function () {
$(".submit-button").click(function () {
$(".i-frame").attr("src", $("#txtSRC").val());
});
});
Codepen does the former.
We found this:
Prevent reloading page after submiting form. ( no ajax )
<form onsubmit="return false">
Does the trick, but I have the feeling there is a better answer. I feel like on submit, it should run the scrip maybe instead of on click. I'm going to look into that. <form onsubmit="script"> etc... I'll wait a while before I mark this as answered in the hopes I get something more appropriate, but it is currently working as intended.
The page is reloading, try updating your jQuery to this:
jQuery( document ).ready(function($) {
$(".submit-button").click( function(e) {
e.preventDefault();
$(".i-frame").attr("src", $("#txtSRC").val());
});
});
I am developing webapp using jQuery.
I have functionality that adds new row of 3 input fields. After creating these DOM elements I want to focus one of input fields. I am doing it with calling jQuery focus() function on necessary input field.
Problem is that calling focus() works fine in IE6 and FF3.5, but not working in IE8.
I was trying to make simple working example of this problem for showing it here, but with stripped version of code focus() is working fine. So my guess was that DOM is not ready yet when I call focus() in IE8. For this I tried calling setTimeout('myFocus()',400). I had success and in some of cases focus was really working but still not always. Randomly it does not focus my input field.
Question is: Has anybody faced similar problems and does anybody have any idea how to workaround it? Using setTimeout feels like very ugly workaround.
Tnx in advance
Edited : 26.08.2009
Succeeded to reproduce on simple example. Here is HTML+JS code that reproduces this bug on IE8.
<html>
<head>
<script type="text/javascript" src="js/jquery-1.3.2.min.js"></script>
<script type="text/javascript">
function performChanged() {
formChanged = true;
}
function handleChange() {
var parentDiv = $('#container');
newValue = $(html).html();
parentDiv.html(newValue);
$(".sel1",parentDiv).bind('change',handleChange);
//alert('Uncomment this and after alert focus will be on input');
$("input.cv_values",parentDiv).focus();
}
$(document).ready(function() {
$('.trackChange').bind('change', handleChange);
});
var html = '<div class=\"div1\">\n<select class=\"sel1\" id=\"sel1\" name=\"sel1\"><option value=\"\"><\/option>\n<option value=\"11\">Select me to see problem<\/option>\n<\/select>\n\n\n<input class=\"cv_values\" id=\"sel3\" name=\"sel3\" size=\"30\" type=\"text\" value=\"\" /><br/>Focus should in input field. With alert it is but without alert focus is not there</div>';
</script>
</head>
<body>
<select class="trackChange" onchange='performChanged();'>
<option value=""></option>
<option value="1" >Select me to generate new inputs</option>
</select>
<div id="container"></div>
</body>
To reproduce:
1) select value from first dropdown. You will see that first time input is working
2) select value from second dropdown. You will see that bug is reproduced.
Then in code you can comment out line where it shows JS alert(). Strange thing is that if there is this alert() then after it focus is working fine.
Hope this helps to understand where my problem is.
P.S. I need my app to work this way - it is regenerating those inputs after selecting value from dropdown. This is simplified example of my app ;).
I had a similar problem with my app, but I can't reproduce the focus problem with your code. My problem was slightly different in that my page had a link hash that made IE not give my element focus.
Anyway, to get around the problem I added a timeout:
setTimeout(function () {
$('.my-thing').focus();
}, 100);
Not noticeable by a user but it gives IE a moment to breathe.
In conjunction with Kazys's solution, I found this to fix all my problems (using IE8 & .HTA files):
$("elem").blur();
$("elem").focus().focus();
I have no idea why, but somehow calling focus twice helps IE along.
EDIT:
I have found that calling .show() and .select() can also help.
Strangely i had the same problem and resolved it using plain old javascript like so:
document.getElementById('friend_name').focus();
Using jQuery equivalent $('#friend_name').focus(); didn't work in IE8 :-/
Had similar problem with IE8. I wanted to focus input in dialog when it is opened. Used autoOpen = false. Noticed that focus doesn't work only for first focusable element in dialog. Tried setTimeout but it worked only sometimes. Blurring element before focusing helped me.
$('#dialog').find('#name').blur();
$('#dialog').find('#name').focus();
Since you have not posted any code are you using:
$(document).ready(function(){
//code here
});
This will make javascript run after the html is loaded.
And you should use live events also. When your adding inputs to the dom the will automatically have focus binded to them.
$("p").live("focus", function(){
alert( $(this).text() );
});
This means that every p that is created will have a focus binded to it.
This is the best solution for the moment to set focus:
$('.elt').fadeIn(200, function() {$('.elt').focus();});
This is an old question, but it is top in search, so wanted to update.
I don't know if there was ever a time that it was fixed, but I ran into this issue again today in IE11, using jquery-2.1.3. I found that wrapping the focus call in a setTimeout, as set out by Ponny above, worked best for me.
I did need to increase the timeout in some cases, to get it to work.