How to make "val()" work in html form? - javascript

I have an online order form which works great! the only thing thats wrong is that i cant seem to find a way to send the input data from the text fields with Naam:, Adres: etc. (which is at the bottom of the code) i found out that i could use this code : $("#txt_name").val(); but it does not work properly. And i don't really know in which function i have to pace de code. Can someone help me? i'm not very experienced with jquery.
working website
javascript without the html

In your code you have the following
$(".txt_name").val();
You are using . as a class selector, you should use
$("#txt_name").val();
With # as an id selector
The first one gives you an array because you are selecting multiple elements and the second one gives you an element. I testet it in the browser console and it returns the value of the #txt_name Naam, but the first one returns undefined since .txt_name does not exist.
The same applies to the other fields, give them and id and you can get their values the same way.

$("#txt_name").val() should return a string which you can store in a variable of pass to a function.
if you want it to return something usefull "#txt_name" must be an input element or an element with a value attribute.
lets say you have a test inpu tag with the id="txt_name" if a user writes something that elements value attribue will be that text, even if you dont see it on the tag itself.
so $("#txt_name").val() will return the value of the value attribute of the htmlElement.

Related

Change Class Name of a div in Jquery after find()

I have a brief quesiton about the nautre of jquery.
I tried to change the class name of an element using Jquery by using the argument below.
var classman=$('body').find('div')[2].className('anything')
body has several different divs and I picked the third one by
using .find('div')[2].
When I logged it, .find() argument spits out the whole html line
and I checked the type of it and console says it's "object"
So I was expecting I could access tot he element by typing like
classman.class
but neither the first approach nor the second approach didn't worked out. What should I do to change the second element and the change the class?
Thank you in advance.
I'm not a heavy user of Jquery but Just curious about it and wanted to know how to do it as a basic knowledge.
To add a class in jquery you can do this as follows:
$('body').find('div').addClass('name')
console.log($('body').find('div').attr('class'))
<body>
<div class="test">
</div>
</body>
To get the classes of an element we use attr ('class') in jquery.
In your example you said you wanted to take the second element, to do this use the method eq, (eq. (1))
Example:
$('body').find('div').eq(1) // Get second element

jQuery .find() not working correctly

I'm trying to allow some text of <p> (the comment) to be editable when the user clicks on 'Edit'.
function editComment(commentid,replyid){
$('#comment'+commentid).find('.comment-text').attr("contenteditable='true'");
}
However this is giving me an error (undefined) and I'm not sure why, as .comment-text is a child of #comment88? I'm probably missing something really simple
Your HTML DOM and jQuery looks fine and legit, however the attr function would cause a trouble. I would suggest that you apply the style using this,
$('#comment'+commentid).find('.comment-text').attr("contenteditable", true);
This will apply the attribute to your element.
Description: When you use attr() function to add or update the attribute value, you pass two parameters. One as a key and second as the value for that attribute (key). If you pass only one, it will return that attribute's value. This is the problem that gets raised in your case, the find function is working, but in the final function, instead of applying that attribute it returns the value (false IMO).

Getting Element Value

I have been trying to solve one issue for about 2days.
Let's imagine I have this kind of Html element in my code (actually anywhere in my code)
<p id='el'>some values</p>
If I want to get the element by id I can write this kind of js code
getElementById('el')
But How can I get the value inside of p
Actually I'm working on Angularjs code and I tried to get the element by id by writing
angular.element('el') //but it not worked
Is there any good or better ways to get the element value?
Please share your ideas. Also if possible not jquery solvings.
Thank you
angular.element uses the 'css query' syntax, so you need '#el' to select element with id 'el'.
In general you could probably use a two way binding (<p>{{values}}</p>) but I don't understand your situation

how to change the value of <span lang> in javascript?

i have an element in html as shown below.
<tr><td class="HELPTEXT"><span lang="HLPMTXT1" id="HLPMTXT1"></span></td></tr>
i want to change the value of lang according to particular condition.
I tried as given below.but its not working.
<script>
document.getElementById("HLPMTXT1").lang ="HLPMTXT2"
</script>
Could anyone help me for changing the value of lang attribute of span?
You should use setAttribute(name, value) to do that, so your code would look like:
document.getElementById("HLPMTXT1").setAttribute("lang", "HLPMTXT2");
You can also use getAttribute(name) to retrieve the value using JavaScript.
https://developer.mozilla.org/en/DOM/element.setAttribute
https://developer.mozilla.org/en/DOM/element.getAttribute
Edit: It's also possible that your script is not working because you're trying to access the element before it exists in the DOM. Best way to insure that your element exists is by either: a) putting your script tag after the element, b) using the unload event to delay execution of your JS until everything is loaded, or c) use the DOMContentLoaded event. The latter, however, is a bit tricky to get to work cross-browser (without reusing somebody else's code that already addresses those problems) so you might want to read up on it first.
document.getElementById('HLPMTXT1').setAttribute('lang', 'HLPMTXT2');
Not all attributes can be accessed through the object properties

Changing an ID using JQuery

I'm trying to change the ID of an element here:
http://moemonty.com/chirp/CHIRP-JSON-test.html
By using this line:
$('.databaseID').attr('id', 'test');
I would like to change the id of this line to test, so I can proceed to put in a pre-fix via a string and a variable from JSON data. But for now, I just wanted to see if I could replace it with test at this line:
<li class="databaseID" id="np-44701">
Thanks in advance.
Yes, you can change the ID of an element with $().attr(). The code you give will work, but you should ensure that you only change one element:
$('li.databaseID:first').attr('id','test');
On the other hand, I'd urge you to think this through so you're sure that you really need to change the id of an element. I can't quite imagine the circumstance where it would be necessary.

Categories

Resources