We Keep Coding

Passing value from Razor to javascript function CRUD

I have a trouble when I try to pass values from razor to a javascript function.
This works
<input type="button" class="btn btn-primary mx-1" value="Delete" onclick="deletePill()" />
function deletePill() {
console.log("Hola");
}
But when I do this it doesn't work
<input type="button" class="btn btn-primary mx-1" value="Delete" onclick="deletePill(#item.Id)" />" />
Or
<input type="button" class="btn btn-primary mx-1" value="Delete" onclick="deletePill()" data="#item.Id" />
function deletePill(Id) {
console.log(Id);
}
What should I change or add for it works?
I want passing values from Razor to javascript functions
The variables have values but it doesn't pass the values properly

The variables have values but it doesn't pass the values properly. I want passing values from Razor to javascript functions.
Well, the way you are trying to pass value is incorrect. You ought to pass value using string literal because, while you are writing Razor syntax you are in C# mode so, you have to pass value through single qoutation as like 'YourValuee'. In your scenario you should write as onclick="deletePill('#item.Id')". Therefore, in your code, you are ceretainly,missing the single qoutation ''
Solution:
HTML:
<input type="button" class="btn btn-primary mx-1" value="Delete From Razor To Js Func" onclick="deletePill('#item.ItemId')" />
Javascript:
#section scripts {
<script>
//Function Button Delete
function deletePill(Id) {
alert("User Id:" + Id + " will be Deleted!");
console.log(Id);
}
</script>
}
Output:
Note: If you would like to know more details on it you could check our official document here

How to quote/add javascript variable in html string?

I have tried to use like this
$(nTd).html("<div class='btn-group'> <button class='btn btn-info btn-sm' onclick='viewskpd('"+oData.id+"')' data-toggle='tooltip' title='Detail SKPD'><i class='fa fa-eye' style='color:white'></i></button>");
But it went like this:
<button class="btn btn-info btn-sm" onclick="viewskpd(" 00cc72988f8240428b25ac5327b2a3c6')'="" data-toggle="tooltip" title="" data-original-title="Detail SKPD"><i class="fa fa-eye" style="color:white"></i></button>
But I am not sure why the onclick function that trigger viewskpd() didnt work.
I have checked the console and it tell me like this.
Uncaught SyntaxError: Invalid or unexpected token
Why is this happen ?

The oData.id needs to be quoted so it's a string that is quoted with different quotes than enclosing the onclick attribute:
onclick='viewskpd(\""+oData.id+"\")'
In full:
$($0).html("<div class='btn-group'> <button class='btn btn-info btn-sm' onclick='viewskpd(\""+oData.id+"\")' data-toggle='tooltip' title='Detail SKPD'><i class='fa fa-eye' style='color:white'></i></button>");

You're entering some pretty wild territory... script injected into markup attributes by scripts which were probably originally inside of markup language itself. Don't do this, it's a nightmare.
Try something like this instead:
<button data-action="viewskpd" data-skpd-id="00cc72988f8240428b25ac5327b2a3c6" ...
In your script...
$(body).on('click', 'button[data-action="viewskpd"]', (e) => {
console.log(e.target); //
});
Untested, but that should get you started. Put your data in the markup, but your script in your script. Keep them separate.

Why don't you assign an ID to <button class='btn btn-info btn-sm' ... and program its click event in JS?
At whereever the location that you are having oData.id, you could do something like follows.
<button id='id1' class='btn btn-info btn-sm' ...
Then use this id1 as the selector and program that element's click event, which would be like,
$(document).on("click", "#id1", function(){
viewskpd(oData.id); // Call the required function
});

Actually you need a string variable inside viewskpd function. Use toString() function for it, you must write like below:
$(nTd).html("<div class='btn-group'> <button class='btn btn-info btn-sm' onclick='viewskpd("+oData.id.toStirng()+")' data-toggle='tooltip' title='Detail SKPD'><i class='fa fa-eye' style='color:white'></i></button>");
The 00cc72988f8240428b25ac5327b2a3c6 has no meaning for JavaScript until you turn it to string .

