How to pass HTML textbox data and retrieve edited text from C# code behind?

Question

I am trying to pass the value of a HTML textbox to C# code behind and return the value but I get "Error: SyntaxError: Unexpected end of JSON input". I am new to this and trying to learn how to do it. I know that web APIs are better, however, I would like to try it this way first.

I have tried.value in the jQuery statement and Request.QueryString in the code behind (although I believe it should be as I have it coded due to it being a Get?). Neither of these worked. I have looked at many resources on this site and others, most deal with aspx front end vs HTML, but I can't seem to find anything on returning data like I am trying... but there is so much out there that I imagine it is just my search query not being the best.

Here is my jQuery statement:

    var uri3 = 'http://localhost:60970/CustName.aspx';

     function GetName() {
        $.getJSON(uri3)
            .done(function (data) {
                $("#p1").text(data);
            })
            .fail(function (jqXHR, textStatus, err) {
                $("#p1").text('Error: ' + err);
            });

The HTML code where it pulls the input from (id="txtFName") and where I would like the text to go (id="p1") when it gets back to the document:

        <p>
            Please enter your name:
            <input id="txtFName" type="text" />
            <input id="btnName" type="button" value="Input" onclick="GetName();" />
        </p>
        <p id="p1"></p>

And the C# code where the input is sent:

    protected void Page_Load(object sender, EventArgs e)
    {
        String v_fname; 
        v_fname = Request.Form["txtFName"];
        Response.Write(v_fname);
    }

I expect that the output will be the input name (in the code's current form) but in the #p1 area. Like I previously stated, I am new at this so I am hoping that it is a syntax error. Thanks for any pointers you can give.

Answer 1

You can pass your data using query string.

 Please enter your name:
 <input id="txtFName" name="txtFName" type="text" />
 <input id="btnName" type="button" value="Input" onclick="GetName();" />

<script>

function GetName() 
{
    window.open('CustName.aspx?txtFName='+ $('#txtFName').val());
}

</script>

protected void Page_Load(object sender, EventArgs e)
{
     String v_fname;
     v_fname = Request.QueryString["txtFName"];
     Response.Write(v_fname);
}

Answer 2

Please enter your name:
 <input id="txtFName" name="txtFName" type="text" />
 <input id="btnName" type="button" value="Input" onclick="GetName();" />
 <asp:HiddenField id="hdnName" runat="server"/>

<script>

function GetName() 
{
   var name = $('#txtFName').val();
   $('#<%=hdnName.ClientID%>').val(name);
}

    </script>

    protected void Page_Load(object sender, EventArgs e)
    {
        string name = hdnName.value();
         Response.Write(name);
    }