Menu
Hi I'm currently trying to get a form to post a controller using AJAX however I've had no luck so far, I have been trying to get the form to submit the values in the form to the controller on the submit of the form but it won't work does anybody know why? :
CSHTML:
@{
Layout = null;
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width" />
<title>Abintegro Search Prototype</title>
<link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<script>
$("#submitsearch").click(function (e) {
e.preventDefault();
var form = $("#searchform");
$.ajax({
url: "Search/GetSearchDetails",
data: form.serialize(),
type: 'POST',
success: function (data) {
//Show popup
$("#popup").html(data);
}
});
});
</script>
<!-- Javascript function to add autocomplete search phrases for the company name text search-->
<script>
$(function () {
var searchPhrases = [
"Zep Solutions",
"Wetherby Consultants Ltd",
"Webmploy",
"WATS Recruitment Ltd",
"Vital Resources",
"VG Charles and Co",
"Veredus UK",
"Venn Group",
"VanDuo Consulting"
];
$("#phrases").autocomplete({ source: searchPhrases });
});
</script>
</head>
<body>
<form id="searchform" name="searchform">
<div class="company-textbox">
<label for="companyname">Company Name</label>
<input id="phrases" name="companyname">
</div>
<br />
<div class="specialities">
<label for="specialities-dropdown">Specialities:</label>
<select name="specialities-dropdown">
<option value="Consumer Products & Services">Consumer Product & Services</option>
<option value="Support Services">Support Services</option>
<option value="Communication & Entertainment">Communication & Entertainment</option>
<option value="Business & Professional Services">Business & Professional Services</option>
<option value="Public Sector">Public Sector</option>
<option value="Not for profit">Not for profit</option>
<option value="Sports Information">Sports Information</option>
</select>
</div>
<br />
<div class="category">
<label for="category-dropdown">Category:</label>
<select name="category-dropdown">
<option value="Generalist">Generalist</option>
<option value="Specialist">Specialist</option>
<option value="Exec Search">Exec Search</option>
<option value="Interim Management">Interim Management</option>
</select>
</div>
<br />
<div class="location-dropdown">
<label for="location-dropdown">Location:</label>
<select name="Location">
<option value="London">London</option>
<option value="Bristol">Bristol</option>
<option value="Manchester">Manchester</option>
<option value="Birmingham">Birmingham</option>
</select>
</div>
<input type="submit" value="Submit" name="submitsearch" id="submitsearch">
</form>
</body>
</html>
Controller:
[HttpPost]
public string GetSearchDetails(string companyName, string specialities, string category, string location)
{
return liveSearchRepository.GetUserInputResults(companyName,specialities,category,location);
}
213
From what I can see it looks like your form controls and your Controller action does not link up properly because your controls' names is not the same as your action's parameters.
Also change the contentType in your ajax call to JSON and convert the form data to a JSON string. That way if you output the form data to the console before submitting it via Ajax, you can see what is sent through.
Try the following modifications:
@{
Layout = null;
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width" />
<title>Abintegro Search Prototype</title>
<link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<script>
$("#submitsearch").click(function (e) {
e.preventDefault();
var formData = JSON.stringify($("#searchform").serializeArray());
console.log(formData);
$.ajax({
url: "Search/GetSearchDetails",
data: formData,
type: 'POST',
contentType: 'json'
success: function (data) {
//Show popup
$("#popup").html(data);
}
});
});
</script>
<!-- Javascript function to add autocomplete search phrases for the company name text search-->
<script>
$(function () {
var searchPhrases = [
"Zep Solutions",
"Wetherby Consultants Ltd",
"Webmploy",
"WATS Recruitment Ltd",
"Vital Resources",
"VG Charles and Co",
"Veredus UK",
"Venn Group",
"VanDuo Consulting"
];
$("#phrases").autocomplete({ source: searchPhrases });
});
</script>
</head>
<body>
<form id="searchform" name="searchform">
<div class="company-textbox">
<label for="companyName">Company Name</label>
<input id="phrases" name="companyName">
</div>
<br />
<div class="specialities">
<label for="specialities">Specialities:</label>
<select name="specialities">
<option value="Consumer Products & Services">Consumer Product & Services</option>
<option value="Support Services">Support Services</option>
<option value="Communication & Entertainment">Communication & Entertainment</option>
<option value="Business & Professional Services">Business & Professional Services</option>
<option value="Public Sector">Public Sector</option>
<option value="Not for profit">Not for profit</option>
<option value="Sports Information">Sports Information</option>
</select>
</div>
<br />
<div class="category">
<label for="category">Category:</label>
<select name="category">
<option value="Generalist">Generalist</option>
<option value="Specialist">Specialist</option>
<option value="Exec Search">Exec Search</option>
<option value="Interim Management">Interim Management</option>
</select>
</div>
<br />
<div class="location">
<label for="location">Location:</label>
<select name="Location">
<option value="London">London</option>
<option value="Bristol">Bristol</option>
<option value="Manchester">Manchester</option>
<option value="Birmingham">Birmingham</option>
</select>
</div>
<input type="submit" value="Submit" name="submitsearch" id="submitsearch">
</form>
</body>
</html>EDIT
If you change the following line:
var formData = JSON.stringify($("#searchform").serializeArray());
With this piece of code:
var formData = "";
$.each($("#searchform"), function(i,v) {
if (formData.length > 0) formData += ",";
formData += v.name + ": '" + v.value + "'";
});
formData = "{ " + formData + " }";
The solution will be generic and you would not have to change the code if you change the names of the form field.
200
Use this Javascript code instead of current one. I have corrected issues in post data and the correct formate is below :
<script>
$("#submitsearch").click(function (e) {
var postData = $(this).serializeArray();
e.preventDefault();
var form = $("#searchform");
$.ajax({
url: "Search/GetSearchDetails",
data: postData,
type: 'POST',
success: function (data) {
//Show popup
$("#popup").html(data);
}
});
});
</script>
answered Oct 21 '22 08:10
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With