After a struggle and some Stackoverflow help I finally got my jQuery to execute right and call my submit method. Right now it only passes null values, and I can't seem to get it to pass my input values.
Here is my HTML with the jQuery at the bottom:
@{
ViewBag.Title = "EventCrush - Registrer Privatbruger";
}
<div class="container-fluid">
<div class="row">
<div class="col-md-2 right-content">
<img src="/Content/img/logo.png" class="animated bounceInDown">
</div>
<div class="col-md-8 center-content">
<h3 class="">Opret Konto</h3><br>
<span>
Med en bruger på EventCrush får du flere muligheder, som f.eks. muligheden for at oprette events!<br>
Det tager kun 2 minutter, så er du klar!
</span>
<br /><br />
<a href="@Url.Action("CorporateUser", "Create")" class="button button-big"><img src="@Url.Content("~/Content/img/ui-icon/corporate-w.png")" style="height: 35px; margin-top: -6px;" /> Erhvervskunde, tryk her!</a>
<br /><br />
</div>
<div class="col-md-4"></div>
</div>
<div class="row">
<div class="col-md-2"></div>
<div class="col-md-4">
<form id="PrivateUser">
<div class="form-group">
<label class="sr-only">Fornavn</label>
<input id="Fornavn" type="text" class="form-control-1" placeholder="Fornavn *" required>
</div>
<div class="form-group">
<label class="sr-only">Efternavn</label>
<input id="Efternavn" type="text" class="form-control-1" placeholder="Efternavn *" required>
</div>
<div class="form-group">
<label class="sr-only">Email</label>
<input id="Email" type="Email" class="form-control-1" placeholder="Email *" required>
</div>
<script> $('.datepicker').datepicker({ language: "da", orientation: "bottom auto" });</script>
<div class="form-group">
<label class="sr-only">Fødselsdag</label>
<input id="Fødselsdag" class="datepicker form-control-1" placeholder="Fødselsdag *" required data-provide="datepicker" data-date-clearbtn="true" data-date-autoclose="true" data-date-format="mm/dd/yyyy">
</div>
<div class="form-group">
<label class="sr-only">Password</label>
<input id="Password" type="password" class="form-control-1" placeholder="Kodeord *">
</div>
</div>
<div class="col-md-4">
<div class="form-group">
<label class="sr-only">Vejnavn</label>
<input id="Vejnavn" type="text" class="form-control-1" placeholder="Vejnavn *">
</div>
<div class="form-group">
<label class="sr-only">Vejnummer</label>
<input id="Vejnummer" type="number" class="form-control-1" placeholder="Vejnummer *">
</div>
<div class="form-group">
<label class="sr-only">By</label>
<input id="By" type="text" class="form-control-1" placeholder="By *">
</div>
<div class="form-group">
<label class="sr-only">Postnummer</label>
<input id="Postnummer" type="text" class="form-control-1" placeholder="Postnummer *" required>
</div>
<div class="form-group">
<label class="sr-only">Land</label>
<input id="Land" type="text" class="form-control-1" placeholder="Land *">
</div>
<div class="form-group">
<label class="sr-only">Telefonnummer</label>
<input id="Telefonnummer" type="number" class="form-control-1" placeholder="Telefonnummer">
</div>
<script type="text/javascript">
$(document).ready(function () {
$("#Submit1").on("click", function (e) {
$.ajax({
type: "POST",
url: '@Url.Action("Submit", "Create")',
data: $('#PrivateUser').serialize(),
datatype: "json",
success: function (data) {
var str = '@ViewData';
alert(str);
$('#result').html(data)
}
});
e.preventDefault(); //prevent the form from submitting
});
});
</script>
<button type="submit" id="Submit1" value="Submit">Opret Bruger</button>
* Skal udfyldes
</div>
</form>
<div class="col-md-2"></div>
</div>
</div>
<!-- Content: End -->and here is the controller with my method:
public static MySqlConnection GetConnection(string host, string user, string pwd, string db)
{
string conStr = string.Format("server={0};uid={1};pwd={2};database={3}", host, user, pwd, db);
var con = new MySqlConnection();
con.ConnectionString = conStr;
con.Open();
return con;
}
public static MySqlConnection GetDefaultConnection()
{
return GetConnection("localhost", "root", "", "EventCrush");
}
public ActionResult Submit(string Fornavn, string Efternavn, string Email, string Telfonnummer, string Brugernavn, string Kodeord)
{
var con = GetDefaultConnection();
MySqlCommand cmd = new MySqlCommand();
cmd.Connection = con;
cmd.CommandText = "insert into Private_User values (@Username, @PW, @FirstName, @LastName, @Email, @PhoneNumber)";
cmd.Prepare();
cmd.Parameters.AddWithValue("@Username", Brugernavn);
cmd.Parameters.AddWithValue("@PW", Kodeord);
cmd.Parameters.AddWithValue("@FirstName", Fornavn);
cmd.Parameters.AddWithValue("@LastName", Efternavn);
cmd.Parameters.AddWithValue("@Email", Email);
cmd.Parameters.AddWithValue("@PhoneNumber", Telfonnummer);
cmd.ExecuteNonQuery();
if (con != null) { con.Close(); }
return View();
}
When running it i get this error:
Column count doesn't match value count at row 1
I ran it with a break point at the method and could see it was all null values.
Can someone see why the jQuery does not pass any information?
