asked on

Unable to use ajax with a radio box

I have and html file which has an input field and a radio box, I want upon the selection of the radio box to query a database using the value of the input field but I am getting always:
Uncaught TypeError: Cannot call method 'replace' of undefined

My Html code:

<!doctype html>
<html lang="en">
<head>
        <meta charset="utf-8">
        <title>Create User</title>
        <link rel="stylesheet" href="js/themes/base/jquery.ui.all.css">
        <link rel="stylesheet" href="css/validate.css">
        <script src="js/jquery-1.9.1.js"></script>
        <script src="js/jquery-1.10.1.min.js"></script>
        <script>
        $(document).ready(function() {
                $( "#tabs" ).tabs();
                  $('#locemailexistY').click(function() {
                           checkemail (); //if email exists
                  });
        });
                      function checkemail()
                    {
                    var checkname= $("#username").val();
                    var availname=remove_whitespaces(checkname);
                    if(availname!=''){
                        $('.check').show();
                        $('.check').fadeIn(400).html('<img src="images/loading.gif" /> ');

                        var String = 'username='+ availname;

                        $.ajax({
                            type: "POST",
                            url: "php locemail_check.php",
                            data: String,
                            cache: false,
                            success: function(result){
                                var result=remove_whitespaces(result);
                                if(result==''){
                                    $('.check').html('<img src="images/checked.gif" /> This Username has local email');
                                    $(".check").removeClass("red");
                                    $('.check').addClass("green");
                                }else{
                                    $('.check').html('<img src="images/unchecked.gif" /> This Username has no local email');
                                    $(".check").removeClass("green");
                                    $('.check').addClass("red")
                                }
                            }
                        });
                    }else{
                        $('.check').html('');

                    }
                }
               function remove_whitespaces(str){
                var str=str.replace(/^\s+|\s+$/,'');
                return str;
                }
                }
        </script>
</head>
<body>
<form action="" name="createuser" id="check" method="POST">
<input type="text" name="username" maxlength="10" size="10" />
<input type="radio" name="locemailexist" id="locemailexistY" value="y" /> Yes
<input type="radio" name="locemailexist" id="locemailexistN" value="n" checked> No
    <input type="submit" id="lcheck" value="Check">
</form>
</body>
</html>

