CODEWITHSUNDEEP
javascriptasp.netsql-serverdatabaseconnection
Haakon
Haakon

Reputation: 15

How to send data from a field generated using javascript and ASP.NET to a Microsoft SQL?

I have created a code using Javascript and ASP.NET to generate fields necessary for a survey and I would like to know how to send the text inside the field into a database. Here is my code using ASP.NET to generate the table. My goal is to create a web app like google form that can let non-programmers create a survey.

<div class="form-group" style="margin:auto; width:80%;">
    <form name="add_question" id="add_question">
        <asp:Label ID="Label1" runat="server" Text="Survey Title: " Font-Size="Large"></asp:Label>
        <input type="text" name="title" id="title" class="form-control question_list" placeholder="Enter Survey Title"/>
        <asp:Label ID="Label2" runat="server" Text="Description: " Font-Size="Large"></asp:Label>
        <br>
        <textarea rows="4" style="margin:auto; width:100%; resize: none;" name="description" id="description"  placeholder="Enter description"></textarea>
        <table class="table" id="dynamic_field">
            <thead>
            <tr>
                <th style="width: 50%">Question</th>
                <th style="width: 15%">Type of Question</th> 
                <th style="width: 32%">Fields</th>
                <th style="width: 3%">Remove</th>
            </tr>
            </thead>
            <tbody>
            </tbody>
        </table>
    </form>
    <button type="button" name="add" id="add" class="btn btn-warning" > Add Question </button>
    <asp:Button name="submit" id="submit" class="btn btn-success" runat="server" Text="Submit" OnClick="submit_Click" />           
 </div>

And here is the code for the javascript that creates new rows in the table and generates the field depending on the question type selected.

//ADD TABLE ROWS
$("#add").click(function () {
        i++;
        $("#dynamic_field tbody").append('<tr id="row' + i + '"> <td> <input type="text" name="question' + i + '" id="question'
        + i + '" class="form-control question_list" placeholder="Enter question"/> </td><td><select name="type' + i + '" id="' + i + '" class="dropdown">'
        + '<option selected></option>'
        + '<option value="1">Multiple Choice</option>'
        + '<option value="2">CheckBox</option>'
        + '<option value="3">Short Sentence</option>'
        + '<option value="4">Paragraph</option>'
        + '<option value="5">Line Scale</option>'
        + '</select></td><td></td><td><button name="remove' + i + '" id="'
        + i + '" class="btn btn-danger btn_remove"> X </button>  </td> </tr> ');
    });
$(document).on('change', '.dropdown', function () {
    var xid = $(this).attr("id");
    if ($(this).val() == '3') {
        $('#myInput' + xid + '').remove();      
        var row = document.getElementById("row"+xid+"");
        var z = row.insertCell(2);        
        z.innerHTML = '<td style="width: 32%"><input name="3" id="myInput' + xid + '" type="text" style="width: 100%" /></td>';
        row.deleteCell(3);
    }
    else if ($(this).val() == '4') {
        $('#myInput' + xid + '').remove();
        var row = document.getElementById("row"+xid+"");
        var z = row.insertCell(2);
        z.innerHTML = '<td style="width: 32%"><textarea rows="2" cols="40" name="4" id="myInput' + xid + '" style="margin:auto; width:100%; resize: none;" ></textarea></td>';
        row.deleteCell(3);
    }
});

Upvotes: 0

Views: 57

Answers (1)

danish
danish

Reputation: 5610

Since you are creating the controls on the client side, server will not know about them. In this scenario, since you as using ASP.Net and have a submit button, the value in the text box and dropdown will indeed be sent back to server in the Request.Forms object. For instance, if you have a textbox with name question1, on the click event handler for submit button, you can try something like this:

Request.Forms["question1"]

This will give you the value in the textbox which is posted back to server.

Note that there are other ways to handle this kind of dynamic scenarios which you may want to take a look at.

Upvotes: 1

Related Questions