How do I change value of a model using JQuery?

Question

I'm using Asp.Net MVC and I have a model where has an attribute status and in theform has 2 input type =" submit " to submit the form, they are:save and post and save. I want to when I click on button save and post changestatus attribute to value 1, and when user click on button save changestatus to value 0.

To do this I'm trying use JQuery getting the id of input and change the status attribute, but still can't do it.

How could I do this ?

html

<input type="submit" class="btn btn-success" value="Save Post" id="savePost"/>
<input type="submit" class="btn btn-success" value="Save" id="save" />

jquery

$(document).ready(function () {
    $('#addPropriedade').submit(function () {        
        var dados = new FormData($('#addPropriedade').get(0));

        $('#savePost').click(function () {
            dados.status = 1;
            console.log(dados.status);
        });
        $('#save').click(function () {
            dados.status = 0;
            console.log(dados.status);
        });


        $("#errorMessage").hide();

        var loading = $("#div_loading");
        $(document).ajaxStart(function () {
            loading.show();
        });
        $(document).ajaxStop(function () {
            loading.hide();
        });

        $.ajax({
            accepts: { json: 'application/json' },
            dataType: 'json',
            type: "POST",
            url: "/Propriedade/addAjax",
            data: dados,
            processData: false,
            contentType: false,
            success: function (data) {
                var status = data["status"];
                var msg = data["msg"];
                if (status === "1") {
                    $('#addPropriedade').trigger("reset");
                    $("#errorMessage").html(msg);
                    $("#errorMessage").prop("class", "alert-success");
                    //window.location.replace("/Empresa/view");                    
                } else {
                    $("#errorMessage").html(msg);
                    $("#errorMessage").prop("class", "alert-danger");
                }
                $("#errorMessage").show()
            },
            error: function (xhr, status) {
                $("#errorMessage").html("Erro tentando cadastrar");
                $("#errorMessage").prop("class", "alert-danger");
                $("#errorMessage").show()
            }
        });

        return false;
    });
});

Is your click function getting triggered ? when you click on save and post button ? — ISHIDA, May 26 '17 at 19:01

ISHIDA · Accepted Answer · 2017-05-26T19:31:43.233

   $(document).ready(function () {
$('#addPropriedade').submit(function () {        


    $('#savePost').click(function () {
    var dados = new FormData($('#addPropriedade').get(0));
        dados.status = 1;
        console.log(dados.status);
    });
    $('#save').click(function () {
    var dados = new FormData($('#addPropriedade').get(0));
        dados.status = 0;
        console.log(dados.status);
    });


    $("#errorMessage").hide();

    var loading = $("#div_loading");
    $(document).ajaxStart(function () {
        loading.show();
    });
    $(document).ajaxStop(function () {
        loading.hide();
    });

    $.ajax({
        accepts: { json: 'application/json' },
        dataType: 'json',
        type: "POST",
        url: "/Propriedade/addAjax",
        data: dados,
        processData: false,
        contentType: false,
        success: function (data) {
            var status = data["status"];
            var msg = data["msg"];
            if (status === "1") {
                $('#addPropriedade').trigger("reset");
                $("#errorMessage").html(msg);
                $("#errorMessage").prop("class", "alert-success");
                //window.location.replace("/Empresa/view");                    
            } else {
                $("#errorMessage").html(msg);
                $("#errorMessage").prop("class", "alert-danger");
            }
            $("#errorMessage").show()
        },
        error: function (xhr, status) {
            $("#errorMessage").html("Erro tentando cadastrar");
            $("#errorMessage").prop("class", "alert-danger");
            $("#errorMessage").show()
        }
    });

    return false;
});

});

it doesn't change value of `FormData`, look at my JQuery script, I'm using `FormData` — FernandoPaiva, May 26 '17 at 19:17
What are you trying to do excatly ? When user clicks on save button you are trying to post the formdata at the same time you need to set the staus to 0 correct ? — ISHIDA, May 26 '17 at 19:24
yep, the FormData send to controller as a `Model`. The `status` is an attribute of `Model`, can you understand ? — FernandoPaiva, May 26 '17 at 19:28
You need to intalize the form data inside the click function. I have update my answer — ISHIDA, May 26 '17 at 19:33

score 1 · Answer 2 · answered May 27 '17 at 03:01

Hi The simple solution i think is , if you are using the jquery in the same cshtml file where the model is strongly typed.

Then you can directly access the model object using the @ character.

Example:

var status = '@model.status'

And then you can assign whatever value you want.

Detailed example with all other types has explained very well in the below link:

https://stackoverflow.com/a/41312348/3397630

Hope it was helpful, kindly let me know your thoughts or feedbacks

Thanks

Karthik

How do I change value of a model using JQuery?

2 Answers2