Javascript to HTML values will not be readable on the server side
This is my function for the event onchange
Javascript code:
function optionsModel() {
var x = document.getElementById("model");
var option = document.createElement("option");
var makeValue = document.getElementById("make").value;
x.innerHTML = "";
option.text = "Model";
x.add(option);
option.innerHTML = "Model";
if (makeValue == "ALFA ROMEO") {
var opt = document.createElement('option');
opt.innerHTML = "156";
x.appendChild(opt);
}
else if (makeValue == "AUDI") {
var audi = ["A3", "A4", "TT"];
for (var i = 0; i < 3; i++) {
var opt = document.createElement('option');
opt.value = audi[i];
opt.innerHTML = audi[i];
x.appendChild(opt);
}
}
}
.aspx
+ HTML code:
<body>
<div class="container form-group">
<div class="row">
<form runat="server">
<div class="col-md-6">
<select class="form-control" name="Make" id="make" runat="server" onchange=" return optionsModel()">
<option value="select" selected>Select Make</option>
<option value="ALFA ROMEO">ALFA ROMEO</option>
<option value="AUDI">AUDI</option>
</select></div>
<div class="col-md-6"> <select class="form-control" name="Model" id="model" runat="server">
<option value="Model">Model</option>
</select></div>
aspx.cs
protected void Button1_Click(object sender, EventArgs e)
{
string modelValue = this.model.Value;
string makeValue = this.make.Value;
}
When I select ALFA ROMEO in the Make Select tag, the Model tag will display certain options, but when I click the button, it will give the modelValue "Model". This means that the values from JS were not migrated to the server side. How can I get these values on the server side?
+3
source to share
1 answer
There are two ways:
- use AJAX if you want to do an asynchronous action, the link above will be help (recommended):
- use a standard server client request (GET), for example, the exchange page will redirect to /index.aspx?makeval= "A" & modelval = "B"
The ajax example looks like this:
Client side (aspx)
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<script src="//code.jquery.com/jquery-1.11.3.min.js"></script>
<script type="text/javascript">
function optionsModel() {
var x = document.getElementById("model");
var option = document.createElement("option");
var makeValue = document.getElementById("make").value;
x.innerHTML = "";
option.text = "Model";
x.add(option);
option.innerHTML = "Model";
if (makeValue == "ALFA ROMEO") {
var opt = document.createElement('option');
opt.innerHTML = "156";
x.appendChild(opt);
}
else if (makeValue == "AUDI") {
var audi = ["A3", "A4", "TT"];
for (var i = 0; i < 3; i++) {
var opt = document.createElement('option');
opt.value = audi[i];
opt.innerHTML = audi[i];
x.appendChild(opt);
}
}
}
function submit() {
var makeValue = document.getElementById("make").value
var modelValue = document.getElementById("model").value;
$.ajax({
type: "POST",
url: "MakeModel.aspx/Submit",
data: "{'make':'"+makeValue+"', 'model':'"+modelValue+"'}",
contentType: "application/json; charset=utf-8",
dataType: "json",
success: OnSuccess,
error: function(response) {
alert(response);
}
});
}
function OnSuccess(response) {
alert(response.d);
}
</script>
</head>
<body>
<p>
<select class="form-control" name="Make" id="make" runat="server" onchange=" return optionsModel()">
<option value="select">Select Make</option>
<option value="ALFA ROMEO">ALFA ROMEO</option>
<option value="AUDI">AUDI</option>
</select>
<select class="form-control" name="Model" id="model" runat="server">
<option value="Model">Model</option>
</select>
</p>
<p><input type="submit" value="Procced" name="submit" onclick="submit()" /></p>
</body>
</html>
Server side (Aspx.cs)
[WebMethod]
public static string Submit(string make,string model)
{
return make+" "+model;
}
On the client side, the important javascript function is submit, url is the define function in MakeModel.aspx, data is the parameter for the server side submit function.
Hope this helps you understand ajax.
+2
source to share