How to control related text input element with a button? - javascript

I have a list of text-field + button that gets rendered dynamically. The user hits the button and I want to control the input field when a button is clicked.
I figure you could do something like:
<input id="1"><button onclick="doSomething(1)">Something</button>
<input id="2"><button onclick="doSomething(2)">Something</button>
<!--...-->
<input id="3"><button onclick="doSomething(3)">Something</button>
But wonder if there's a different and more sophisticated solution because the code I'm modifying passes an an anonymous function to onclick and I can't pass a unique ID like the method above.

This is very easy to achieve in vanilla Javascript (as most things). No jQuery overhead required here.
let buttons = [...document.getElementsByClassName('inputbutton')]
function doSomething(i) {
console.log(i);
}
for (const button of buttons) {
button.addEventListener('click', (e) => {
const i = e.target.previousSibling.id
doSomething(i);
})
}
<input id="1"><button class="inputbutton" type="button">Something</button>
<input id="2"><button class="inputbutton" type="button">Something</button>
<!--...-->
<input id="3"><button class="inputbutton" type="button">Something</button>

If you modify your dynamic HTML like the following and add this jQuery, you will be able to access the value of the previous input field.
var buttons = $(".inputs-and-buttons #button-after-input-field");
buttons.click(function() {
console.log($(this).prev("input").val());
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="inputs-and-buttons">
<input id="1" value="1"><button id="button-after-input-field">Something</button>
<input id="2" value="2"><button id="button-after-input-field">Something</button>
<!--...-->
<input id="3" value="3"><button id="button-after-input-field">Something</button>
</div>

You can generate dynamic Id for both input field and button with index or row number or you can add custom attribute for row number as below.
You can generate dynamic related control with specific Id for textbox and button as well. e.g. txtFirstName_1, txtLastName_1, btnAdd_1. here textbox and button distinguished by its id and number after Underscore "_" .
$(function(){
// Register click on button
//here you can pass specific class name for button if all are have same functionality
$("button").click(function(e){
console.log(this);
var btnId=$(this).attr("id");
//console.log(btnId);
// Way 1
//Split btnId with "_" e.g btn_1 will splited with ["btn","1"]
var rowIndex=btnId.split("_")[1];
console.log(btnId.split("_"),rowIndex);
$("#txt_"+rowIndex).val("Upate value by btn"+rowIndex); // Or fetch value
// Way 2
// You can directly use custom attribute data-row and do your work
var rowIndex1=$(this).attr("data-row");//$(e).prop("data-row");
console.log(rowIndex1);
//$("#txt_"+rowIndex1).val("Upate value"); // Or fetch value
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<input id="txt_1" data-row="1"><button id="btn_1" data-row="1">Something</button>
<input id="txt_2" data-row="2"><button id="btn_2" data-row="2">Something</button>
<input id="txt_3" data-row="3"> <button id="btn_3" data-row="3">Something</button>

Related

Get dynamically generated input value on an onClick even using Jquery

I am trying to get respective values of dynamically generated inputs. In other words, I have an X number of dynamically generated inputs; each of these inputs is bound to a button. With that being said, I would like the user to get alerted the dynamically generated input that is bound to the clicked button. What I have done so far does not sort this out and whatever button is clicked, only the first input's value is generated.
I have the following code - a dynamic input and a button:
<input type="hidden" id="job_id" name="jobIdName" value="{{ job_id }}"> // please note this input is dynamically generated....
<button name="get_id_name" class="get_id_class" id="get_id_id" >Show Id</button>
As for Jquery, I have done the following:
$('#get_id_id').each(function(index) {
$(this).click(function() {
var job_ids = $("[name='jobIdName']");
console.log('Job Ids -------------- : ' + job_ids);
});
});
The above code keeps generating only the first generated input value? Any ideas or suggestions?
I have seen some posts that might seem similar to this one but they are very old; also I am looking for a more modern implementation.
Add your "input tag" into div:
var counter = 0;
$(document).ready(function(){
$("#get_id_id").click(function() {
var divChildren = $(".job_ids").children();
if(counter < divChildren.length){
if(counter == '0'){
console.log($(divChildren).eq(0).val());
}else{
console.log($(divChildren).eq(counter).val());
}
counter++;
}
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class ="job_ids">
<input type="hidden" name="jobIdName" value="Test01">
<input type="hidden" name="jobIdName" value="Test02">
<input type="hidden" name="jobIdName" value="Test03">
<input type="hidden" name="jobIdName" value="Test04">
<input type="hidden" name="jobIdName" value="Test05">
</div>
<button name="get_id_name" class="get_id_class" id="get_id_id" >Show Id</button>

Adding ID to button, but must change based on radio input selection

EDITED TO ADD HTML: not exactly the same since im not in my office anymore, but you'll get the idea.
The scenario is i have a part of a site where users can pick 1 of multiple addresses they have saved. The ID gets generated for each address and I need to apply that ID to a button to submit the form.
I've gotten it so the button receives the ID from the first click, but if I try to select a different address, the ID will not switch. How can I have the button use the ID of the most recently selected radio input? I'm using a data attribute to select this.
HTML:
<div>
<form>
<input type="radio" data-js="select" id="Test123" /> (id created dynamically)
<label>Address 1</label>
<input type="radio" dat-js="select" id="Test124" /> (id created dynamically)
<label>Address 2</label>
</form>
</div>
<button class="address-continue">Continue</button>
var radioID = $('*[data-js]').attr('id');
var addrContinue = $('.address-continue');
$('*[data-js]').click(function () {
$(addrContinue).attr('id', radioID);
});
Scenario: user clicks on address 1, so ID is then placed on the button for address 1. user made a mistake, meant to click on address 2. currently when i click address 2, the ID on the button doesn't change. it remains the same as the original click.
I need the ID on the continue button to change based on the proper radio selection.
Since id is unique use class
$('*[data-js]').click(function () {
var addrButton = $('.address-continue');
addrButton.removeClass(test123);
addrButton.removeClass(test124);
radioID = $('*[data-js]').attr('id');
addrButton.addClass(radioID);
});
Also your basic problem might be because you did not collect your radioID in ur radio function hence it wasn't updated so try this
$('*[data-js]').click(function () {
var radioID = $('*[data-js]').attr('id');
$(addrContinue).attr('id', radioID);
});
The following should do it for you hoping the corresponding elements are in the same order:
$('[data-js]').on('change',function() {
$('.address-continue').data('id', this.id);
});
$('.address-continue').on('click',function() {
alert( $(this).data('id') );
});
You cannot assign a second element in your document the id of another. IDs should be unique; therefore I have used data-id.
$('[data-js]').on('change',function() {
$('.address-continue').data('id', this.id);
});
$('.address-continue').on('click',function() {
alert( $(this).data('id') );
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
<form>
<input type="radio" name="address" data-js="select" id="Test123" /> (id created dynamically)
<label>Address 1</label>
<input type="radio" name="address" data-js="select" id="Test124" /> (id created dynamically)
<label>Address 2</label>
</form>
</div>
<button class="address-continue">Continue</button>

Get variable input value on button click

not sure if this is even possible, I have a page with mutiple inputs,each input has a button. is there anyway of getting the inputs value on button click, without hardcoding the inputs id?
example
js
$('button').click(function () {
var inputcontent = $('input').prop('id');
console.log(inputcontent);
});
html
<input type="text" id="1">
<button type="button">Go!</button>
<input type="text" id="2">
<button type="button">Go!</button>
<input type="text" id="3">
<button type="button">Go!</button>
<input type="text" id="99">
<button type="button">Go!</button>
$('input').prop('id') returns id of first matched element in selector. To target the input before each button, you need to use .prev() along with $(this).
Try this:
$(this).prev().attr('id');
Working Demo
You already doing it right, just change a little bit in your code. You have to find out the value of the input field, which is placed just before your button on which you will click. So your code should be:
$('button').click(function () {
var inputcontent = $(this).prev().prop('id');
console.log(inputcontent);
});
This'll solve the issue
$('button').click(function () {
var value = $(this).prev().val();
console.log(value);
});
You're not targeting the item that you want the id from, the input just prior to the button. Use prev(0 to do that. In addition, id is really an attribute, not a property, so you should do this -
$('button').click(function () {
var inputID = $(this).prev().attr('id'); // gets the id of the input that precedes the button
console.log(inputID);
});

How to rename a html form elements' Id attribute using Jquery?

I have a form which contains radio boxes.
<input type="radio" name="categoryid" id="category420" value="420" onclick="checkCategory();" > Category1
<input type="radio" name="categoryid" id="category1314" value="13,14" onclick="checkCategory();" >Category2
<input type="radio" name="categoryid" id="category594" value="594" onclick="checkCategory();" >Category3
When the radio elements value attribute is a comma separated list (13,14) I need the elements Id attribute to change.
In the example above, when the second category is selected then "CategoryIDs=13,14" should be passed to the action page not categoryid. But for the other two categories it should pass categoryid value.
I cannot edit the action page.
The question: How can I change the radio buttons Id attribute in JQuery?
Change the Id
Based on your requirement to have only one Id (categoryid/s) then you could change the Id using JQuery, before the form is submitted.
JSFiddle working example - http://jsfiddle.net/daTYY/
JQuery
$(function() {
$('input:radio[name=categoryid]').change(function() {
if ($(this).val().indexOf(",") >= 0) {
$(this).attr("id","newId");
}
});
});
Update a hidden input
Add a hidden input named categoryids. Then use JQuery to check if categoryid contains a comma and if it does populate categoryids with the value.
JSFiddle working example - http://jsfiddle.net/KVs79/
HTML
<input type="radio" name="categoryid" id="categoryid1" value="13,14" />Category2
<input type="radio" name="categoryid" id="categoryid2" value="404" />Category3
<input type="hidden" name="categoryids" id="categoryids" value="" />
JQuery
$(function() {
$('input:radio[name=categoryid]').change(function() {
if ($(this).val().indexOf(",") >= 0) {
$("#categoryids").val("13,14");
}else{
$("#categoryids").val("");
}
});
});

input text change onclick button value

Actually i want to create a page switcher, all i need for this is an input with type text where will be entered the number of the page, and i have the second input with type button and onclick value:
<input type="text" value="#number of the page#" />
<input type="button" onclick="_go_page_('cf_pages_form_name1','#number of the page#');" />
I cant figure it out how to take this #number of the page# and put it in onclick dynamically using javascript... please smb help!
<input type="text" id="txtPageNumber" value="2" />
<input type="button" id="btn" value="click" onclick="_go_page_('cf_pages_form_name1','#number of the page#');" />
$(document).ready(function(){
$("#btn").click(function(){
var $val = $("#txtPageNumber").val();
alert($val);
_go_page_('cf_pages_form_name1',$val);
});
});
});
Assuming number is the id of the text field.
You can get the value of the text field like this:
$('#number').val();
And pass that is the onclick event
You can use an ID on the page selector input to get the value.
function goToPage(pageNumber) {
// go to pageNumber
}
<input type="text" id="pageSelector" value="#number of the page#" />
<input type="button" onclick="goToPage($('#pageSelector').val())" />
You've tagged this with jQuery so I'm assuming you're using jQuery.
lets your input type is like this
then in jquery try something like this...
$('#pageNo').keyup(function(){
pageNo = $(this).val()
}
then pass this to your button onclick function
i will answer in "very easy to understand" without jquery:
you have to get the value of the first inputfield. this should your function do. but first the inputfield needs an id(f.g. 'number').
code in function:
var pagenumber = document.getElementById('number').value;
then you have to put the number into the url (document.href).

Categories

Resources