0

I have an apsx page in the asp.net application, elements of which are built using javascript according to the user's input. When the user clicks the "Save" button I need to create a file on the server with all the data provided by the user. The problem is that this data is stored in the javascript(in the generated divs). I need somehow to get this data into the asp.net button click function or call the function with all the data as arguments. How can it be implemented?

Improve this question
2
  • 1
    do you have input fields ? when you have those, you could take that area where your generated div's are and wrap them within an form and submit that form when the user clicks save. And then you just read the inserted content and redirect to the next page, Commented Feb 9, 2012 at 8:28
  • but server side cannot process dynamic inputs generated by javascript Commented Feb 9, 2012 at 9:07

3 Answers 3

Reset to default
2

You can always try and pop the data you need in hidden input fields on the form, so you can access it with Request.Form["fieldName"] (just remember to give the hidden input fields a "name" attribute, else you'll spend an unnecessary amount of hours trying to figure out why you can't access it via Request.Form :P) from the code-behind. That's probably the easiest way to achieve this...

EDIT

Just to give you a quick idea, here's some sample code from one of my projects where I generate hidden inputs fields based on certain dynamic fields to post back to the server once the Save() function is called from certain buttons / anchors:

function Save() {
    $("div.fieldcontainer span.readonly").each(function () {
        var fieldId = $(this).attr("id");
        var fieldValue = $(this).html();
        var ctrl = $("<input type=\"text\" id=\"" + fieldId + "\" name=\"" + fieldId + "\" style=\"display:none;\" />");
        ctrl.val(fieldValue);
        $(this).parent().append(ctrl);
    });
    $("div.fieldcontainer a.attachment").each(function () {
        var fieldId = $(this).attr("id");
        var fieldValue = $(this).text() + "|" + $(this).attr("href");
        var ctrl = $("<input type=\"text\" id=\"" + fieldId + "_txtHiddenValue\" name=\"" + fieldId + ":txtHiddenValue\" style=\"display:none;\" />");
        ctrl.val(fieldValue);
        $(this).parent().append(ctrl);
    });
    $("div.fieldcontainer select").each(function () {
        var fieldId = $(this).attr("id");
        var fieldValue = $(this)[0].value;
        var fieldText = $(this).find("option[value='" + fieldValue + "']").text().replace("<", "").replace(">", "");
        $(this).attr("id", fieldId + "_ORIGINAL");
        var ctrl = $("<input type=\"text\" id=\"" + fieldId + "\" name=\"" + fieldId + "\" style=\"display:none;\" />");
        ctrl.val(fieldText + "$" + fieldValue);
        $(this).parent().append(ctrl);
    });
    $("div.fieldcontainer input[type='checkbox']").each(function () {
        var fieldId = $(this).attr("id");
        var fieldValue = $(this).attr("checked");
        $(this).attr("id", fieldId + "_ORIGINAL");
        var ctrl = $("<input type=\"text\" id=\"" + fieldId + "\" name=\"" + fieldId + "\" style=\"display:none;\" />");
        ctrl.val(fieldValue);
        $(this).parent().append(ctrl);
    });
    document.form1.submit();
}

You can possibly implement the same type of logic to cycle through each of your client-generated DIVs and create a hidden input for each before submitting the form. That way you don't unnecessarily bog down the page with too much extra markup while the user is busy interacting with it...

Improve this answer
Sign up to request clarification or add additional context in comments.

2 Comments

but the hidden inputs will be also created by javascript, where's the logic? if you suggest that I create hidden inputs in the plain html - it's impossible. I don't know how many inputs will user generate
You can create them in Javascript... As long as they are within the <form> element, they should be posted back to the server as well. There won't be any server-side controls mapped to those ids / names, but you'll be able to access the values using Request.Form.
1

When you show the data in divs, also save the data in hidden fields. This way, when your form will be posted, you'll get the data on the server and you can save it.

Edit

Here's an example:

<head runat="server">
    <title>my title</title>
    <script type="text/javascript">
        function init() {
            document.getElementById("output").innerHTML="<input type='hidden' name='name' value='wasim'/>";
        }
    </script>
</head>
<body onload="init();">
    <form id="form1" runat="server">
    <div id="output">

    </div>
    <asp:Button ID="btnSubmit" runat="server" Text="Submit" onclick="Button1_Click" />
    <br />
    <asp:Label ID="lblOutput" runat="server" Text="Label"></asp:Label>
    </form>
</body>
</html>

and here is the server-side code:

 protected void Button1_Click(object sender, EventArgs e)
    {
        lblOutput.Text = Request.Form["name"];
    }
Improve this answer

5 Comments

do you mean also generate inputs from javascript? I've tried but it doesn't work - server code cannot process inputs generated by javascript.
did you try Request.Form["fieldName"] to get the value??
yes, I've created hidden input, set its type, value and id with setAttribute("key", "value"), added it to the form by document.getElementById("myForm").appendChild(hiddenInput)
did you also add the name? <input type="hidden" name="fieldName" value="yourData"/> and the used Request.Form["fieldName"] on server?
I've added both name and id, they're the same, I've even added setAttribute("runat", "server"). Are you sure that dynamically created inputs can be processed?
0

use a hidden variable to store the user input <input type="hidden" name="user_input_id" id="user_input_id" />

In the button click function, use the Request.QueryString["user_input_name"].Value or user_input_id.Value to retrieve the value

If this is not clear, post your code snippet and will give you a better picture

Improve this answer

3 Comments

do I understand right that all hidden fields should be created in the html and be static? If it's so then it's impossible because the number of user's dynamically generated inputs is unknown.
you can create hidden field dynamically using javascript like this var hiddedField = document.createElement("input"); hiddenField.type = "hidden". Will this serve your purpose??
server side cannot process dynamically created inputs

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.