Get dynamically value from data attribute - javascript

How do I get and store the value of the data-id attribute? The value inside of it changes on button click, so I need a method that gets the value as it changes. I've tried document.getelementbyid/name/value but I get the only get the value stored from the first button click. The method I'm using now $(this).data('id') returns nothing. Thanks
mustache file:
<td>
<form id="Form" action="./downloaddoc" method="GET">
<input type="hidden" name="p" value="download"/>
<input type="hidden" name="fileid" data-id="{{file_id}}"/>
<input class="button download_button" type="submit" value="Download">
</form>
</td>
js:
$(document).on('click', '.download_button', download_doc);
function download_doc(event) {
event.preventDefault();
var id = $(this).data('id');
console.log(id);
window.location.href = window.location.href + '?p=download&id=' + fileid;
}

You're searching for data attribute in the download button and not in the input field where it is actually present.
Add a class/id to the input field so that you can find it.
When you click on the button find the closest form and then find the input field which contains file id and extract the file id from it.
<td>
<form id="Form" action="./downloaddoc" method="GET">
<input type="hidden" name="p" value="download"/>
<!-- Added a class to the input field -->
<input type="hidden" name="field" class="input-download-file" data-id="{{file_id}}"/>
<input class="button download_button" type="submit" value="Download">
</form>
</td>
Javascript:
$(document).on('click', '.download_button', download_doc);
function download_doc(event) {
event.preventDefault();
// Find the closest form
var form = $(this).closest('form');
// Find the input field which constains the download file id
var input = $(form).find(".input-download-file");
// Get the file id
var id = $(input).data('id');
console.log(id);
window.location.href = window.location.href + '?p=download&id=' + fileid;
}

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>

How to pass text box value as argument in jquery function on click event

I want to get a value of text box on click as parameter
<input type="text" id="remark_mention" />
// link is here for click
<a class="remark "href="javascript:void(0);"style="text-decoration:none;color:#d90000;" id="st_mention<?php echo strip_tags($row["pid"]); ?>" onClick="mention_or_remmove_remarks('<?php echo strip_tags($row["pid"]); ?>','st_mention');"> Mention</a>
My jquery function is follow
function mention_or_remmove_remarks(mention_id, action){
var dataString = "mention_id=" + mention_id + "&action=mention_or_remmove_remarks";//ajax code here for post mention_update.php
}
How I get a value of textbox in link Onclick event
You can get it by.
Use form and get it:
<form>
<input type="text" id="remark_mention" name="remark_mention_ID"/>
<input type="button" onclick="foo(this.form.remark_mention_ID.value)"/>
</form>
OR :
<input type="text" id="remark_mention" />
and in your js file :
var value = $('#remark_mention').val(); // value variable has your latest value
Html
<input type="text" id="remark_mention" />
<a class="remark "href="javascript:void(0);"> Mention</a>
Js
$('.remark').on('click', function(){
var text_val = $('#remark_mention').val();
console.log(text_val);
});
jsfiddle demo

Use JQuery to copy value from table to modal

I have a table with a list of all my data. The data is printed in a for loop so there are many rows in the table. how can i get the userid in the row with the button clicked?
<table>
<td>
<input type="hidden" value="<c:out value="${user.id}" />" name="userId" />
</td>
<td>
<button class="btn btn-default fileUpload" data-toggle="modal" id="btnUpload" data-target="#file-modal" value="<c:out value="${user.id}" />">Upload</button></td>
</table>
and i have a modal container. When the upload button in the table is clicked, the modal will open up for a file upload.
<form action="${pageContext.request.contextPath}/UserServlet" enctype="multipart/form-data" method="post">
<input type="hidden" value="5519" name="OPS" />
<input type="hidden" name="uploadUserId" />
<div class="form-group">
File : <input type="file" class="file" name="uploadFile"><br />
<button type="submit" class="btn btn-default">Upload</button>
<br /><br />
</div>
</form>
What i am trying to do is on the click of btnUpload the value in the hidden input type userId will be copied over to the hidden value type uploadUserId
I have tried doing the following but neither works
1
$(document).ready(function () {
$("#btnUpload").click(function(){
var $userId = $(this).closest("tr").find("#userId").text();
$("#uploadUserId").val($userId);
});
});
2
$(document).ready(function () {
$("#btnUpload").click(function(){
var $userId = $(this).closest("tr").children()[2].text();
$("#uploadUserId").val($userId);
});
});
This will do the trick without changing the html
$(document).ready(function () {
$("#btnUpload").click(function(){
var $userId = $(this).parent().prev("td").children("input:hidden").val();
$("#uploadUserId").val($userId);
});
});
Another solution by adding ID to the input element as shown below,
<input id="userVal" type="hidden" value="<c:out value="${user.id}" />"name="userId" />
then you can get the value from the following jquery
$("#userVal").val();
This should work. Just select and grab the user Id txt and then pass it to the uploadUserId value.
$(document).ready(function () {
$("#btnUpload").click(function(){
var $userId = $('#userId').text();
//$("#uploadUserId").val($userId);
$('input[name="uploadUserId"]').val($userId);
});
});
UPDATE
OK. I reviewed this again using your HTML structure and got this all worked out. The code below works.
$('[type="submit"]').on('click', function(e){
e.preventDefault(); // prevents the button default action. You can remove this if you want the form to submit after click.
var $userId = $(this).prev().prev().val(), // this gets the input value. based on your html it is the previous previous element.
fix1 = $userId.replace(/(?:\..+)$/, '').split('\\'), // this is a regex that replces the file extention then splits the string on the back slash turning it into an array.
fix2 = fix1.length -1; // gets the length of the array and subtracts 1 to get the last array index of the array. This i to get the file name.
$('[name="uploadUserId"').val(fix1[fix2]); // this assigns the uploadUserId value to the name of the file using the array and the index.
});

