I have this form which is supposed to send the info to the database for a username search. I'm putting together a search function for private servers in our student dormitory. We have a dude with username <lol> and it seems we can't search him. Other usernames search just fine. I'm I missing something?
This is the form.php file:
<!DOCTYPE html>
<html>
<head>
<script src="//code.jquery.com/jquery-1.11.2.min.js"></script>
<script src="//code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
<script src="//cdn.jsdelivr.net/jquery.validation/1.13.1/jquery.validate.js"></script>
<script src="//cdn.jsdelivr.net/jquery.validation/1.13.1/jquery.validate.min.js"></script>
<script src="//cdn.jsdelivr.net/jquery.validation/1.13.1/additional-methods.js"></script>
<script>
$(document).ready(function() {
$('#checkForm').validate({
rules: {
IpSearch: {
ipv4:true,
require_from_group: [1, ".required_group"]
},
UserName: {
minlength: 3,
require_from_group: [1, ".required_group"]
}
},
submitHandler: function(form) {
console.log( $("#checkForm").serialize());
$('#results').text( $("#checkForm").serialize());
$.post('file.php', $("#checkForm").serialize(), function(data) {
$('#checkResult').html(data);
});
}
});
});
</script>
</head>
<body>
<form role="form" id="checkForm" name="checkForm" method="post">
<div class="form-group">
<label>Internal IP:</label>
<input id="IpSearch" name="IpSearch" placeholder="Enter IP" class="form-control optional required_group" type="text">
</div>
<div class="form-group">
<label>Username</label>
<input id="UserName" name="UserName" value="<?php if(!empty ($_POST) && isset($_POST['checkThis'])){echo $_POST['checkThis']; } else{}?>" placeholder="admin" class="form-control optional defaultInvalid required_group" type="text">
</div>
<button id="search" name="search" value="doSearch" class="btn btn-info">Search</button>
</form>
<div id="results"></div>
<div id="checkResult"></div>
</body>
</html>
and this is the file.php beginning:
<?php
echo "<pre>";
var_dump($_POST);
echo "</pre>";
// .... continues but irrelevant since I'm not getting any post data
On clicking the button, I get this in browser console:
"IpSearch=&UserName=%3Clol%3E&search=doSearch"
on #results I get:
IpSearch=&UserName=%3Clol%3E&search=doSearch
on #checkResult I get:
array(3) {
["IpSearch"]=>
string(0) ""
["UserName"]=>
string(5) ""
["search"]=>
string(8) "doSearch"
}
it doesn't show <lol> because it considered HTML tag when jquery print it.
you must escape html entities before printing it.
so change this line: $('#checkResult').html(data); to $('#checkResult').text(data);
so this will print <lol> as text not html
Try vardumping $_GET
var_dump($_GET)
And post results here :)
Looks like your script doesn't prevent default action and form gets submitted anyway
Related
I want a validation onkeyup from an input form, I've made a jquery. I'm having a hard time finding why is it not checking? I need to go to a php page in checking. What could be wrong to my code that it don't work?
<html>
<head>
<title>
reg
</title>
</head>
<body>
<form method="post">
<input type="text" name="name" onkeyup="check_user()" id="name"/><div id="checking">Checking</div>
<button type="submit" name="submit">Submit<button>
</form>
<script src="jquery-3.3.1.min.js"></script>
<script>
document.getElementById("submit").disabled=true;
function check_user(){
var name = document.getElementById("name").value;
$.post("user_check.php",
{
user: name
},
function(data,status){
if(data=='<p style="color:red">Name contains a number</p>'){
document.getElementById("submit").disabled=true;
}
else{
document.getElementById("submit").disabled=false;
}
document.getElementById("checking").innerHTML=data;
}
);
}
</script>
</body>
</html>
user_check.php
<?php
if (isset($_POST['user'])) {
if(preg_match('/^\d+$/', $_POST['user'])) {
echo '<p style="color:red">Name contains a number</p>';
} else {
echo '<p style="color:green"> You can take this name</p>';
}
}
?>
You can validate the text box by adding the pattern attribute like this pattern="[a-zA-Z]+"
<input type="text" name="name" pattern="[a-zA-Z]+" title="please just add strings" id="name"/>
i also notice in your code you did not add the id for the submit button thats why your submit button is not disabled, your code should like this for submit button.
Submit
1- first add the id attribute of the submit button id="submit"like this
<button type="submit" id="submit" name="submit">Submit<button>
2- update the code on user_check.php
if (isset($_POST['user'])) {
if(!preg_match('/^([^0-9]*)$/', $_POST['user'])) {
echo '<p style="color:red">Name contains a number</p>';
} else {
echo '<p style="color:green"> You can take this name</p>';
}
}
i need your help. i have a working form that uses ajax to send textarea posted value to a php file.
I have added emoji to that textarea input and everything is okay. But am facing a problem, when a form is submitted the textarea does not empty automatically.
I need the input to empty after the confirmation is set, but i don't know how.
HTML PAGE
<html>
<head>
<link rel="stylesheet" href="https://cdn.rawgit.com/mervick/emojionearea/master/dist/emojionearea.min.css">
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript" src="https://cdn.rawgit.com/mervick/emojionearea/master/dist/emojionearea.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/core.js">
</script>
<script>
$(document).ready(function() {
$("#formsubmit").click(function() {
var msg = $("#emojionearea1").val();
if ( msg == '') {
alert("field empty");
} else {
// Returns successful data submission message when the entered information is stored in database.
$.post("sss.php", {
msg1: msg
}, function(data) {
//alert(data);
$('#status').html(data);
$('#di_pr')[0].reset(); // To reset form fields
});
}
});
});
</script>
</head>
<body>
<p id="status"></p>
<form action="" id="di_pr" method="post" name="myForm" enctype="multipart/form-data">
<div class="row">
<div style="width: 303px;" class="span6">
<textarea id="emojionearea1" name="rby_message" placeholder="type here"></textarea>
</div><br/>
<div class="uhn">
<input type="button" value="Send" name="tlaj_submit" id="formsubmit" class="gpfy" >
</div>
</div>
<script>
$(document).ready(function() {
$("#emojionearea1").emojioneArea({
pickerPosition: "left",
tonesStyle: "bullet"
});
})
</script>
</form>
</body>
</html>
PHP PAGE
<?php
$hssh = $_POST['msg1'];
echo '<p>send message: '.nl2br($hssh).'</p>';
?>
The form rests but the input is not emptied.
$("#emojionearea1").data("emojioneArea").setText('');
Add this line inside the callback function :$("#emojionearea1").val('');
in the following way:
$.post("sss.php", {
msg1: msg
}, function(data) {
//alert(data);
$('#status').html(data);
$('#di_pr')[0].reset(); // To reset form fields
$("#emojionearea1").val('');//line to be added
});
This question already has answers here:
jQuery Ajax POST example with PHP
(17 answers)
Closed 7 years ago.
what i am trying is to fetch a data from my php page using javascript,but it seems that the javascript is not working properly.in this when click my submit button the datas should be sent to the action page,but i dont want to go to the php page and the result in php page should be displayed in the intial page(in this at div id:result)
view of the page
enter image description here
this is my index page,this is just example view
register.html
<!DOCTYPE>
<html>
<head>
<title>REGESITER</title>
<script src="script/jquery-1.11.2.min.js" type="text/javascript"></script>
<script>
$("sub").click( function() {
$.post($("#myform").attr("action"),
$("#myform :input").serializeArray(),
function (data) {
$("#res").empty();
$("#res").html(data);
});
$("#myform").submit( function() {
return false;
});
});</script>
</head>
<body>
<form id="myform" action="helper.php" method="post">
FIRSTNAME:<input type="text" name="txtfname" id="fname">
<br><br>
LASTNAME:<input type="text" name="txtlname" id="lname">
<br><br>
AGE:<input type="text" name="txtage" id="age">
<br><br>
<button id="sub">SUBMIT</button>
</form>
<div id="res">Result</div>
</body>
</html>
this is my php file,from where the echoed result is to fetched
helper.php
<?
$fname=$_POST['txtfname'];
$lname=$_POST['txtlname'];
$age=$_POST['txtage'];
$con=mysql_connect('localhost','root','');
if ($con)
{
$db=mysql_select_db('register',$con);
}
if ($db)
{
$q1=mysql_query("insert into regdb(firstname,lastname,age) values('$fname','$lname','$age')",$con);
echo"inserted into database";
}
else
{
echo "error in query";
}
?>
complete working html code:-
<!DOCTYPE>
<html>
<head>
<title>REGESITER</title>
<script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
<script>
$( document ).ready(function() {
$( "#sub" ).click(function(event) {
$.post('helper.php',
$("#myform :input").serializeArray(),
function (data) {
$("#res").empty();
$("#res").html(data);
});
});
});
</script>
</head>
<body>
<form id="myform" action="" method="post">
FIRSTNAME:<input type="text" name="txtfname" id="fname">
<br><br>
LASTNAME:<input type="text" name="txtlname" id="lname">
<br><br>
AGE:<input type="text" name="txtage" id="age">
<br><br>
<input type="button" id="sub" value="Enter" />
</form>
<div id="res">Result</div>
</body>
</html>
I've been reluctant to open a question, but after fighting this for 6+ hours I'm now cross-eyed.
I've got some experience with PHP and HTML but Ajax and jQuery is new to me (I first heard about it yesterday).
I want the page to display the submitted values inside the div class="result" without refreshing. Anyway, the workflow:
j.php loads > user fills out two text fields (phone and gz) > click Submit button > jpost.php is called and echos variables > PHP variables need to display is div class=result on j.php
j.php =
<html>
<head>
<script src="//code.jquery.com/jquery-latest.js"></script> <!-- load jquery via CDN -->
<script>
$(document).ready(function() {//start document ready
$('#submit-button').click(function (){
$.ajax({
type: 'POST',
url: 'jpost.php',
data: $("#cdr").serialize(),
success: function(d){
$(".result").html(d);
}
});
});
});//end document ready
</script>
</head>
<body>
<div id="cdr">
<div>
<input type="text" id="phone" name="phone" value="" placeholder="phone" size="40" />
</div>
<div>
<input type="text" id="gz" name="gz" value="" placeholder="gz" size="40" />
</div>
<div>
<button id="submit-button">Submit</button>
</div>
</div>
<div class="result"></div>
</body>
</html>
jpost.php
<?php
$phone = $_POST['phone'];
$gz = $_POST['gz'];
echo $phone;
echo $gz;
print_r($_POST);
echo "grrrr"
?>
So all I want is $gz and $phone to echo out in my result div on j.php, but all that shows up is:
Array ( ) grrrr
This makes me believe that my variables are being lost somewhere :P or I'm echoing them incorrectly.
Thanks so much for any help!
Short
The problem was :
1.You need a form in order to serialise the data ( and not a div ) 2. You need to prevent the default behaviour of the event
Long
In order to serialise the data, you need to have a form. i created the form with id #cdr-form
Also, you need to make sure to prevent the default behaviour of the button ( event ) with e.preventDefault() . Read more about it here
<html>
<head>
<script src="//code.jquery.com/jquery-latest.js"></script> <!-- load jquery via CDN -->
<script>
$(document).ready(function() {//start document ready
$('#submit-button').click(function (e){
e.preventDefault();
$.ajax({
type: 'POST',
url: 'http://localhost/~metaly/tests/j.php',
data: $("#cdr-form").serialize(),
success: function(d){
$(".result").html(d);
}
});
});
});//end document ready
</script>
</head>
<body>
<div id="cdr">
<form id="cdr-form">
<div>
<input type="text" id="phone" name="phone" value="" placeholder="phone" size="40" />
</div>
<div>
<input type="text" id="gz" name="gz" value="" placeholder="gz" size="40" />
</div>
<div>
<button id="submit-button">Submit</button>
</div>
</form>
</div>
<div class="result"></div>
</body>
</html>
HTML CODE
<form action="send.php" method="post">
<input type="hidden" name="qty" id="quantity" value="">
<input type="submit" id="submit">
</form>
JAVASCRIPT CODE
var qty=10;
$("#submit").click(function(){
$("#quantity").val(qty);
});
PHP FILE (send.php)
<?php
$showqty=$_POST['qty'];
echo $showqty;
?>
My code above is receiving an error on the php file. It says that the index qty is undefined. How can I send an integer value of a variable from javascript to php?
You do not have any issues with you javascript or you PHP code.
when you recieve undefined error, it means that the object is not even posted to the send.php file. so the problem is with the object or the way you are sending it, not with the value in it.
with a look at you code I saw that you have two action tags and no method tag and that is what causing the error.
with no method tag, the form uses GET method instead of POST method.
so you just have to change this line:
<form action="send.php" action="post">
with this line:
<form action="send.php" method="post">
simply use
var qty = document.getElementById("qty").value
action="post"> should be method="post">
This may help you:
<!doctype html>
<html lang="en">
<head>
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script type="text/javascript">
$(document).ready(function(e) {
var qty=10;
$("#submit").click(function(e){
var qty=10;
$.ajax({
url:'send.php',
type:'POST',
data:{'qty':qty},
success: function(e){
alert(e);
//do some thing
}
});
});
});
</script>
</head>
<body>
<form id="myform" action="send.php" method="post" onSubmit="return false;">
<input type="submit" id="submit">
</form>
</body>
</html>
send.php
<?php
$showqty=$_POST['qty'];
echo $showqty;
?>