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

Why isn't a single form element is not returning value in the controller?

In my Form 3 fields including a hidden.and the rest of the values are perfectly returns in controller ,But the value in the hidden field is not getting .
the value in the hidden field is passing from an anchor tag using java script.
The value for the hidden field is passing from here
<a href="#" onclick="func(#c.vid)" data-toggle="modal" data-target="#myModal3" class="modalLink">
Javascript code to pass the value is
function func(vd){
document.getElementsByClassName("hiddenid").value = vd;
}
Form is look like
<form action="/Home/AddToCart" method="post">
<input type="hidden" id="vid" name="vid" class="hiddenid" />
<div class="styled-input agile-styled-input-top">
<input type="text" placeholder="Name" name="name" id="name"required>
</div>
<div class="styled-input">
<input type="text" placeholder="Star Name" onclick="showsss()" name="star" id="star" required>
</div>
<input type="submit" value="Add To Cart">
</form>
Controller
[HttpPost]
public ActionResult AddToCart(cart data)
{
userService.AddToCart(data);
ViewBag.p = userService;
return RedirectToAction("Temple");
}
The value is passing to the hidden field perfectly.i checked using an alert box.am attaching a screen shot of what am getting in the controller.

getElementsByClassName return an array.
function func(vd){
document.getElementsByClassName("hiddenid")[0].value = vd;
}

getElementsByClassName returns an array. Access single element using array index.
document.getElementsByClassName("hiddenid")[0].value = vd;
Instead of className you can use id as it is present on your hidden field i:e vid.
document.getElementsById("vid").value = vd;
or you can use document.querySelector which will retrieve first match element.
document.querySelector('.hiddenid').value = vd;
or
document.querySelector('#vid').value = vd;

Since you are using byclass its return an array. try this
document.getElementsByClassName("hiddenid")[0].value = vd;
But if you have a multiple products then do you have a add to cart button better to used id like vid-unique_number

Two text html text inputs in two different places on the page with the same submit id

So I have a page called Index.cshtml
I have this input in a form with the id "cvr":
#using (Html.BeginForm("SendMailAsACompany", "Contract", null, FormMethod.Post, new { id = "cvr" }))
{
<input type="hidden" value=#Html.ViewData.Model.StudentId name="studentId" />
<input type="hidden" value=#Html.ViewData.Model.CompanyId name="companyId" />
<input type="hidden" value=#Html.ViewData.Model.ApplicationId name="applicationId"/>
if (User.Identity.GetUserId() == Html.ViewData.Model.CompanyId)
{
<input type="text" name="companyCVR" placeholder="Indsæt CVR-nr."/>
}
}
and at the bottom of the page I have the submit button with the id above ("cvr") where I am trying to add two more forms to pass on to the controller (repFirstName and repLastName):
#if (User.Identity.GetUserId() == Html.ViewData.Model.CompanyId)
{
using (Html.BeginForm("SendMailAsACompany", "Contract", null, FormMethod.Post, new { id = "cvr" }))
{
<input type="text" name="repFirstName" placeholder="Indsæt fornavn" />
<input type="text" name="repLastName" placeholder="Indsæt lastnavn" />
}
<input type="button" value="Submit" onclick="$('#cvr').submit();" class="btn btn-success" />
}
However they will not pass on submit, only the first value (the CPR above). However if I have all three values at the start, they will pass successfully.
How can I have the input in both places and still be able to submit and pass the data to the controller? Do I need two separate forms/ids ?

Only one form is required, remove the second form declaration and associate element with form using form attribute which is defined at the bottom of page.
The form attribute is used to associate an input, select, or textarea element with a form (known as its form owner).
#if (User.Identity.GetUserId() == Html.ViewData.Model.CompanyId)
{
<input type="text" name="repFirstName" placeholder="Indsæt fornavn" form="cvr"/>
<input type="text" name="repLastName" placeholder="Indsæt lastnavn" form="cvr"/>
<button form="cvr" class="btn btn-success">Submit</button>
}

If your generated HTML results in multiple elements that have the same ID, and then you have some inline javascript like this:
<input type="button" value="Submit" onclick="$('#cvr').submit();" />
Then the above javascript will work only for the first #cvr
That is one example of why you cannot / must not have multiple elements on the page with the same ID.
You must refactor your code to only use one element with any given ID. If need to have multiple elements with same moniker, use a class - so your javascript would become:
<input type="button" value="Submit" onclick="$('.cvr').submit();" />
and your generated HTML would be class="cvr" instead of id="cvr"
Alternately, you could ensure that each of your forms uses a different ID, such as id="cvr1", id="cvr2", id="cvr3" and then your javascript could be:
<input type="button" value="Submit" onclick="$('#cvr1, #cvr2, #cvr3').submit();" />

Getting hiddenvalue HTML property from javascript

I am trying to access the hidden HTML value (hiddenvalue) from javascript and storing it into a variable env.
HTML:
<button id="slct" hiddenfield="Forest" type="button" class="btn btn-default">Hello</button>
JS:
$('#slct').click(function (event) {
document.getElementById('env').value = $('#' + $(event.target).data('hiddenfield')).value;
});
What am I missing?

I would create a hidden html field
<input type="hidden" id="someId" value="someValue">
Getting the value of this field would look like:
var theValue = document.getElementById('someId').value;
What you want is probably this:
html:
<input type="hidden" id="env" value="">
<button class="slct" hiddenfield="Forest" type="button" class="btn btn-default">This sets Forest</button>
<button class="slct" hiddenfield="Fruit" type="button" class="btn btn-default">This sets Fruit</button>
javascript:
$('.slct').click(function(event) {
// Set value to hidden field
$('#env').val($(this).attr('hiddenfield'));
});
you can use data() instead of attr(), but the attribute needs to start with 'data-' then. E.g. data('hiddenvalue') to retrieve the value of attribute data-hiddenvalue
(see https://jsfiddle.net/2k0791hk/1/)

How to pass form field value to java function on submit of form?

Here is my form:
<form id="aform">
<input type="text" id="rollno" name="rollno">
<input type="button" value="show result" onclick="showResultFunction ('someurl.com','divtodisplayresult');>
</form>
Question:
Can I pass rollno entered in the function onclick as parameter? Like:
onclick="showResultFunction ('someurl.com','divtodisplayresult',rollno);

try to do:
onclick="showResultFunction ('someurl.com','divtodisplayresult', document.getElementById('rollno').value);

Alternatively, in the Javascript function itself, you can access the rollno value in code:
function showResultFunction(url, div)
{
var rollno = document.getElementById("rollno");
alert(rollno.value);
}