How to send textbox value to server using ajax?
Question
I have an HTML form which contains a username textbox and a submit button.
When a user inputs a name in the username textbox, I want to take that value and send it over to the server so I can check whether the username has already been taken by another user or not.
Here is my code for creating the form:
<!DOCTYPE html>
<html>
<head>
<script src="JquerySock.js"></script>
<meta charset="utf-8" name="viewport" content="width=device-width, initial- scale=1">
<script>
function Usernameerrorfunc(field, errordiv, Notallowcharserror_SPN){
}
</script>
</head>
<body>
<div id="Registeration_Div" class="Registeration_Div">
<form class="Registration_Form" id="Registration_Form" action="../postr" method="POST">
<div id="Registeration_Username_DIV" class="Registeration_Username_DIV">
<input type="text" id="Registeration_Username_box" class="Registeration_Username_box"
placeholder="" name="UserName" maxlength="30" onblur="Usernameerrorfunc(this, 'Usernameerror_spn', 'Usernamenowallow_spn');" onclick="textboxfocus(this)"/>
</div>
<div class="Registration_Submit_Div">
<input type="submit" value="Submit" id="SumbitForm_btn" class="SumbitForm_btn" name="Submit_btn"/>
</div>
</form>
</div>
</body>
</html>
2 answers
solution1
2 2016-08-21 10:28:58
You could use the $.ajax method in jQuery:
function postUsernameToServer() {
var username = $("#Registeration_Username_box").val();
$.ajax({
url: "http://YourServerUrl",
type: "POST",
data: { username: username },
success: function() {
alert('Successfully connected to the server');
},
error: function() {
alert('Something went wrong');
}
});
}
To invoke this using a button click (From my comment) you could do the following:
<button id="checkUsername">Check username</button>
$("#checkUsername").on("click", function() {
postUsernameToServer();
});
Ensure that you have the jQuery library imported to use the function. If you did not want to use the jQuery and rather native JavaScript you can use the XMLHttpRequest .
solution2
0 2016-08-21 12:19:42
Try this it will work :
Use jQuery.ajax()
Code :
function submitFormData() {
var name = document.getElementById("Registeration_Username_box").value;
// Returns successful data submission message when the entered information is stored in database.
var dataString = 'username=' + name;
if (username == '') {
alert("Please Enter the Username");
} else {
// AJAX code to submit form.
$.ajax({
type: "POST",
url: "checkUsername.php",
data: dataString,
cache: false,
success: function(data) {
alert(data);
},
error: function(err) {
alert(err);
}
});
}
return false;
}
I am giving example in php for checking the username. You can use any language accordingly.
checkUsername.php :
<?php
$connection = mysql_connect("localhost", "root", ""); // Establishing Connection with Server..
$db = mysql_select_db("dbname", $connection); // Selecting Database
//Fetching Values from URL
$username=$_POST['username'];
//Select query
$query = 'select * from user_table WHERE name = "'.$username.'";
$query_result = mysql_query($query);
$res = mysql_fetch_assoc($query_result);
do
{
echo json_encode($res);
}while($res = mysql_fetch_assoc($query_result));
}
mysql_close($connection); // Connection Closed
?>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.