We Keep Coding

jQuery - Cant get attribute of appended element

I am trying to get the ID-attribute of an element that I have appended into my HTML. However, all I get is 'undefined'. How can I solve this?
jQuery('form#formular').append('<input id="upload_image_button" type="button" class="button" value="Upload" onclick="myFunction();" />');
function myFunction (){
alert(jQuery(this).attr("id"));
}

$('body').find('input[class="button"]').attr('id')
or try to pass the id as parameter of the function
...append('<input id="upload_image_button" type="button" class="button" value="Upload" onclick="myFunction(this.id);" />');
function myFunction(id){
alert(id)
}

you can pass 'this' in function parameter and in the function definition you will get whole input tag
jQuery('form#formular').append('<input id="upload_image_button" type="button" class="button" value="Upload" onclick="myFunction(this)" />');
function myFunction(e){
$(e).attr('id')
}

How can I get the id of a button?

I want to get the #id of an html button, so that I can use it elsewhere.
HTML
<input type="button" onclick="recordToFilename(this);"
id="submitdis" value="Enter Discount Price">
JavaScript
var x = document.getElementById("submitdis");
function recordToFilename(ele) {
console.log(ele.id);
}
Here's my codepen. My goal is to do something similar to this fiddle, but I'm not really sure where to start.

Try this vanilla JS:
var id;
function getId(button){
id = button.id
document.getElementById('output').innerHTML = id;
}
<input type="button" id="button1" onclick="getId(this)" value="Print my ID below.">
<p id="output"></p>

You don't need to get the element by id since you're already passing this in your onclick you have access to it in the function. if you just need the id you can get it by calling getAttribute on the element. Below is an example.
function recordToFilename(el) {
console.log(el.getAttribute('id'));
}
<input type="button" onclick="recordToFilename(this);" id="submitdis" value="Enter Discount Price" />

First you would need to import Jquery inside your html head tag,
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
Then inside your js document this would be your code
$(document).ready(function() {
$('#buttonID').myNewFunc()
}

Let's suppose that on the DOM we have something like this :
<button id="submitdis" class="some-class" >Some Text</button>
to get the id on native JS :
var el = document.getElementById('submitdis');
console.log(el.id) // ===> OUTPUTS 'submitdis'
is that what you're looking for ?`

how to pass a razor value to a jquery function, in an mvc view

So I'm trying to pass a parameter to a javascript function using the razor '#' notation (in an MVC-4 View) but I'm getting Syntax error: "Unterminated string constant"
Is there another way I should be writing this?
#foreach (var item in Model)
{
...
<input type="button" value="Assign" onclick="AssignButtonClicked('#item.ID')" />
}
I've used the same syntax as this answer https://stackoverflow.com/a/5179316/1662619
Edit:
It's just a syntax error, the functionality still works

If you can use JQuery .data()
<input type="button" value="Assign" onclick="AssignButtonClicked(this)"
data-assigned-id="#item.ID" />
Further it can be fetched using
function AssignButtonClicked(elem){
var id= $(elem).data('assigned-id');
}

try this
<input type="button" value="Assign"
onclick="#("AssignButtonClicked('"+item.ID+"')")" />

Try this,
<input type="button" value="Assign" onclick="AssignButtonClicked(#item.ID);" />
Script
<script type="text/javascript">
function AssignButtonClicked(obj) {
alert(obj);
return false;
}
</script>

As alternative, you may use the other way to get #item.ID in your jQuery function. Just add hiden span with it and get it's value in your function.
Say, you have list:
<ul>
#foreach (var item in Model)
{
...
<li> <input type="button" value="Assign" onclick="AssignButtonClicked()" />
<span class="hidenID">#item.ID</span>
</li>
}
</ul>
than in your script add:
<script>
$(document).ready(function(){
$('.hidenID').hide() //**hide your span
});
function AssignButtonClicked()
{
...
var id = $(this).closest('li').find('.hidenID').text();
...
}
</script>
But to my mind better approach for jQuery is as follows:
<ul>
#foreach (var item in Model)
{
...
<li> <input type="button" value="Assign" class="button" />
<span class="hidenID">#item.ID</span>
</li>
}
</ul>
<script>
$(document).ready(function(){
$('.hidenID').hide() //**hide your span
});
$(function(){
$('.button').click(function(){
...
var id = $(this).closest('li').find('.hidenID').text();
...
}
});
});
</script>

You tried with:
<input type="button" value="Assign" onclick="AssignButtonClicked('#item.ID');" />
I added a semicolon at the end of javascript function call AssignButtonClicked('#item.ID');

