How to get value of 'this' inputbox? - javascript

I am writing a web application where the user clicks on a div, that is holding a input text box with predefined text in it. When the user clicks on the div the code is then printed in a separate text box. I am trying to write a function that grabs the value of the the clicked on div's text input. I have it working by clicking on the input box itself by using $(this).val(); but I want to click on the div and then it essentially gets the value of (this)('input[type=text].provided_code').val();
is there a way to say the text input inside this div? There are like 20 div's on the page with 20 inputs in each div, and each have the same class name etc.

Yes you can specify the selector context:
By default, selectors perform their searches within the DOM starting at the document root. However, an alternate context can be given for the search by using the optional second parameter to the $() function
Documentation:
http://api.jquery.com/jQuery/#jQuery1
So you code could look like this:
$('input[type=text].provided_code', this).val()
Performance:
http://jsperf.com/jquery-find-vs-context-sel/38

Yes, you can do:
$(this).find("input[type='text']").val();
Assuming that there is one input of type text inside that div.

Instead of (this)('input[type=text].provided_code').val();
you should use a correct jQuery with the find function.
$(this).find('input[type="text"].provided_code'].val();

You can use find - Although, you cannot target a specific input on click of your div unless that input has a unique class or id.
$('div').on('click',function(){
var value = $(this).find('input[type=text].provided_code').val();
})

Related

javascript - input type = radio disappears when changing text

Im trying to change the text of a radio button.
In the beginning I got this:
but when I change the text with jquery I get this:
I tried $('label[for=id_players_choice_0]').text(x) and $('#id_players_choice_0').text(x) when x is my new value.
As you can see here http://api.jquery.com/text/#text2, jQuery text method changes the content of element. It results in removing all child elements and replacing it with the value of the parameter string used in text(string) method.
You should put the text content into separate element and edit its value by the text() method.
For example create a span element inside the label and use $('label[for=id_players_choice_0] span').text(x)

Updating the value of a Brazos Input Text control client side

We have a CSHS with a Data Table and Global Filter exposed. After entering a value in the filter and limiting the table, they want to be able to click a button that opens a modal and have it available in an input text in the modal and, by doing so, have it bound to a local variable in the CSHS so it can be used in scripts.
I am able to get the value to show up in the modal (code a bit kludgy but it works) but the input text on the modal doesn’t seem to think it has changed and isn’t binding the value to the variable bound to the input text. Suggestions?
Here’s the code I’m using to get the Global Filter text to display on the modal input text: (added a class name of “searchValue” to the input text in the modal – only one data table on the CSHS so I can use the [0] index of getElementsByClassName)
var el = document.getElementsByClassName('searchValue')[0];
el.getElementsByTagName('Input')[0].value = document.getElementsByClassName("dataTables_filter")[0].firstChild.firstChild.nextSibling.value;
Try calling the jQuery .change() on the input text field after changing the value.
For example:
$("#input_div_1_1_1").val("test").change()

selecting last square bracket input element in collection

This here JSFiddle: http://jsfiddle.net/3pLqa5n0/
The result contains an input element and a textarea element.
Each time you click on the first input element, it appends another input element and textarea element.
However, I want this to only happen when one clicks on the last input element (not the first).
In the code, I have done:
$('#deleteandadd input[name="inputName[]"]:last')
But the ':last' is obviously not working. How may I make this work?
Aside: when we use square brackets in element names, to send data to PHP, are these technically arrays?
Try to use event delegation at this context, since the last input element may differ every time when you append a new set of elements.
$("#deleteandadd").on("click",'input[name="inputName[]"]:last',function() {
DEMO

How to do a live update to an HTML form using javascript

I need to live update a text field in html using javascript, that is as the user is typing text in one field, the contents are being displayed in another as they type. i need just a short code snippet to do that. eg as a person is typing their name, the name is being typed one letter at a time at another position on the screen.
Give the two fields an id each, then use something like this:
document.getElementById("field1").onkeyup = function() {
document.getElementById("field2").value = this.value;
}
All it does is bind an event listener to the onkeyup event, which fires every time a key is released. In the event listener, it simply copies the value of the field which received the event to another field, specified by id.
Here's a working example.

Running function only if a certain element isn't burring

im making an application that creates a text input where ever you click. I was having a problem where whenever you would click inside the field another text field would appear but i managed to fix that. I have one last major issue that I just can't solve. I know ou can't use blur() and focus() as arguments (though it would be nice) but i need to find a way so that after you enter text into the input field and out click, it just blurs the input box and doesn't create another until the user clicks again.
Just create a variable to keep track or only use a certain ID for the input you create, then check for that variable or input element before creation..
if(!$("#myDynamicInputElement").length){
//TODO: Create your element..
}

Categories