asked on

Using DropZone and sending another hidden form field value to the controller based on the value of another field on the same View.

I am using DropZone but would like to send another form field to my controller. I don't think I can add the form field inside the Form - other than as a hidden field.
I have my View as:

    @{
        ViewBag.menu = false;
        ViewBag.Title = "Upload New ARC Request";
        ViewBag.maxFiles = 1;
    }

<div class="col-xs-10">

        <div class="row">
            <div class="col-xs-6">
                @Html.Label("Title:")
                @Html.TextBox("NewTitle", null, new
           {
               @class = "form-control",
               @placeholder = "Enter Title",
               @id = "NewTitle"
           })
            </div>
          </div>

            <div class="row">
                @using (Html.BeginForm("Upload", "Upload", FormMethod.Post, new
                {
                    @class = "dropzone dz-clickable",
                    @enctype = "multipart/form-data",
                    @id = "documentDropzone"
                }))
                {
                   @Html.Hidden("title", t)
                        <div class="dz-message">
                            Drop files here or click to upload.
                        </div>
                }
            </div>
            <script type="text/javascript">
                Dropzone.options["documentDropzone"] = {
                    maxFilesize: 10000,
                    acceptedFiles: "application/pdf"
                };
            </script>
        </div>

</div>

<script type="text/javascript">
    function HiddenValue() {
        var t = document.getElementById('NewTitle');
    }
</script>

@if (ViewBag.maxFiles != null)
{
    <script type="text/javascript">
        Dropzone.options.documentDropzone = {
            maxFiles: @ViewBag.maxFiles,
            accept: function (file, done) {
                done();

                document.getElementsByTagName("Form")[0].submit();
            },
            init: function () {
                this.on("maxfilesexceeded", function (file) {
                    try{
                        swal({
                            title: "Max Files Exceeded",
                            text: "The max amount of files have been reached",
                            type: "error"
                        });
                    }
                    catch(e){
                        alert("The max amount of files have been reached");
                    }
                });
            }
        };
</script>
}

Open in new window

I am getting the value of my Hidden Field to my Controller. What I need to know how to do is update the Hidden Form Title with the value of t.

Zakaria Acharki

Hi Crystal, it a bit unclear what you're asking, please try to simplify more your question that will help us to provide an answer quickly.

Crystal Rouse

ASKER

I am sorry, I will try to clarify. I am using DropZone.js allowing users to upload files which imports the fields in our database. I need to add an extra hidden field to the form submission allowing Users to enter a Title if they wish. I want to set the value of the Hidden field to the value of the Title input field which is elsewhere on the View (outside of the form submission). I thought I could do it by an onchange event on the Title input field but am still passing null.

View has this:

\ <div class="row">
            <div class="col-xs-6">
                @Html.Label("Title:")
                @Html.TextBox("Title", null, new
           {
               @class = "form-control",
               @placeholder = "Enter Title",
               @id = "Title",
               @onchange = "setTitle();"
           })
            </div>
        </div>

   @using (Html.BeginForm("Upload", "Upload", FormMethod.Post, new
        {
            @class = "dropzone dz-clickable",
            @enctype = "multipart/form-data",
            @id = "documentDropzone"
        }))
        {
            <div class="row">

                @Html.Hidden("Name", null)
                        <div class="dz-message">
                            Drop files here or click to upload.
                        </div>
           </div>
         }

<script type="text/javascript">
    function setTitle() { 
        var name = document.getElementById("Title");
        var newTitle = document.getElementById("Name");
        newTitle = name;
    }
</script>

Open in new window

ASKER CERTIFIED SOLUTION

Zakaria Acharki

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

Crystal Rouse

ASKER

It actually wrote [object HTMLInputElement]
So I'm getting close!

Shinesh Premrajan

newTitle.value = name.value;

i suggest avoid using reserved variable name like "name", instead use some context related name.

Hope this helps