Button click does't alert div contents - javascript

I have three dynamically generated div. Each contains different data and buttons.On each button click I want to alert the data.
I have this. but it only shows the first div data for each button click.
form. this form generate dynamically
<input type="hidden" name="price" id="price" class="price" value="
{{$data->price}}"/>
<input type="submit" name="submit" id="button1" class="btn btn-danger
btn-lg raised button1"/>
<div>
<script>
$('.button1').on('click', function(){
var id = $('.price').val();
alert(id);
});
</script>

Try below code:
$('button').on('click', function(){
var id = $(this)[0].id;
alert(id);
});

Since you told that your divs are dynamic generated, you've to bind your click event through to another static element or document.
This should help
$(document).on('click', '.button1' function(){
var id = $('.id').val();
alert(id);
});

Related

How can I get the custom id of the submit button clicked using jQuery?

I have been trying to call in a php variable into a jquery submit onclick event in such a way that when a reply is submitted, the id of the comment is captured to be processed by an ajax code.
$(document).ready(function() {
$("#submit").click(function(e) {
var rname = $("#rname").val();
var remail = $("#remail").val();
var rmessage = $("#rmessage").val();
var cid = $("#cid").val();
var post_id = $("#post_id").val();
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="submit" name="submit" id="submit'.$commnt_id.'" value="Reply This Comment" class="primary-btn text-uppercase" />
There are so many options to achieve this:
Solution 1 (by using data attribute):
<input type="submit" name="submit" data-commentID="<?=$commnt_id?>" value="Reply This Comment" class="primary-btn text-uppercase myBtnClass"/>
jQuery:
$(document).ready(function(){
$(".myBtnClass").click(function(){
var commentId = $(this).attr('data-commentID');
});
});
Solution 2 (by using onclick event):
<input type="submit" name="submit" onclick="mymethodCall(<?=$commnt_id?>)" value="Reply This Comment" class="primary-btn text-uppercase"/>
JavaScript:
function mymethodCall(commentId){
console.log(commentId);
}
In solution 1, using class name myBtnClass will help you, if you have multiple records.
Running Example:
$(document).ready(function(){
$(".myBtnClass").click(function(){
var commentId = $(this).attr('data-commentID');
alert(commentId);
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="submit" name="submit" data-commentID="1" value="Reply This Comment" class="primary-btn text-uppercase myBtnClass"/>
Running Example 2:
function mymethodCall(commentId){
console.log(commentId);
}
<input type="submit" name="submit" onclick="mymethodCall(1)" value="Reply This Comment" class="primary-btn text-uppercase"/>
May can rewrite to
<input type="submit" name="submit" data-comment-id="'.$commnt_id.'"
and in js:
$('[name="submit"]').click(function(e){
console.log($(this).data('comment-id'));
Use this.id
$(document).ready(function(){
$("input[type='submit']").click(function(e){
console.log(this.id);
});
});
Also, when you use $("#submit") you're selecting the elements where the id is equal to submit instead of the elements that have the type equal to submit.
Working JSFiddle: https://jsfiddle.net/nrmwx315/

PHP & JQuery Adding Dynamic Inputs

I'm using Jquery in order to add dynamic inputs on my page. I only want to display one input initially, then more can be added by clicking a button.
This works as expected.
I'm then using PHP in order to catch the $_POST values of the inputs and send them to an external script. This also works, however I'm always receiving one extra item in my array, and it's empty.
I think this is because I have a hidden <div> field in my HTML, which is shown when a new input is generated?
My code is below;
HTML
// unnecessary code removed
<div class="after-add-more">
<button class="add-more" type="button" title="Add"></button>
<input name="addmore[]" value="" type="text">
</div>
<div class="copy-fields hide">
<div>
<button class="remove" type="button" title="Remove"></button>
<input type="text" name="addmore[]" value="">
</div>
</div>
JQUERY
$(document).ready(function() {
//here first get the contents of the div with name class copy-fields and add it to after "after-add-more" div class.
$(".add-more").click(function() {
var html = $(".copy-fields").html();
$(".after-add-more").after(html);
});
//here it will remove the current value of the remove button which has been pressed
$("body").on("click", ".remove", function() {
$(this).parents(".control-group").remove();
});
});
PHP
<?php
// unnecessary code removed
$field_values_array = $_POST['addmore'];
?>
Without generating an additional input, I enter 1111111 into the input box and submit. A print_r($_POST) produces;
[addmore] => Array
(
[0] => 1111111
[1] =>
)
Any help is appreciated.
You are probably better just getting the parent of the element that was clicked and adding your markup after that. Here is an example:
$(document).ready(function() {
// this function handles the click event
function addField(parent) {
// find your template, in this case its the first .after-add-more
var html = $(".after-add-more").first().clone();
// reset the value of any inputs
$('input', html).val('');
// wire the click handler for the button
$("button", html).click(function() {
addField($(this).parent());
});
// append it to the parent of the parent, addContainer
html.appendTo(parent.parent());
}
// wire the click handler for the add-more button
$(".add-more").click(function() {
addField($(this).parent());
});
// I don't know what the intention of this code is so I'm leaving it alone
$("body").on("click", ".remove", function() {
$(this).parents(".control-group").remove();
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
// unnecessary code removed
<div id="addContainer">
<div class="after-add-more">
<button class="add-more" type="button" title="Add">Add</button>
<input name="addmore[]" value="" type="text">
</div>
</div>
<div class="copy-fields hide">
<div>
<button class="remove" type="button" title="Remove">Remove</button>
<input type="text" name="addmore[]" value="">
</div>
</div>

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.
});

jquery select form elements without ids

I have two forms in a html site and each form has an inputbox and a submit button
<div id="ausgabe">
<form class="forms">
<input type="text" placeholder="bla">
<button type="submit" class="btn btn-primary btn-small">TestA</button>
</form>
<form class="forms">
<input type="text" placeholder="bla">
<button type="submit" class="btn btn-primary btn-small">TestB</button>
</form>
</div>
$(".forms").submit(function(event)
{
event.preventDefault(); // Prevent the form from submitting via the browser
var test = $(this);
var wert = test.parent().find(":input:first").val();
alert("Button pressed"+wert);
});
Then i type "TestA" in the first inputbox and press the submit-button for this form and get an "Button pressed TestA" alert.
Then i type "TestB" in the second inputbox which belongs to the second form and i expect this result "Button pressed TestB" but i get "Button pressed TestA" again
How can i get the value of the inputbox which belongs to the its form?
My idea was to get the parent of the button which is pressed and find an inputbox there.
I'am generate this forms dynamicly from a java servlet backend and i not want to create ids for each form.
Best Regards
rubiktubik
When targeting the form, you don't want to find the first input in the parent element, but in the form itself:
$(".forms").on('submit', function(event) {
event.preventDefault();
var test = $(this);
var wert = test.find(":input:first").val();
alert("Button pressed"+wert);
});

javascript + div tags

these days i read and learn more about my problem!the code is here:
<div align="right" id="parent" name="parent">
<select name="select30" id="select30" value=""/>here inside i have options values and work dynamically with query to my DB</select>
<input type="button" id="moreFields" value="+" onclick=""/> //add select tags
<input type="button" value="-" onclick="" /> //remove select tags
<div name="child" id="writeclone"></div> //here cloned the child from parent DIV
</div>
<input type="button" name="enter" id="" value="ENTER" onclick="getoptionvalues();"/>
My problem is how i can get the names or id's from child DIV when + button fired.When this button fired create child DIVs in Child DIV!!Can anybody HELP ME to correct my JAVASCRIPT code
<script>
function getoptionvalues() {
var parent=document.getElementById('parent');
for (var count=0;count<parent.childNodes.length;count++) {
if(parent.childNodes[count].tagName =='DIV') {
alert ('parent.childNodes[count]');
}
}
}
</script>
As ThiefMaster pointed out, 'parent.childNodes[count]' should be parent.childNodes[count]. Then to get the id, it is just .id and name is .name
if(parent.childNodes[count].tagName =='DIV') {
alert (parent.childNodes[count].id);
alert (parent.childNodes[count].name);
}
At the very least, you need to add a method name to your onClick:
<input type="button" id="moreFields" value="+" onclick="$:getoptionvalues()"/>
Then, using jquery, you can grab an array of components of a certain type, and then loop through w/ alerts:
function getoptionvalues() {
var dropdownMenus = $("select");
dropdownMens.each(function () {
var id = $(this).id;
alert(id);
});
}

Categories

Resources