I have the following input inside an asp.net repeater
<div class="detailsItem">
<input type="button" class="saveCommand" value="Save"/>
</div>
then within my document.ready I bind a click function
<script type="text/javascript">
$(document).ready(function () {
$('.saveCommand').live('click', function () {
var cur = $(this);
saveItem(cur.closest('div.detailsItem'));
});
});
When I'm binding my repeater, i want to be able to include an ID in call to the click function. something similar to:
<input type="button" onclikc="save(this,<%#((CustomViewItem)Container.DataItem).Id%>" value="Save"/>
Any idea on how to combine the two styles of binding?
I would suggest you to use a data attribute.
<!--
<div class="detailsItem" data-id="<%#((CustomViewItem)Container.DataItem).Id%>">
-->
<div class="detailsItem" data-id="YourIdHere">
<input type="button" class="saveCommand" value="Save"/>
</div>
<script type="text/javascript">
$(document).ready(function () {
$('.saveCommand').on('click', function () {
var cur = $(this);
var detailsItem = cur.closest('div.detailsItem');
alert(detailsItem.data("id"));
saveItem(detailsItem);
});
});
</script>
More information on the data() method in jQuery: http://docs.jquery.com/Data .
You could use the new data-* attributes
<input type="button" data-id="<%#((CustomViewItem)Container.DataItem).Id%>" value="Save"/>
in the event handler you can then access it with
cur.data("id")
You Can pass the ID to the Save function in the Item Template of your Repeater.
<itemTemplate>
<input type='button' onclick='save(<%# Eval("Id")); %>' value='Save' />
</itemTemplate>
Try this
<ItemTemplate>
<div class="detailsItem">
<input type="button" class="saveCommand" onclick='save(<%# Eval("Id") %>);' value="Save"/>
</div>
</ItemTemplate>
Related
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/
here is below 3 form which generated dynamically in my code.
<form id="abc">
<input id="link" value ="aa">name
<button type="submit">Submit</button>
</form>
<form id="abc">
<input id="link" value ="bb">name
<button type="submit">Submit</button>
</form>
<form id="abc">
<input id="link" value ="cc">name
<button type="submit">Submit</button>
</form>
in js i was trying to fetch input value of form which is clicked.
$(document).ready(function () {
$('#abc').submit(function (e) {
var bla = $('#link').val();
alert(bla);
e.preventDefault();
});
});
But whichever form i submit i always got 1st form input value. I know i am doing this thing wrong can you explain how can i get input value of the form which is submit currently.
id of element in document should be unique. Substitute .className for duplicate .id at <form>, <input> elements. Use event delegation to attach submit event for form elements having .className "abc"; use jQuery() with ".link" selector and context set to this at event handler, chain .val() to get .value of current <input> element.
// dynamic `html`
var html = `<form class="abc">
<input class="link" value ="aa">name
<button type="submit">Submit</button>
</form>
<form class="abc">
<input class="link" value ="bb">name
<button type="submit">Submit</button>
</form>
<form class="abc">
<input class="link" value ="cc">name
<button type="submit">Submit</button>
</form>`;
$(document).ready(function () {
$(document).on("submit", ".abc", function (e) {
var bla = $(".link", this).val();
alert(bla);
e.preventDefault();
});
$("body").append(html);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
id should always be unique.In your case use class as a common selector
Here are the changes
HTML
id is replaced with class
<form class="abc">
<input class="link" value="aa">name
<button type="submit">Submit</button>
</form>
<form class="abc">
<input class="link" value="bb">name
<button type="submit">Submit</button>
</form>
<form class="abc">
<input class="link" value="cc">name
<button type="submit">Submit</button>
</form>
JS
using class selector & jquery find method to find an input with class link
$(document).ready(function() {
$('.abc').submit(function(e) {
e.preventDefault();
var bla = $(this).find('input.link').val();
alert(bla);
});
});
DEMO
While dealing with dynamically created form element, bind its event while taking document into context i.e. $(document).on("event_name", 'dynamic_element', function(){ ... });
So, below code shall work in your case.
$(document).on("submit", 'form.abc', function(){
... // you can get the form elements value here.
var bla = $(this).find('.link').val();
alert(bla);
e.preventDefault();
});
Note: Avoid using same IDs for multiple elements, use classes instead.
You can try the $("form") submit event to handle this
$(document).ready(function () {
$("form").submit(function(e) {
var bla = $(this).find('#link').val();
alert(bla);
e.preventDefault();
});
});
Here is the working sample:https://jsfiddle.net/e7r14p3t/
HTML ids should be used for only one element each. For multiple elements, you should use the class attribute, which can be selected in jQuery with $('.abc').
HTML:
<form class="abc">
<input id="link" value ="aa">name
<button type="submit">Submit</button>
</form>
<form class="abc">
<input id="link" value ="bb">name
<button type="submit">Submit</button>
</form>
<form class="abc">
<input id="link" value ="cc">name
<button type="submit">Submit</button>
</form>
JavaScript:
$(document).ready(function () {
$('.abc').submit(function (e) {
var bla = $('#link').val();
alert(bla);
e.preventDefault();
});
});
On the btn1 click:
<input type="hidden" runat="server" id="HTxtPath" />
or
<asp:HiddenField runat="server" ID="HTxtPath" />
<input id="btn1" type="button" value="save" onclick="Save()">
function Save() {
document.getElementById('HTxtPath').value = "~/path/Order.pdf";
}
Upto here the values assigning to the hidden text, then
On the btn2 click:
<input id="btn2" runat="server" type="button" value="save" onclick="Get()">
C#:
String data = HTxtPath.Value;
Here i m not getting the value
Pls help me
The easiest way I can do is to make the hidden input and asp.net hidden control instead of normal html input
used asp hidden field to store value
asp:HiddenField ID="hdnResultValue" Value="0" runat="server"
document.getElementById("hdnResultValue").value = 123;
following line read hidden field value
string codeBehindValue = hdnResultValue.Value;
I've asp.net web site , I used master page for the design. I've child page which is placed in the contentplaceholder. On the child page i used one hidden field as -
<input id="Hidden1" type="hidden" value="This is hidden text"/>
I want to display the hidden field value using alert() function from javascript on the page load event. How to do this?
I tried following thing in my script but it is not working-
(function msgShow() {
var e1 = document.getElementById('Hidden');
alert(e1.value);
})();
Thanks.
window.alert(document.getElementById("Hidden1").value);
Make sure this code is executed after the DOM is ready.
With jQuery you do like this:
$(document).ready(function() {
alert($('#Hidden1').val());
});
without jQuery you do:
alert(document.getElementById('Hidden1').value);
Just like with any other element, you can get it with document.getElementById('Hidden1').value
Refer the code given below to know how to get
<html>
<body>
<script type="text/javascript">
function printIt(){
alert(document.getElementById('abcId').value);
alert(document.formName.elements['abcName'].value);
}
</script>
<h1>Access Hidden value in JavaScript</h1>
<form name="formName">
<input type="hidden" id="abcId" name="abcName"
value="I am Hidden value"/>
<input type="button" value="Get Value" onclick="printIt()" />
</form>
</body>
</html>
document.getElementById('Hidden1').value;
and alert the return value
<script type="text/javascript">
function dis() {
var j = document.getElementById("<%= Hidden1.ClientID %>").value;
alert(j);
}
</script>
<input id="Hidden1" type="hidden" runat="server" value="Hello" /><br />
<asp:Button ID="Button1" runat="server" Text="Button" OnClientClick="return dis();" />
With pure JavaScript:
var value = document.getElementById(id).value;
Also be sure not to reference a DOM element before it exists - like I just did and spent an hour trying to figure why even HelloWorld would not work.
how can i access to tooptip of textbox using jquery ?!!
or any asp control attribute !!
<asp:TextBox CssClass="myclass" ID="Name" runat="server" ToolTip="some tooltip">/asp:TextBox>
jquery:
$(document).ready(function() {
$('.myclass').click(function() {
alert($(this).attr('ToolTip'));
});
});
or just set my control to HTML
ToolTip attributes convert to title attributes in HTML. Try the following:
alert($(this).attr("title"));
Try this:
$(function () {
$('.mybutton').onclick(function () {
var tooltip = "B";
$('.mytb').attr('title', tooltip);
});
});
<button type="button" CssClass="mybutton">Click Me!</button>
<asp:TextBox ID="TextBox1" runat="server" ToolTip="A" CssClass="mytb"></asp:TextBox>