I have a simple html file upload form, it's something like this:
<form action="upload_file.php" id="theForm" method="post" onsubmit="return validateForm()" enctype="multipart/form-data">
<label for="file">Files:</label>
<input type="file" name="file[]" id="file1"><button id="rem1" type="button">Remove File</button>
...
...
<input type="file" name="file[]" id="file99"><button id="rem99" type="button">Remove File</button>
<input type="submit" name="submit" value="Submit">
</form>
The inputs are created dynamically. I need to know the id of the button which was clicked.
I have a simple html file upload form, it's something like this:
<form action="upload_file.php" id="theForm" method="post" onsubmit="return validateForm()" enctype="multipart/form-data">
<label for="file">Files:</label>
<input type="file" name="file[]" id="file1"><button id="rem1" type="button">Remove File</button>
...
...
<input type="file" name="file[]" id="file99"><button id="rem99" type="button">Remove File</button>
<input type="submit" name="submit" value="Submit">
</form>
The inputs are created dynamically. I need to know the id of the button which was clicked.
Share Improve this question asked Nov 18, 2013 at 23:11 user3002293user3002293 2293 gold badges4 silver badges13 bronze badges 3- possible duplicate of Can I determine which Submit button was used in javascript? – Quentin Commented Nov 18, 2013 at 23:15
-
With jQuery, you can use the
.on()method which delegates to dynamically created elements. – DevlshOne Commented Nov 18, 2013 at 23:17 - There is no "click handler" in the presented code. Please include an actual example case. This is why I have given a -1: the post must represent the problem! – user2864740 Commented Nov 18, 2013 at 23:19
6 Answers
Reset to default 6If you are using jQuery this should make you happy:
// delegate click event to all button elements in #theForm;
// will also apply for buttons added in future
$('#theForm').on('click', 'button', function(e) {
alert(e.target.id);
});
if not, attach this to each button:
blablabla.onclick = function(event){
alert(event.currentTarget.id);
}
Get each input with javascript, attach the click event listener to each, then in the click function, use this.id. Live demo here (click).
<button id="foo">Button</button>
<button id="bar">Button</button>
<button id="baz">Button</button>
<button id="qux">Button</button>
and the js:
var buttons = document.querySelectorAll('button');
for (var i=0; i<buttons.length; ++i) {
buttons[i].addEventListener('click', clickFunc);
}
function clickFunc() {
alert(this.id);
}
Your question requests a javascript answer. If you are alright with using jQuery, then you can solve your problem like this.
If not, then perhaps this answer will give you hints on where to search. It has to do with binding the click event to the new DOM elements. -- Nevermind on that, m59 has created an excellent answer in pure js.
If the element has been dynamically created, you must use jQuery's .on() method. Then, you can:
$(document).on('click', 'file999', function() {
var i = $(this).attr('id');
alert(i);
});
Note that to use jQuery you must include the jQuery library in the <head> tags, thus:
<head>
<script src="//ajax.googleapis./ajax/libs/jquery/1.9.1/jquery.min.js"></script>
</head>
I have created two buttons that change the div demo value according to the button innerHTML.
I hope this helps.
<button class="btn" type="button" name="button" id="btn_1">1</button>
<button class="btn" type="button" name="button" id="btn_2">2</button>
<div id="demo">
hello
</div>
<script>
var btn = document.getElementsByClassName('btn');
for (var i = 0; i < btn.length; i++) {
btn[i].addEventListener("click", function() {
document.getElementById("demo").innerHTML = this.innerHTML;
});
}
</script>The Cssyphus answer worked for me but you need to add '#' before file999.
Get your button to be generated with something like this:
<input type="file" name="file[]" id="file1"><button id="rem1" type="button" onclick="myfunction('file1')">Remove File</button>
javascript:
function myfunction(inputId){
//do the thing
}
发布者：admin，转转请注明出处：http://www.yc00.com/questions/1743580687a4474208.html
评论列表（0条）