Alternatively you may use `. Please note that this is a specific character different from " and '. Then enclose the variable into ${}, it allows better readability:
let ntd = document.getElementById("ntd");
ntd.outerHTML = `<div class='btn-group'>
<button class='btn btn-info btn-sm'
onclick='viewskpd("${oData.id}")'
data-toggle='tooltip' title='Detail SKPD'>
<i class='fa fa-eye' style='color:white'>
</i></button></div>`;

How to pass value from php to jquery function my code is given below

The following is my code. Without passing value working well.
function add(name) {
alert(name);
}
<button type="button" id="button" class="btn btn-success" onclick="add("Aftab");">
Send
</button>

You can do it like that:
<button type="button" id="button" class="btn btn-success" onclick="add('<?php echo $name; ?>');">
Send
</button>
function add(name){
alert(name);
}

You have added in this way value to function in this way which is wrong.
The issue is due to double quotes.
onclick="add("Aftab");"
Use this
onclick="add('Aftab');"
or
onclick='add("Aftab");'
function add(name) {
alert(name);
}
<button type="button" id="button" class="btn btn-success" onclick="add('Aftab');">
Send
</button>

name a button javascript

well guys i need to know how give a button a name like dont paye attention to the link it's not that necessary:
<button class="btn btn-success pull-right" name="next">Suivant</button>
here what i did in javascript but i need to add the attribute "name" with value "next" in "q" button
function(a){a.fn.smartWizard=function(m){var c=a.extend({},a.fn.smartWizard.defaults,m),x=arguments;
return this.each(function(){function C(){var e=b.children("div");
b.children("ul").addClass("anchor");
e.addClass("content");
n=a("<div>Loading</div>").addClass("loader");
k=a("<div></div>").addClass("actionBar");
p=a("<div></div>").addClass("stepContainer");
q=a("<a>"+c.labelNext+"</a>").attr("href","#").addClass("btn btn-default pull-right");
r=a("<a>"+c.labelPrevious+"</a>").attr("href","#").addClass("btn btn-default pull-left");
s=a("<a>"+c.labelFinish+"</a>").attr("href","#").addClass("btn btn-success pull-right");
c.errorSteps&&0<c.errorSteps.length&&a.each(c.errorSteps,function(a,b){y(b,!0)});
p.append(e);
k.append(n);
b.append(p);
b.append(k);
c.includeFinishButton&&k.append(s);
k.append(q).append(r);

How about using the attr() function like you use for defining a href:
$('#yourButton').attr('name', 'yourName');
To create a button on the fly:
var btn = $('<button/>').attr('name', 'next').addClass('btn btn-success pull-right');
Which results in the following HTML:
<button class="btn btn-success pull-right" name="next"></button>

Javascript Onclick, won't work

I'm using Bootstrap as framework.
I'm new in JS so help me out.
I need a "button value" to change when clicked.
Button looks like this:
<button id="btn_out" name="btn_in_out" class="btn btn-lg btn-danger primary col-xs-offset-7" type="submit" onclick="sayThanks()" value="out">Ut</button>
And here is my JS:
<script>
function sayThanks(){
var element = document.getElementByld('btn_out');
element.innerHTML="Tack";
</script>
It's place between "head" tags.
Why doesn't it work?

Change getElementByld to getElementById(with an I) and close the function curly brace
function sayThanks(){
var element = document.getElementById('btn_out');
element.innerHTML="Tack";
}
function sayThanks(){
var element = document.getElementById('btn_out');
element.innerHTML="Tack";
}
<button id="btn_out" name="btn_in_out" class="btn btn-lg btn-danger primary col-xs-offset-7" type="submit" onclick="sayThanks()" value="out">Ut</button>

You have couple of problems
1.getElementById misspelled
2.Missing closing }
function sayThanks(){
var element = document.getElementById('btn_out');
element.innerHTML="Tack";
}

Well, it looks like you misstyped the function getElementByld and did not close the whole function itself. If you changed it to getElementById it is probably going to work.
<button id="btn_out" name="btn_in_out" class="btn btn-lg btn-danger primary col-xs-offset-7" type="submit" onclick="sayThanks()" value="out">Ut</button>
function sayThanks(){
var tE = document.getElementById('btn_out');
if (tE) tE.innerHTML = 'Tack';
}
Furthermore, I would just pass the element to the function instead of searching for it, since it is the caller anyway.
<button id="btn_out" name="btn_in_out" class="btn btn-lg btn-danger primary col-xs-offset-7" type="submit" onclick="sayThanks(this)" value="out">Ut</button>
function sayThanks(e){
e.innerHTML = 'Tack';
}

I think this code will help you
html:
<button id="btn_out" name="btn_in_out" class="btn btn-lg btn-danger primary col-xs-offset-7" type="submit" value="out">Ut</button>
javascript:
document.getElementById("btn_out").onclick = sayThanks;
function sayThanks(){
this.innerHTML="Tack";
}
Fiddle

You have misspelled the getElementById: getElementById not getElementByld
http://jsfiddle.net/hn0j9tra/
If you use inline javascript, you should provide an id as a parameters into your function:
<script>
function sayThanks(id){
document.getElementById(id).innerHTML="Tack";
}
</script>
<button id="btn_out" name="btn_in_out" class="btn btn-lg btn-danger primary col-xs-offset-7" type="submit" value="out" onclick="sayThanks(this.id)">Ut</button>
Working demo