CODEWITHSUNDEEP
javascriptjqueryajax
MiscellaneousUser
MiscellaneousUser

Reputation: 3063

Beginners to JQuery

The following is my form

<form id="form1">
    <table>
        <tr><td >Name:</td><td class="CommentsRight"><input type="text" name="txtName" style="width:90%" /></td></tr>
        <tr><td >Email: (Optional)</td><td class="CommentsRight"><input type="text" Name="txtEmail" style="width:90%" /></td></tr>
        <tr><td >Comment: </td><td class="CommentsRight"><textarea type="text" style="width:90%" Name="txtMessage" TextMode="MultiLine" Rows="10"></textarea></td></tr>
        <tr><td ></td><td class="CommentsRight"><input type="submit" width="100" ID="cmdSubmit" onclick="javascript: SubmitComment();" />&nbsp;&nbsp;&nbsp;<input type="button" ID="cmdCancel" Text="Reset" value="Reset" onclick="document.getElementById('form1').reset();" /></td></tr>
    </table>
</form>

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js" type="text/javascript"></script>

function SubmitComment()
{
    alert($("txtName").val());

    $.ajax({
        type: "POST",
        url: "@(Request.RawUrl)",
        data: '{txtCode: "' + $("#txtName.value") + '" }',
        contentType: "application/json; charset=utf-8",
        dataType: "json",
        success: function () { alert('success'); } ,
        failure: function (response) {
            alert(response.d);
        }
    });
}

The alert is bringing back undefined all the time for the alert, i'm a beginner to Ajax/Jquery. I've tried #txtName, I've tried input also but it doesn't return any value I put into the txtName, what am I do wrong. I want to then extend data so i pass all the input strings into the data.

In short,

  1. How do I get the value of txtName.text
  2. How do I build up the data string so it contains separated data values

Your help most appreciated.

Upvotes: -1

Views: 207

Answers (6)

Maths RkBala
Maths RkBala

Reputation: 2195

Try the following:

<input type="text" name="txtName" style="width:90%" />

Into 

<input type="text" name="txtName" id="txtName" style="width:90%" />

javascript: SubmitComment();

Into

javascript: SubmitComment(e);

function SubmitComment()
{

Into

function SubmitComment(e)
{
    e.preventDefault();

alert($("txtName").val());

Into

alert($("#txtName").val());

data: '{txtCode: "' + $("#txtName.value") + '" }',

Into

data: {txtCode: $("#txtName").val() }, // Send particular data
(or)
data: $("#form1").serialize(), // Send inside form all data

Upvotes: 2

giovaZ
giovaZ

Reputation: 1470

I think that you have the answer to your first question.

use $("#txtName').val() for receive the value of the field,

you can achieve your second question in multiple ways:

  1. Using the .serialize() function

like Marcel wrote you can create a variable data where you serialize the form and pass it to the $.ajax function like this:

var data = $("#form1").serialize();
$.ajax({
    type: "POST",
    url: "@(Request.RawUrl)",
    data: data,
    contentType: "application/json; charset=utf-8",
    dataType: "json",
    success: function () { alert('success'); } ,
    failure: function (response) {
        alert(response.d);
    }
});

2. Using FormData Object

Update your function intercepting a submit event to your form, create a FormData Object and pass your form like this:

$("#form1").submit(function(e){
    e.preventDefault();
    var formdata = new FormData($(this)[0]);
    $.ajax({
       type: "POST",
       url: "@(Request.RawUrl)",
       data: formdata,
       contentType: "application/json; charset=utf-8",
       dataType: "json",
       success: function () { alert('success'); } ,
          failure: function (response) {
             alert(response.d);
          }
    });

});

Whit this method you can also insert custom data to pass:

formData.append('action', 'customAction');
formData.append('id', 123);
formData.append('mydogname', 'Jo');

3. Using post() function

This is one of the simpliest way to send post data using Ajax (Documentation ). It's also easy to customize and use Jquery Logics.

$( "#form1" ).submit(function( event ) {
  event.preventDefault();
  var $form = $( this ),
    data = $form.serialize();
  var posting = $.post( "@(Request.RawUrl)", data );
  posting.done(function( data ) {
     alert(data);
  });
});

I hope this will help you.

Upvotes: 0

Raghavendra N
Raghavendra N

Reputation: 217

$("input[name=txtName]").val() is to get the value by name. $("#id").val() is to get value by its id. $(".class").val() is to get value by class name.

Upvotes: 0

KOUSIK MANDAL
KOUSIK MANDAL

Reputation: 2052

Look you can do it in many ways. According to your markup you can try to get value of txtName in following way

$("input[name=txtName]").val();

Or you can add an id with the input field in following way

<input name="txtName" id="someid">

And finally to get value use following code

$("#someid").val()

Upvotes: 0

Haresh Vidja
Haresh Vidja

Reputation: 8496

you have written wrong code in data parameter in ajax request. you can pass object of paramater then jQuery take care of it to convert into Raw POST data or Query string.

function SubmitComment()
{
    alert($("txtName").val());

    $.ajax({
        type: "POST",
        url: "@(Request.RawUrl)",
        data: {txtCode: $("#txtName").val()},
        dataType: "json",
        success: function (data) { alert('success'); alert(JSON.stringify(data)) } ,
        failure: function (response) {
            alert(response.d);
        }
    });

Upvotes: 0

Marcel Wasilewski
Marcel Wasilewski

Reputation: 2679

You can not use $("txtName") as you did it. jQuery will not know what to select. There is no class/id or any other selector. Rather use $("input[name=txtName]").val() or give the txtName a class or id (like i did in my example below).

If you want to send the form now in a nice Json you need to serialize it:

var data = $("#form1").serialize();

https://jsfiddle.net/gahapv4t/

Upvotes: 1

Related Questions