I am listing items via table then want to change individual names of items.
<td class="tdFileName">
<?php $nameArray = explode(".", $f->file_name); ?>
<input type="text" name="ra_name" class="raName" value="{{$nameArray[0]}}">
<button type="submit" class="btn-warning btnRaName">Düzenle</button>
</td>
<td>{{$userName}}</td>
$('.btnRaName').on('click', function (e) {
e.preventDefault();
alert($('.raName').val());
location.reload();
});
When I click the individual button I only get first input's value. How can I fix that?
On click you need to pick the prev HTML element as it will be the desired input field:
$('.btnRaName').on('click', function (e) {
e.preventDefault();
var txt = $(this).prev('input.raName').val();
console.log(txt);
location.reload();
});
You need to use DOM traversal to get only the .raName element thats related to the clicked button. Try this:
$('.btnRaName').on('click', function (e) {
e.preventDefault();
var raName = $(this).closest('td').find('.raName').val();
console.log(raName);
});
Select the element relative to your clicked element using sibling()
$('.btnRaName').on('click', function (e) {
e.preventDefault();
var raName = $(this).siblings('.raName').val();
console.log(raName);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<td class="tdFileName">
<input type="text" name="ra_name" class="raName" value="the value">
<button type="submit" class="btn-warning btnRaName">Düzenle</button>
</td>
<td class="tdFileName">
<input type="text" name="ra_name" class="raName" value="another value">
<button type="submit" class="btn-warning btnRaName">Düzenle</button>
</td>
</table>
Related
I'm trying to create 2 rows of 6 rectangles (considered to be one object).
I also want to add a plus button, so that when the user clicks on either end, a new set of rectangles appear above or below the original ones. (depending on which plus button they click on)
So I am trying to achieve the following:
What I have tried/found so far:
$(function () {
$(".repeat").on('click', function (e) {
e.preventDefault();
var $self = $(this);
$self.before($self.prev('table').clone());
//$self.remove();
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<form>
<div class="repeatable">
<table border="1">
<tr>
<td>
<input type="text" name="userInput[]" />
</td>
</tr>
</table>
<button class="repeat">Add Another</button>
</div>
<input type="submit" value="Submit" />
</form>
The above example only works for forms. Does anyone know how I can go about making this work for what I want?
I modified your code to allow add to top, or add below.
I edited your event listener to check whether the button has a specific class. If so, either add above or below. It also listens to "body" click, because new DOM elements won't have event listeners attached:
$("body").on('click', ".repeat", function (e) { //other stuff here}
Also, changed your HTML so it wasn't dependent on "form", you could swap out the element types as long as the classes remain.
$(function () {
$("body").on('click', ".repeat", function (e) {
e.preventDefault();
var $self = $(this);
var $parent = $self.parent();
if($self.hasClass("add-bottom")){
$parent.after($parent.clone());
} else {
$parent.before($parent.clone());
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
<div class="repeatable">
<button class="repeat add-top">Add above</button>
<table border="1">
<tr>
<td>
<input type="text" name="userInput[]" />
</td>
</tr>
</table>
<button class="repeat add-bottom">Add below</button>
</div>
</div>
I am using a table in which each row has three buttons(save, edit, delete). On edit button i want to hide it and want to show save button, also want ot make name column editable.
On save button i want to hide it, and want to show edit button. the html code is bellow.
<table>
<tr>
<td class="editablecontent">Name</td>
<input data-edit type="button" value="Edit">
<input data-save type="button" value="Save" class="savevarients">
<input data-delete type="button" value="Delete">
</tr>
<tr>
<td class="editablecontent">Name</td>
<input data-edit type="button" value="Edit">
<input data-save type="button" value="Save" class="savevarients">
<input data-delete type="button" value="Delete">
</tr>
<tr>
<td class="editablecontent">Name</td>
<input data-edit type="button" value="Edit">
<input data-save type="button" value="Save" class="savevarients">
<input data-delete type="button" value="Delete">
</tr>
</table>
i am using this jquery code but the problem is when i am showing save button it shows i all table, and each row become editable. i want this only on one particulaar row.
My js code is bellow.
'click [data-edit]': function(event) {
event.preventDefault()
$(event.target).hide();
$(".editablecontent").attr('contenteditable', true);
$(".savevarients").show();
},
'click [data-save]': function(event) {
event.preventDefault()
$(event.target).hide();
$(".editablecontent").attr('contenteditable', false);
Replace:
$(".editablecontent").attr('contenteditable', true);
$(".savevarients").show();
with:
$(event.target).parent().find(".editablecontent").attr('contenteditable', true);
$(event.target).parent().find(".savevarients").show();
You can use jQuerys DOM traversal methods to find the nearest td to the button which was clicked and base all selectors on that using find(). Try this:
'click [data-edit]': function(event) {
event.preventDefault()
var $button = $(event.target).hide();
var $td = $button.closest(".editablecontent").attr('contenteditable', true);
$td.find(".savevarients").show();
},
'click [data-save]': function(event) {
event.preventDefault()
var $button = $(event.target).hide();
$button.closest(".editablecontent").attr('contenteditable', false);
}
Use jQuery's $.siblings() function, for example:
$(event.target).siblings(".editablecontent").attr('contenteditable', true);
$(event.target).siblings(".savevarients").show();
I would begin the function by defining the target element:
function(event) {
$target = $(event.target);
$target.hide();
$target.siblings(".editablecontent").attr('contenteditable', true);
$target.siblings(".savevarients").show();
event.preventDefault();
}
i want this code to be reusable ,instead of this :
$(this).closest("tr").find("td input").eq(1).val()
i was hoping for calling it by name using :
(($(this).closest("tr").find("td input").attr("name")) so i dont have to set every .eq(n)
but its not working :
here's my jquery code :
$('.tdiv').on("click", "#tddelete", function () {
if ($(this).closest("tr").find("td input").eq(1).val() == "ADD") alert("add");
else alert("change");
});
see this working FIDDLE for my first code.
id attributes should be unique. Also you're looking for the attribute selector in jQuery. EG.
$(this).closest("tr").find("td input[type='text']").val();
JS
$('.tdiv').on("click", ".tddelete", function () {
var inputVal = $(this).closest("tr").find("td input[type='text']").val();
alert(inputVal);
});
UPDATE FIDDLE
UPDATE BASED ON COMMENTS
It appears that you could have more than one input of type text in your table cell. As such i would suggest adding a class to the input element you are looking to get the value from.
HTML
<table class="tdiv">
<tr>
<td>
<input type="button" class="tddelete" />
</td>
<td>
<input type="text" class="getVal" value="ADD" />
</td>
</tr>
<tr>
<td>
<input type="button" class="tddelete" />
</td>
<td>
<input type="text" class="getVal" value="CHANGE" />
</td>
</tr>
</table>
JS
$('.tdiv').on("click", ".tddelete", function () {
var inputVal = $(this).closest("tr").find(".getVal").val();
alert(inputVal);
});
EXAMPLE FIDDLE
First of all you should not use id for multiple elements, so change id="tddelete" to class="tddelete" for all button elements.
<input type="button" class="tddelete" />
You can find for input element present in next td of button's parent td. Don't forget to put name attribute for input elements.
$('.tdiv').on("click", ".tddelete", function () {
var val = $(this).closest("td").siblings().find("input[name=flag]").val();
alert(val);
});
Demo
Instead of using attr, use an attribute selector in your find method .find("td input[name=somename]")
$('.tdiv').on("click", "#tddelete", function () {
if ($(this).closest("tr").find("td input[name=somename]").eq(1).val() == "ADD") alert("add");
else alert("change");
});
I have two different buttons. Both of which when clicked runs the JQuery function 'ShowCommentBox'
However when the second button is clicked I want to load an additional JQuery function along 'SHowCommentBox' - the additional function allowing extra options on screen.
<input id="SubmitCommentsForBOQ" type="button" value="Comments" onclick="ShowCommentBox('<%: item.ItemCode %>'')" />
Above is the second button I want to also run the
$("#SubmitCommentsForTwo").click(function () {
$("#hiddenBox").show();
});
, which makes the extra features visible...how can I do this?
Thank you for any replies
Below is the original JQuery: which loads a dialogue box
function ShowCommentBox(itemIdentifier, labourOrPlant, desc) {
id = itemIdentifier;
LabouringOrPlanting = labourOrPlant;
description = desc;
Function.DisplayBox(itemIdentifier);
$("#LabourOrPlantDialog").dialog({ modal: true });
}
and my other code:
<div id="LabourOrPlantDialog" title="Comments" style="display:none;">
<table class="detailstable FadeOutOnEdit">
<tr>
<th>Item</th>
</tr>
<tr>
<td id="Item"></td>
</tr>
</table>
<br />
<textarea id="ExistingComments" type="text" runat="server" rows="7" cols="30"
maxlength="2000"> </textarea>
<input id="SubmitComment" type="button" value="Submit"
onclick="SubmitButton()" />
<br />
<div id="hiddenBox">
<input type="text" name="BoqTextBox" id="BoqTextBox" value="7.15" />
</div>
</div>
It's best to separate behavior from markup. You can solve both problems using an HTML data- attribute.
First embed the data in the HTML:
<input id="SubmitCommentsForBOQ" type="button" value="Comments"
data-item-code="<%: item.ItemCode %>" />
Instead of onclick, bind the event handler using jQuery only, and perform all the actions you need at once:
$("#SubmitCommentsForBOQ").click(function () {
var itemCode = $(this).data('itemCode');
ShowCommentBox(itemCode);
});
$("#SubmitCommentsForTwo").click(function () {
$("#hiddenBox").show();
var itemCode = $(this).data('itemCode');
ShowCommentBox(itemCode);
});
Multiple handlers will execute in the order in which they are bound, so you could also do something like this:
// happens first, but only for this specific button
$("#SubmitCommentsForTwo").click(function () {
$("#hiddenBox").show();
});
// happens for all buttons
$("input[data-item-code]").click(function () {
var itemCode = $(this).data('itemCode');
ShowCommentBox(itemCode);
});
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);
});
}