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
Related
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();
I am having some trouble with some javascript and how it can control the html "text box".
First, here's what I have;
javascript:
function UpdateOrder()
{
// enable/disable appropriate buttons
document.getElementById("reset").disabled=false;
document.getElementById("add").disabled=false;
document.getElementById("submit").disabled=false;
document.getElementById("edit").disabled=false;
document.getElementById("update").disabled=true;
// Show display box, 'DispCurOrder'
document.getElementById('all_labels').disabled=true;
}
function EditOrder()
{
// enable/disable appropriate buttons
document.getElementById("reset").disabled=true;
document.getElementById("add").disabled=true;
document.getElementById("submit").disabled=true;
document.getElementById("edit").disabled=true;
document.getElementById("update").disabled=false;
document.getElementById('all_labels').disabled=false;
}
The Idea is simple... I have some buttons and inputs to generate a 'line' of text that get's dumped to the disabled text box. If the operator notices that they made a type-o or want to change something, they click on 'edit order' and it disables all the regular buttons, and enables the text box and 'update' button. The 'update order' button reverses this.
Now, when I just use the add lines to the text box, all works well. You can see each line get appended to the text box (there's another java function that does a bunch of error checking and such, but the crux is that it takes the contents of the text box, parses it on the "\n" to an array, then appends the new line of text. It then takes the array and puts it all together as a new string and puts it back into the text box. Here is that portion without all the error checking stuff;
function AppendOrder()
{
// let's set up an error flag.
var AppendError="";
var str1=document.forms["MyForm"].DataEntry1.value;
var str2=document.forms["MyForm"].DataEntry2.value;
if( /* checking variable str1 for errors */)
{
AppendError="Error in str 1 here";
}
if( /* checking variable str1 for errors */)
{
AppendError=AppendError+"Error in str 2 here";
}
// Display the error message, if there are no errors, it will clear what was there.
$('#AppendStatus').html(AppendError);
if(AppendError=="")
{
// it's all good, update the display
// create line of text
curEntry=str1 + " -- " + str2;
// let's get the current order into a list
str=document.getElementById('all_data').innerHTML;
if(str1=="Empty")
{
// make curOrder = to 1 element array of curEntry
var curOrder=[curEntry];
}
else
{
// parse str1 into an array and parse it to curOrder.
// Then push curEntry on the end.
var curOrder=str1.split("\n");
curOrder.push(curEntry);
}
// now we should have an array called 'curOrder[]'. Let's show it
// on the web page.
$('#all_labels').html(curOrder);
}
}
Now, the problem that I'm having is that after I add a line or two (or more) to the display using the 'add' button and then go into the 'edit' mode (where the text box is enabled) and I make all my changes, the 'add' button doesn't work.
Oddly enough, when I press the 'reset' button (which is just a reset button) it then shows all the adds I did after the edit, and the edited stuff is gone.
Now... to the question... is there something I'm not understanding about the text box? Is there some trick I need to do to get it to work? Am I going about this all wrong? Should I be using a different tool for this other than the 'textbox'?
Any help is greatly appreciated!!
Greg
Found the typo in your jsFiddle.
The first thing that I did was to add:
alert('hi there');
to the very top of the script, inside the $(document).ready() wrapper. Note that on jsFiddle you cannot see the document.ready wrapper, it is invisibly included, so just put the alert at top of javascript block as I did (link to my new jsFiddle is at bottom of answer)
Next, I noticed that you are enabling/disabling several controls by referencing them individually by ID. You can reference several controls at one time if they share the same class, so I invented the class="orderentry" and added that attribute to each of those controls. This removed 8 lines of code, which made troubleshooting easier.
Then, I began deleting/undeleting. First, I deleted everything in the javascript panel except alert('hi there');, and ran the jsFiddle. The alert popped up. Great. So I used Ctrl+z to undelete everything. Next, I selected everything EXCEPT the next block of code, and deleted the selection. I ran the jsFiddle, and again the alert popped up.
I continued deleting/undeleting until I found out where the alert no longer worked -- and that revealed the offending code block. Just had to carefully study the syntax in that specific area and found the error:
$('#txtOrder').attr({'disabled':'disabled')}; <== ERROR: note final parentheses
instead of
$('#txtOrder').attr({'disabled':'disabled'}); <== CORRECT: note final parentheses
Hope this helped, good luck on the rest of your project.
Here is the corrected jsFiddle
You didn't share your HTML, so I made assumptions about what your markup looks like.
Working jsFiddle here
The above jsFiddle is a much simplified version of what you are creating. Obviously, it is very different from what you have done so that I could create it quickly.
Observe how I made certain things happen with jQuery; take what is useful and ignore the rest.
Specifically, you can see how I initially disabled the textarea control:
$('#txtArea').attr({'disabled':'disabled'});
Re-enabled the textarea control for editing, while also hiding the Edit button and displaying the Save button:
$('#txtArea').removeAttr('disabled');
$('#btnSave').show();
$(this).hide();
Importantly, this is how I ensure each addition adds to (rather than overwriting) existing content:
var ord = 'Requested By: ' + $('#txtReq').val() + '\r\n';
Very likely you already know many (most?) of the things I am pointing out, but I have no idea what you know so, again, keep the one or two things you find useful and ignore the rest. I only hope I've managed to hit on the bit that has you stumped at the moment.
I very rarely recommend W3Schools for anything, but look here for their excellent summary / reference of jQuery selectors, events, methods. (Keep hitting Next Chapter to cycle through all pages of this reference).
The problem I have is with an input box not forgetting the first input it gets. It then feeds it back even when the content should have been over written by a new input. The code I am using works fine with IE8 the problem is seen with Firefox 20.0.
I am working entirely in Javascript. There is no HTML beyond a body.
I use this to set up my input box:
addElementWithIdButNoNode("input","manimp","div42"); // add input box
addElementWithNodeAndId("button","Set","div42","setButton"); //add "set" button
document.getElementById("setButton").onclick=showIt;
"manimp" is the ID and the below successfully captures what is entered first time around as "theMainVar".
function showIt()
{
theMainVar=manimp.value;
theMainVar=parseFloat(theMainVar);
alert(theMainVar);
}
The problem is that if you run this again in Firefox you can enter any value you like but the alert comes back with what you entered the first time around.
You can manually sent the "manimp.value" to something else in javascript and it does change but it then stays stuck at this changed value.
I need a "reset manimp so it can accept a new value from the input box function"
I have had a look around and found lots of "reset()" and "clear()" funcitons but nothing works for me.
The same thing happens if I swap the input box for a drop down.
I'm new to Javascript so if the fix seem obvious to you, maybe it is!
Try getting the 'manimp' element inside your function, probably the value is referenced when the function is declared. So, inside your function use
theMainVar = document.getElementById('manimp').value;
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.
I have HTML textareas that 'sometimes' have 'undefined' in the value property - I can't work out what is causing it.
Background: I have a PHP script that generates lots of textareas on a page - each with a unique ID using a counting system. The textareas belong to different forms that appear on the page. It is like an email inbox with a 'quick reply' form under each email.
Sometimes, when the forms are submitted the corresponding textarea value comes up as 'undefined' instead of the actual value the user has typed into the field. Example code:
//Javascript
function quickReply(id)
{
message = document.getElementById('textarea_' + id).value();
//Send 'message' and other details to PHP for handling...
}
I have also tried calling the value with the jQuery equivalent:
$('textarea_' + id).val();
Most of the time everything works as expected, but sometimes the value comes up as 'undefined'. 'undefined' is then send to my PHP code in Javascript and ends up getting saved in the database as the 'reply' which is how the issue is being discovered.
What causes a textarea to have an 'undefined' value property? Anything I can try to resolve this?
This is prob because your dom hasnt loaded yet is your tag in a document ready
$(document).ready(function() {
$('textarea_' + id).val();
});
To select an item by Id in Jquery, don't forget to add the "#"
$('#textarea_' + id).val();
I was able to resolve this issue by using tags to enclose each form (with each form having a unique ID).
I believe it should be possible to consistently access the .value property of a textarea without it being contained within form tags, however it seems Internet Explorer needs it in form tags 'sometimes'.
Not the best answer - but it did solve the issue.