I have multiple textboxes on my page, their ID starts with 'Text' and followed by a random string like this 'Textc0816e05-d7c0-4acc-b233-bef152781cac', How can I have the textbox' value selected when user click on it?
$('input[type=text][id^=Text]').on('click', function() {
console.log(this.value);
});
You can get the clicked textbox value with following code
$('input[type=text][id^=Text]').on('click',function(){
var value = $(this).val();
//do what ever you want with the values
});
You can check the Attributes start with selector doc.
Related
I' ve a button, so when user clicks it, it should alert range selected. If user didn't change the range selected (slider) default value 1 should be alerted.
Why is not alerting it?
Codepen:
https://codepen.io/ogonzales/pen/abNQXLg
Error: it should only alert 1 value:
JS:
$('#step_one_siguiente').on('click', function () {
let val = this.value;
alert($("#performance_options").prop("selected", true).text());
});
Here is a workaround that might be helpful.
let ranges = ['1080p','1440p','2k']
$('#step_one_siguiente').on('click', function () {
var index = parseInt($('input').val()) - 1
alert(ranges[index]);
});
I think it is because the way you use the syntax of the datalist is incorrect.
Values are not meant to be between the option tags but only in the value="" attribute.
However for this to work, the input value would need to match the list value, which is not compatible with a range control as the values you want are not a sequence.
https://www.w3schools.com/tags/tag_datalist.asp
Based on Ibrahim question, I was able to come up with:
Apparently I don't have to search for a selected range, as it only returns the value of the selected one.
<script>
$('#step_one_siguiente').on('click', function () {
alert($('[type="range"]').val());
});
</script>
I've got a text box (called SMS) which is capable of having its value changed by selecting a button (addButton). See the JavaScript
<script>
$(document).ready(function(){
$(document).on('click','.addButton',function(e){
e.preventDefault();
var search_val = $(this).attr('data-value');
$('.sms').val(search_val);
});
});
</script>
I want to be able to add multiple values to this text box without the text boxes value completely updating each time.
For example:
A user can write: hello, your name is (user select 'Name' button and value is inserted'. Your address is (user selects address button).
With my current solution, any button clicked will remove all value form the text box and just insert the value of which ever button was pushed.
Use the function to update it's value:
$('.sms').val(function( index, value ) {
return value + search_val;
});
hi everyone i have a problem.
i have a multiple selection and i want to select something and put it into an input through a button i hope i have been clear :
i manage to get the select item with this jquery code :
var chosen= $('#droite option:selected').val();
droite is an id for the multiple selection
and i want to put it into the input wich has an id : chosen item here is my jquery code:
$("#chosenitem").prepend(chosen);
and it won't work do you have any idea why .?
You need to call val() on the select itself, not the options it contains:
var chosen = $('#droite').val();
Similarly, to set the value of the #chosenitem input, use val() with a parameter:
$("#chosenitem").val(chosen);
Note that if multiple options are selected in the #droite element, the value returned will be a comma delimited string, eg. foo,bar,baz.
You should call val() to set the value of #chosenitem
$("#chosenitem").val(chosen);
I have 3 inputs (autocomplete's of JqueryMobile).
Using this function:
$('.ui-input-clear').attr('onclick', 'delete_email();');
I add onclick event to each clear button, but what can I do for ONLY delete the input of the same button?
Example:
[<------INPUT------>] [BUTTON] //If I click, the value of THIS input turns ""
[<------INPUT------>] [BUTTON] //If I click, the value of THIS input turns ""
[<------INPUT------>] [BUTTON] //If I click, the value of THIS input turns ""
Since you are not providing the code for delete_email(). Give all inputs unique id's, then:
$('.ui-input-clear').click(function() {
delete_email($(this).attr('id'));
});
And modify your delete function to take an id parameter, then use this id to identify the input that needs to be deleted.
$(document).ready(function(){
$('.ui-input-clear').click(function(){
$(this).prev().find('input').val('');
});
});
jsFiddle for reference:
http://jsfiddle.net/UxQV7/
What I'm trying to do is if the user clicks on "Add" on the 2nd row, the new form element is displayed underneath.
The user then types a number in that new form element, clicks the "Add" button and then that number will be populated in the Serial# input of the 2nd row and the new form element then is hidden.
The part I'm having trouble is once the user types in the number to that new form element, how do I know to send it back to the 2nd row.
Thanks very much.
You could do:
var index;
$(".addSerial").click(function(){
index = $(this).closest('tr').index();
console.log(index);
$("#serialAdd").toggle();
});
$("#submitSerial").click(function(){
$('table tr:eq('+index+') input:first').val($("#serialToAdd").val());
$("#serialAdd").toggle();
});
fiddle here http://jsfiddle.net/qWGKq/
You're going to have to store a reference value somewhere (in a global variable, for example) to indicate which <a> was clicked to display the Serial Number entry <div> or create it dynamically on the fly and destroy it afterwards.
Save the current row in a variable, and then filter the textbox out of it to set the value to: http://jsfiddle.net/UxQV7/1/.
var currentRow; // will be <tr> of row where user has clicked on Add
$(".addSerial").click(function(){
currentRow = $(this).parents('tr'); // set current row
$("#serialAdd").toggle();
});
$("#submitSerial").click(function(){
$("#serialAdd").toggle();
currentRow.find(':text:eq(2)').val($('#serialToAdd').val());
// find correct textbox in row and copy value
});
You can use jQuery's prev() to get the target input and save it:
var activeField;
$(".addSerial").click(function(){
$("#serialAdd").toggle();
activeField = $(this).prev();
return false;
});
$("#submitSerial").click(function(){
$("#serialAdd").toggle();
activeField.val( $("#serialToAdd").val() );
$("#serialToAdd").val("")
});
Demo: http://jsfiddle.net/7Xykw/
when these controls are rendered you need to have a serial number to each control in id that way you can easily identify controls and add values.
Check this working sample . http://jsfiddle.net/UxQV7/18/