Open a new window using data from input form

In a input form in a HTML file, the user is supposed to put an URL (let's call it thislink). Then I want, when the user clicks on the submit button, to open a new window whose URL integrates thislink, that is its URL should be: '/selection/yes/?value='+thislink'.
Here are 2 tentatives of code:
1st tentative:
<form id="urlarticle">
<input type='text' name='thislink'>
<input type='submit' value='Select' onclick = function() {window.open('/selection/yes/?value='+thislink)};>
</form>
2nd tentative:
<form id="urlarticle">
<input type='text' name='thislink'>
<input type='submit' value='Select'>
</form>
<script type='application/javascript'>
$("#urlarticle").submit(function() {
window.open('/selection/yes/?value='+thislink);
});
</script>
But both tentatives are not working, any help to get the right way to write it appreciated!
Since you tagged jQuery, you could do it like this:
http://jsfiddle.net/729uh/
Javascript:
$("#urlarticle").submit(function() {
var linkValue = $('input[name="thislink"]').val();
window.open('/selection/yes/?value='+linkValue);
});
Html:
<form id="urlarticle">
<input type='text' name='thislink'/>
<input type='submit' value='Select'/>
</form>
What this does is:
use jQuery to select the input that has a name attribute with value thislink
take the value that was written in it
append that value to your link

delete dynamically created textbox

I have the following code which I use to add text-boxes dynamically on click of button. It works.
<div id="forms" name="forms">
<input name="winner[]" type="text" id="tag" size="20"/><br/>
</div>
<input type="button" name="addmore" id="addmore" value="Add More Winners" onclick="addForm()"/>
The javascript for the above code is:
function addForm() {
$("#forms").append(
"<input type ='text' class='winner' name='winner[]'><br/>");
$(".winner").autocomplete("autocomplete.php", {
selectFirst: true
});
}
I am using auto complete to get data from database in the text-box
What I want is - suppose if a user clicks on add more winner button but does not want to add any data in the textbox, I should give him a button to delete the extra text-box.
How should the JavaScript be written for this?
Do see my above code
var i=0;
function addForm() {
i++;
$("#forms").append(
"<input type ='text' id='input_'"+i+" class='winner' name='winner[]'><button onclick='delete('"+i+"')' id='button_'"+i+">delete</button><br/>");
$(".winner").autocomplete("autocomplete.php", {
selectFirst: true
});
function delete(i)
{
$("#input_"+i).remove();
$("#button_"+i).remove();
}
simply use a counter to set an ID to inputs and buttons and send that counter to delete function;
Simply use the code below :
$("#forms").append("<p><input type ='text' class='winner' name='winner[]' ><button onclick='$(this).parent().remove()'>delete</button></p>");
Try this function.
function removeElement()
{
if(intTextBox != 0)
{
var contentID = document.getElementById('content');
contentID.removeChild(document.getElementById('strText'+intTextBox));
intTextBox = intTextBox-1;
}
}
Try adding a remove button while adding a text box dynamically to remove the text box if necessary
Here is the html code
<div id="forms" name="forms">
<input name="winner[]" type="text" id="tag" size="20"/><br/>
</div>
<input type="button" name="addmore" id="addmore" value="Add More Winners" />
Here is the jQuery code
$('#addmore').click(function () {
$('#forms').append('<input type ="text" class="winner" name="winner[]"><input type="button" onclick="$(this).prev().remove();$(this).remove();">');
});
Here is the demo

Categories

Resources