CODEWITHSUNDEEP
phpjqueryhtmlajaxweb
Vignesh KM
Vignesh KM

Reputation: 2076

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>

but if i select O Positive (O+) in drop down box, but cant get (O +) as result. I get only O as answer.

I wan to get the values of drop down box as it given in the value attribute.

Upvotes: 0

Views: 1166

Answers (2)

viral
viral

Reputation: 3743

Your current code is working perfectly, if you change some of the lines,

success:function(data)
  {
    $("#message-span").html(data);
    $("#loaderIcon").hide();
    // remove this line here // message-span
  },

change this <script> tag to closing and complete </head> tag like below,

      error:function (){}
      });
    }
</script>
</head>

This form is submitting via JQ Ajax after these changes.

Here is the dump of $_POST,

array (size=1)
    'bloodGroup' => string 'O +' (length=3)

Upvotes: 0

jeroen
jeroen

Reputation: 91762

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

Upvotes: 4

Related Questions