javascript value to input box - javascript

I have a plugin that I am trying to grab the the number of the current slide which will then be written to a input box with the ID of "input1" each time the slide is changed. Does my syntax make sense?
function currentSlide(){
var current = $('#slider').data('AnythingSlider').currentPage;
document.getElementById("input1").innerHTML=current;
};

If input1 is an input (as the name implies) use:
document.getElementById("input1").value = current;
Or to use jQuery only:
function currentSlide(){
var current = $('#slider').data('AnythingSlider').currentPage;
$("#input1").val(current);
};

If you're trying to change what is shown in an <input> elemnt, set the .value, NOT the .innerHTML.
Think about it. Do you write <input>Blah blah blah</input>, or do you write <input value="Blah blah blah" />? JavaScript treats elements the same way HTML does.

function currentSlide(){
var current = $('#slider').data('AnythingSlider').currentPage;
$('input1').val(current);
};
If you're using jQuery, I recommend sticking with jQuery selectors throughout your code. I've updated line 3 to use jQuery to select input1. Instead of using innerHTML, use jQuery's val function which will set input1's value to the currentstring.

Related

How to get html element after append with pure JavaScript?

I found some JQuery solutions, but I am limited by school task restrictions to use pure Javascript, and I need to use specific early appended element that is still not in DOM for replacing by my CKEDITOR.
Code:
function newOption(){
...
mainUL = document.getElementById("myUL");
var inputA = document.createElement("input");
inputA.type ="text";
inputA.style = "margin-right: 45px";
inputA.name = "option[]";
inputA.id = inputID;
mainUL.appendChild(inputA );
CKEDITOR.replace(inputID).setData('Type anything you want ...');
...
}
By replacing my input with CKEDITOR will JS fail, because input, commonly, is still not in DOM. I tried to use
mainUL.innerHTML += "all elements like html text";
and this is working and will immediately insert elements into DOM, but I can't to use innerHTML, because it will remove old listeners (for example checked checkboxes that JS will set from checked to unchecked, what is my main problem due to I have to try using append DOM function).
Try changing the code to wrap the call to CKEDITOR.replace in a setTimeout:
setTimeout(function() {
CKEDITOR.replace(inputID).setData('Type anything you want ...');
},0).
This will allow the browser time to insert the element before trying to replace it.
And I assume that inputID has a valid value in it...

jquery: get value and id of textbox when it changes

I'm a Jquery noob, very much in the learning stage.
This is my fiddle:
http://jsfiddle.net/4tjof34d/
(Double click any of the three dots to get a textbox in the above fiddle, then enter a value in that box and press enter)
As you can see it works but how do I get the id and value when the user puts a new value into the textbox?
Basically, I need to get the value in to something like this:
var theId = $(this)id;
var newValue = $(this)value;
// console.log(theId+" "+newValue+ " "+savedData);
so I can make an AJAX call to update the DB with the new value/s.
If you could put a comment in the code as well, for example:
// ajax call here
that would be appreciated as well!
I notice you're using jQuery, but it's actually easier to get the values without it:
var showText = function() {
console.log(this.id);
console.log(this.value);
}
However, to get the values with jQuery, simply use attr() and val():
var showText = function() {
// Cache $(this) since we're
// using it more than once.
var $this = $(this)
console.log($this.attr('id'))
console.log($this.val())
}
You can use plain JavaScript as follows:
var theId = this.id; //or $(this).attr('id');
and
var newValue = this.value; //or $(this).val();
THE HOW & WHERE
var showText = function () {
$(this).hide();//show text
$(this.nextElementSibling).show();//hide input
$.ajax({
url: '....',
data: {id: this.id, value: this.value},
....
});
};
With Jquery for any input element you can use .val() function . So your syntax will be like
$("selector").val();
Now the syntax for this selector will keep on varying. For ex - if you want to get value for any specific id for an input element you use "#". So if you have an input field with an id of "testId" you will be doing
<input type="text" id="testId" class ="testClass"/>
$("#testId").val();
In place of id if you want the same value but with the help of class attribute you will be doing
$(".testClass").val();
Now if you have some other fields other than input fields you should ideally be using .text() for them.
So if you have a div with an id of testDiv you just need to do
<div id ="testDiv" class="testDivClass">Test</div>
$("#testDiv").text();
$(".testDivClass").text();
Just an advice, since you are learning jQuery right now refrain yourself from using hybrid things (mixing core javascript) just for the sake of finishing all the work. This way you may have to spend some time in learning things but ultimately you will be learning things in much better way
Hope this be of some help.
Happy Learning
use .attr() and .val() to get attribute and value:
$(this).attr('id');
and
$(this).val();

