phphtmljqueryajax

Send plus of minus symbol as a post value using AJAX


<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.


Solution

  • 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()),