My locemail_check.php is:
<?php
require_once(dirname(__FILE__).'/email_db.php');
if(isset($_POST['username']) && !empty($_POST['username'])){
      $username=$_POST['username'];
      $query="select user from mailbox where username='".$username.""" ;
      $res=pg_exec($con, $query);
      $count= pg_num_rows($res);
      $HTML='';
      if($count > 0){
        $HTML='Username is there';
      }else{
        $HTML='Create user first';
      }
      echo $HTML;
}
?>

Open in new window

I have tested the php script and it is working pretty well.

leakim971

replace :
<input type="text" name="username" maxlength="10" size="10" />
by :
<input type="text" name="username" id="username" maxlength="10" size="10" />

because you're using the ID jQuery selector : #
$("#username").val();

OR replace :
$("#username").val();
by :
$(":text[name=username]").val();

leakim971

in your question, use the Code button to wrap your code inside a code box

SOLUTION

goubun

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

Dave Baldwin

These two lines are different versions of the same code. You should only be using one of them.

        <script src="js/jquery-1.9.1.js"></script>
        <script src="js/jquery-1.10.1.min.js"></script>

Open in new window

Ashraf Hassanein

ASKER

I have modified the html to look:

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Create User</title>
<link rel="stylesheet" href="js/themes/base/jquery.ui.all.css">
<link rel="stylesheet" href="css/validate.css">
<script src="js/jquery-1.10.1.min.js"></script>
<script>
$(document).ready(function() {
$( "#tabs" ).tabs();
$('#locemailexistY').click(function() {
checkemail (); //if email exists
});
});
function checkemail()
{
var checkname= $("#username").val();
var availname=remove_whitespaces(checkname);
if(availname!=''){
$('.checklocalemail').show();
$('.checklocalemail').fadeIn(400).html('<img src="images/loading.gif" /> ');

var String = availname;

$.ajax({
type: "POST",
url: "php locemail_check.php",
data: String,
cache: false,
success: function(result){
var result=remove_whitespaces(result);
if(result==''){
$('.checklocalemail').html('<img src="images/checked.gif" /> This Username has local email');
$(".checklocalemail").removeClass("red");
$('.checklocalemail').addClass("green");
}else{
$('.checklocalemail').html('<img src="images/unchecked.gif" /> This Username has no local email');
$(".check").removeClass("green");
$('.check').addClass("red")
}
}
});
}else{
$('.check').html('');

}
}
function remove_whitespaces(str){
var stringReceived='';
if (str != '' ){
stringReceived=stringReceived.replace(/^\s+|\s+$/,'');
}
}
}
</script>
</head>
<body>
<form action="" name="createuser" id="check" method="POST">
<div id="tabs">
<ul>
<li><a href="#tabs-1">Username</a></li>
<li><a href="#tabs-2">Check</a></li>
</ul>
<div id="tabs-1">
<p>
<input type="text" name="username" maxlength="10" size="10" />
</p></div>
<div id="tabs-2">
<p>

<input type="radio" name="locemailexist" id="locemailexistY" value="y" /> Yes
<input type="radio" name="locemailexist" id="locemailexistN" value="n" checked> No
<span id="checklocalemail" class="checklocalemail" ></span>
</p>
</div>
<input type="submit" id="lcheck" value="Check">

</form>
</body>
</html>

I have added the following at the end of css/validate.css:
.yellow{background-color:yellow;}
.white{background-color:#FFF;}
.green{color:green;}
.red{color:red;}

Now I do not have the error of replace anymore but I still cannot see any result on the screen.
I want as well to do the following based upon the text comming back from the php to:
set the checked radio, and change the backgorund of the input type username, is that possible?

leakim971

You forget to use the Code button to wrap your code.

Why don't you apply the answer here : https://www.experts-exchange.com/questions/28323972/including-Ajax-support-is-screwing-up-my-html-jquery-form.html?anchorAnswerId=39734711#a39734711

?

Ashraf Hassanein

ASKER

But the answer of this question is not applicable on this case because in the earlier question I wantes to make all my checks client side but now I want to get back to the server get some info, I tested the Php part (server side) and it is working pretty well the problem in the client I want to display this result on the fly and change the radio button and the input box based on the output back from the server and I am not sure if that is possible with ajax as no much explanation, can you 0lease guide me in thst? why I am not able to display the results from the server in the screen? I did not get your point regarding wrapping the button, .

leakim971

I see : $( "#tabs" ).tabs();
But I don't jQuery-ui script included in your code

Ashraf Hassanein

ASKER

Ooops sorry for the typo it is there in the code and I can see the tab is working properly, I feel I have a mistake in mapping the output from the server to the display but I do not know where is it

Ashraf Hassanein

ASKER

Ooops sorry for the typo it is there in the code and I can see the tab is working properly, I feel I have a mistake in mapping the output from the server to the display but I do not know where is it

ASKER CERTIFIED SOLUTION

Ray Paseur

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

Ray Paseur

Just tested it. You do not need the hidden radio button. Also, sorry about butchering the spelling of your name :-)

Ashraf Hassanein

ASKER

Hi Ray thank you so much this example was extremely helpful, I manipulated a bit, and here is my ajax function and it is working:
$('#locemailexistY').click(function() {
$("#checklocalemail").hide();
username = $('#username').val();
username=username.replace(/^\s+|\s+$/,'');
$.post("locemail_check.php", {username:username}, function(response){
if(response=='Create local email first'){
$("#checklocalemail").html(response);
$("#checklocalemail").hide();
$("#checklocalemail").removeClass("green");
$("#checklocalemail").addClass("red");
$("#checklocalemail").show('slow');
$("#username").css("background-color","yellow");
$("input:radio[name='locemailexist'][value='n']").prop('checked', true);
} else {
if(response=='Username has local email'){
$("#checklocalemail").html(response);
$("#checklocalemail").hide();
$("#checklocalemail").removeClass("red");
$("#checklocalemail").addClass("green");
$("#checklocalemail").show('slow');
$("#username").css("background-color","#00CC00");
}
else {
if (response=='Please enter a username'){
$("#checklocalemail").html(response);
$("#checklocalemail").hide();
$("#checklocalemail").removeClass("green");
$("#checklocalemail").addClass("red");
$("#checklocalemail").show('slow');
$("#username").css("background-color","yellow");
$("input:radio[name='locemailexist'][value='n']").prop('checked', true);
}
}
}
});
});

Ray Paseur

Great - glad you got it working. Thanks for the points and thanks for using EE, ~Ray