How to get link text using jQuery?

How can I get link text using jQuery?
My link is:
google site
I need to get "google site" using jQuery.
That is the text shown to the user in UI not the name. To get that you use a jQuery's text method.
Use the .text() method as
$('a').text();
Even you can use a variable to get the value to, for example:
var hyperLinkText = $('a').text(); // get the name
$('element').html(hyperLinkText); // write it somewhere
If you means the href value of your anchor, then you can use .attr():
var href = $('#id1').attr('href');
or .prop():
var href = $('#id1').prop('href');
If you want to get the text inside anchor, you can use .text():
var text = $('#id1').text();
you can try with this:
var linkText=$('#id1').text();

Identify Hidden Form Value Without an ID or Class

I am writing a Greasemonkey script and I need to be able to take the value from a hidden form element and set it to a variable.
The hidden form value looks like this:
<input type="hidden" name="ASIN" value="B009MO89Y4" />
I have no ID, class, or any way I can see to set the "value" to a variable. This needs to work dynamically and I currently have no way to establish a class or ID to this value.
Is there a Javascript (or jQuery) method to set this?
In other words:
Find "input" with name "ASIN" and set .val() to a variable?
This selector and assignment:
$("input[name='ASIN']").val(); <---- returns value of that input
var inputVal = $("input[name='ASIN']").val(); <-- Assigns it
var temp = "Stuff";
$("input[name='ASIN']").val(temp); <----Assigns the value of the temp var.
You can use the jQuery attribute equals selector
$('input[name="ASIN"]').val(foo);
You can select it via. name in jQuery like so:
var bar = "Example"; // Example text, to be used in val().
var x = $('input[name="ASIN"]').val(bar);
// Sets the variable x to be the value bar for the input with the name ASIN.
Here's a working jQuery jsFiddle.
In pure Javascript *:
var bar = "Example";
document.getElementsByName("ASIN")[0].value = bar;
Here's a working Javascript jsFiddle.
*Please note that although document.getElementsByName is supported well in Firefox, Chrome and Safari, it has limited browser support. in IE and Opera.
Like this:
$('input[name="ASIN"]').val();
Var:
var hiddenAsin = $('input[name="ASIN"]').val();
You can filter your selection with any attribute.
$('input[name=ASIN]').val("New Value")
You can use selector that targets inputs of type hidden. It should look like that:
$('input[type=hidden]');
or simpler:
$(':hidden');
Use this method
var inputs = document.getElementsByTagName('input');
for(var i = 0...)
{
//go through each input and look for the name "ANSI" and the type is hidden.
//and do your changes.
}
this is for javascript remember.
with this you should be able to get that specific hidden form without an ID nor a Class assigned to that specific form.
For pure javascript:
Try document.getElementsByName('name').
Note that cmptrgeekken pointed out that this has limited browser-support (although that would not be an issue with greasemonkey in FF).
As an alternative, if that hidden element has a fixed place you could also access it by index-number in a predictable collection that you got from knownParent.getElementsByTagName('tag')[#] (So the first hidden inputtag inside a form would be number 0).
Another variation is to get (again) knownParent.getElementsByTagName('tag') and loop over that collection to see what element has the 'name' attribute set that you seek.
Simply do:
var target=knownParent.getElementsByTagName('input'), L=target.length;
while(L--){ if(target[L].name==='name'){target=target[L]; break;} }
alert(target.value); //target is now the element you seek.
Example fiddle here.
Good luck!

How to check input tag have only tag(<br/>) inside as value using jQuery

Check input tag which have value only as <br/> tag inside as value using jQuery
I am using an htmlEditor in my project, sometimes user just press enter key only in textarea field. It will get as <br/><br/><br/><br/> as value when saving.
I want to avoid this tags when saving.
How to validate this in jquery ?
If any other characters like <br/>Just <br/> Example <br/> is present then I want to save it with break tag itself.
using a regex like this would help.
/^(\<br\/>)+$/.test($("textarea").val());
Clean it like this:
// Get the HTML and remove <br /> variants
var htmlCleaned = $('#MyTextArea').val().replace(/<br\s?\/?>/, '');
Refer LIVE DEMO
var divTag = $("div");
var nDivTag = $(divTag[0].outerHTML);
$("br", nDivTag).remove();
alert(nDivTag.html());

Categories