To avoid this kind of issue, you may build all your js function call in c# code section.
Instead of:
<input type="button" value="Assign" onclick="AssignButtonClicked('#item.ID')" />
Use:
#{
var assignFunctionCall = "AssignButtonClicked(" + item.ID + ")";
}
<input type="button" value="Assign" onclick="#assignFunctionCall " />

How to Remove last inserted div in javascript?

<div id="file">
<input type="file" name="txtImage" multiple="multiple" class="upload" />
<input type="text" name="txtImageDesc" class="desc" />
</div>
<input type="button" value="Add" name="addButton" onclick="javascript: add_more();" />
<input type="button" value="Remove" name="removeButton" onclick="javascript: remove();" />
The above is two button which add or remove div on its calls.I have a java script function which is adding a div in html on call which works perfect
function add_more()
{
var txt = " <p><label>Upload Image</label><input type=\"file\" name=\"txtImage[]\"></p> <p>
<label>Image Description</label><input type=\"text\" name=\"txtImageDesc[]\"> </p>";
document.getElementById("file").innerHTML += txt;
}
However i am using the same script(with modification) to remove the last inserted div in it but its removing the whole html in the div.Here is the code:
function remove() {
var txt = " <p><label>Upload Image</label><input type=\"file\" name=\"txtImage[]\"></p>
<p><label>Image Description</label><input type=\"text\" name=\"txtImageDesc[]\"> </p>";
document.getElementById("file").innerHTML -= txt;
}
The output it generate is.I want the last div inserted to be remove on button click
NaN

As already said in comments, you are adding p elements here, not div.
If you don’t want to use jQuery, you can do it in “pure JS” as well, like this:
function lastParagraphBeGone() { // brilliant function name :-)
var paragraphs = document.getElementById("file").getElementsByTagName("p");
var lastParagraph = paragraphs[paragraphs.length-1];
lastParagraph.parentNode.removeChild(lastParagraph);
}

$('#file p').slice(-2).remove(); will remove the last 2 P elements from your #file element:
LIVE DEMO
HTML:
<input type="button" value="Add" name="addButton" />
<input type="button" value="Remove" name="removeButton" />
<div id="file"></div>
jQ:
var html = " <p><label>Upload Image</label><input type=\"file\" name=\"txtImage[]\"></p><p><label>Image Description</label><input type=\"text\" name=\"txtImageDesc[]\"></p>";
$('[name=addButton]').click(function(){
$('#file').append( html );
});
$('[name=removeButton]').click(function(){
$('#file p').slice(-2).remove();
});
https://developer.mozilla.org/en-US/docs/JavaScript/Reference/Global_Objects/Array/slice

Javascript uses the same operator for concatenation and for addition; so adding works.
But the minus operator is only for subtraction. So you try to subtract text from text which aren't numbers, so it's a NaN.
You cannot remove by this way: Use some function to search the beginning of this string and extract it so or simply add an id attribute to your <p> tag, so you can simply hide it when not needed anymore.

This works for me. One thing that seems to break this kind of function is when the adding text is on separate lines. So, always put that kind of "txt" addition on a single line in javascript.
<script type="text/javascript" >
function add_more()
{
var txt = " <p><label>Upload Image</label><input type=\"file\" name=\"txtImage[]\"></p><p><label>Image Description</label><input type=\"text\" name=\"txtImageDesc[]\"> </p>";
document.getElementById("extra-text").innerHTML = txt;
}
function remove() {
document.getElementById("extra-text").innerHTML = '';
}
</script>
<input type="button" value="Add" name="addButton" onclick="javascript: add_more();" />
<input type="button" value="Remove" name="removeButton" onclick="javascript: remove();" />
<div id="file"><h1>Existing text</h1>
<div id="extra-text"></div>
</div>

Insert javascript variable between string

<script type="text/javascript">
$('#did').html('<input type="submit" name="mybtn" value="Save" onClick="saveContent('+valA+')">');
function saveContent(con){
alert (con);
}
</script>
I am using this code to display a submit button and it comes to the page body. but when clicked on the button it is not alerting the value. Please help me...
Thanks

Why type="submit"?
assuming #did is the id of your div or some container
$("#did").html($("<input type='button' value='save' />").click(function(){
alert(valA);
}));
This will append a button in your div with click event attached to it. Remember type should be button for this case.

Escape insert variable
Your result is:
<input type="submit" name="mybtn" value="Save" onClick="saveContent(sometext)">
Error : sometext is not defined
$('#did').html('<input type="submit" name="mybtn" value="Save" onClick="saveContent(\''+valA+'\')">');
function saveContent(con){
alert (con);
}
Result of this:
<input type="submit" name="mybtn" value="Save" onClick="saveContent('sometext')">
but use better previous answer