how to pass @model.ApplicationId from html form to js

Question

I am trying to make an auto save function that will save the form data. I am unable to pass my ApplicationId in from form to JS in order to auto save. Though with the fixed id, auto saving does work. I have the following code:

Js Code:

window.setInterval(AutoSaveDraft(id), 50000);



function AutoSaveDraft(id) {  
   $.post({
         url: "/Application/Edit/"+id ,
         data: $("#application-form").serialize()
         }).done(function(data, textStatus, jqXhr) {
      if (jqXhr.status === 200) {
          alert("Data Application has been saved");        
          return true;
       }
    });
}

Html CODE:

<form asp-action="Edit" id="application-form" name="@Model.ApplicationId" >
...
</form>

Basically, I want the @Model.ApplicationId to be passed to my Js, so that I can use that in my Autosaving function.

It doesn't matter. I basically want to use it in my AutoSaveDraft(). So I just need id there. — Tina, Nov 06 '17 at 21:15
`window.setInterval(AutoSaveDraft('@Model.ApplicationId'), 50000);` should work here — dbraillon, Nov 06 '17 at 21:17
Possible duplicate of [How to get the value of an attribute in Javascript](https://stackoverflow.com/questions/37880165/how-to-get-the-value-of-an-attribute-in-javascript) — Christian Gollhardt, Nov 06 '17 at 21:23
dbraillon-I have a separate Js file so @Model.ApplicationId is not working. I tried using it. — Tina, Nov 06 '17 at 21:34

Get Off My Lawn · Answer 1 · 2017-11-06T21:22:54.110

1

First off, your interval is wrong. What you are doing is calling a function and passing the result to the interval. You need to pass it a function that it can then call when needed. You are calling your function right away.

Next, all you need to do, is to use jQueries attr() method like so:

let id = 'application-form'
window.setInterval(() => AutoSaveDraft(id), 5000);

function AutoSaveDraft(id) {
  let name = $(`#${id}`).attr('name')
  console.log(name)
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form asp-action="Edit" id="application-form" name="@Model.ApplicationId">

</form>

edited Nov 06 '17 at 21:22

answered Nov 06 '17 at 21:17

Get Off My Lawn

34,175
38
176
338

OP isn't using the id variable as you do, he needs to get an id from it's Model and to use it to build the url in ajax request. – dbraillon Nov 06 '17 at 21:25
My question asked how it was to be used, the answer was that they just want access to it, which is how I answered. – Get Off My Lawn Nov 06 '17 at 21:27
GetOffMyLawn- It didn't work for me. I tried . Is there any other way in which I can use the @Model.ApplicationId in Js? – Tina Nov 06 '17 at 21:40
In which way did it not work? If you run the code, you will see that it is getting the value. More information would be helpful. – Get Off My Lawn Nov 06 '17 at 21:41

score 1 · Accepted Answer · answered Nov 06 '17 at 21:39

Let's say you have your JS on the same page as your html, you could simply write:

window.setInterval(function () {
   var id = '@Model.ApplicationId'; // Turned C# to JS here
   AutoSaveDraft(id);
}, 50000);

function AutoSaveDraft(id) {  
   $.post({
      url: "/Application/Edit/"+id ,
      data: $("#application-form").serialize()
   }).done(function(data, textStatus, jqXhr) {
      if (jqXhr.status === 200) {
          alert("Data Application has been saved");        
          return true;
       }
   });
}

Now let's say your JS is somewhere else:

HTML:

<form asp-action="Edit" id="application-form" name="@Model.ApplicationId" >
...
</form>

JS:

window.setInterval(function () {
   var id = $("#application-form").attr('name'); // Retrieve the ID
   AutoSaveDraft(id);
}, 50000);

function AutoSaveDraft(id) {  
   $.post({
      url: "/Application/Edit/"+id ,
      data: $("#application-form").serialize()
   }).done(function(data, textStatus, jqXhr) {
      if (jqXhr.status === 200) {
          alert("Data Application has been saved");        
          return true;
       }
   });
}

That's said, I would suggest you to use data- attribute to pass that kind of data. Let's try with data-application-id.

<form asp-action="Edit" id="application-form" data-application-id="@Model.ApplicationId">
...
</form>

window.setInterval(function () {
   var id = $("#application-form").data("application-id"); // Retrieve here
   AutoSaveDraft(id);
}, 50000);

how to pass @model.ApplicationId from html form to js

2 Answers2