<html>
<head>
<script>
function createMessage()
{
jQuery.ajax
({
url: "include/CreateMessage.php",
data:"BloodGroup="+$("#bloodGroup").val(),
type:"POST",
success:function(data)
{
$("#message-span").html(data);
$("#loaderIcon").hide();
message-span
},
error:function (){}
});
}
<script>
<body>
<form class="form-signin" method="POST" action="">
<label> Contact Details </label>
<br><input type="text" name="name" id="name" class="form-control" placeholder="Contact Person Name" maxlength="32" required/>
<br><select class="form-control" name="bloodGroup" id="bloodGroup" required>
<option value="" disabled selected>Blood Group</option>
<option value="O +">O Positive (O+)</option>
<option value="O -">O Negative (O-)</option>
<option value="A +">A Positive (A+)</option>
<option value="A -">A Negative (A-)</option>
<option value="B +">B Positive (A+)</option>
<option value="B -">B Negative (B-)</option>
<option value="AB +">AB Positive (AB+)</option>
<option value="AB -">AB Negative (AB-)</option>
</select>
<br><input type="text" name="time" id="time" class="form-control" placeholder="Time In Hour" maxlength="6" onBlur="createMessage()" required/>
<br><button type="submit">Next ></button>
</form>
</body>
</table>
If I select O Positive (O+) in drop down box, but can't get (O +) as result. I get only O as answer.
I want to get the values of drop-down box as it given in the value attribute.
The problem is that you need to encode your value for use in a url:
data:"BloodGroup="+$("#bloodGroup").val(),
If you don't encode the value, a +
will be come a space when the value is decoded on the server.
You can have jQuery do that automatically:
data: { 'BloodGroup': $("#bloodGroup").val() },
If you want to encode it manually (when you are not using jQuery for example), you can use:
data: "BloodGroup=" + encodeURIComponent($("#bloodGroup").val()),