Reputation: 2345
HTML Code
<div id="address" class="col s12">
<div class="row">
<form method="post" action="" id="addressDetails">
<div class="input-field col s6">
<textarea id="lAddress" name = 'lAddress' minlength='20' maxlength='100' class="materialize-textarea" class="validate" required length="100"></textarea>
<label for="lAddress" data-error="Must be between 20 to 100 Characters">Local Address</label>
</div>
<div class="input-field col s6">
<textarea id="pAddress" name = 'pAddress' minlength='20' maxlength='100' class="materialize-textarea" class="validate" required length="100"></textarea>
<label for="pAddress" data-error="Must be between 20 to 100 Characters">Permanent Address</label>
</div>
</form>
</div>
<div class="row center-align">
<button type="submit" name="submitAddress" form="addressDetails" class="waves-effect waves-light light-blue darken-1 btn updateProfile">Save Address Details</button>
</div>
</div>
JS Code
function updateProfile(event) {
console.log(this);
event.preventDefault();
form = $(this).closest('.col s12').find('form');
console.log($(form));
$.ajax('profile/updateProfile.php', {
type: "POST",
dataType: "json",
data: form.serialize(),
success: function(result) {
//console.log(result);
}
});
}
$(document).ready(function() {
$("button.updateProfile").on('click', updateProfile);
});
I check network AJAX calls using Chrome Debugger. None of the key value pairs are being passed.
There is no errors in Console Logs.
Upvotes: 0
Views: 2247
Reputation: 43
Reference the form id
form = $('#addressDetails');
also you could place an alert on form.Serialize() to see exactly the output it may not match the object your method is expecting.
you could also build the data up by using
data:'{lAddress: form.lAddress.val(), pAddress: form.pAddress.val()}'
Upvotes: 0
Reputation: 924
Instead of
form = $(this).closest('.col s12').find('form');
use
form = $(this).parent().closest('.col,.s12').find('form');
which matches all the classes and then find the form element
on 4th line of JS code..
Upvotes: 0
Reputation: 337743
Your selector in closest()
is incorrect. There should be no spaces and both values should be preceded by a .
to signify a class selector. Try this:
var form = $(this).closest('.col.s12').find('form');
Upvotes: 2