i want to insert data to server using ajax in my chrome extension so my users can sign up to use my extension.
i am desperately finding solution not not find the example
when i code ajax on popup.html i got this error
"Refused to execute inline script because it violates the following Content Security Policy directive: "script-src 'self' 'unsafe-eval'". Either the 'unsafe-inline' keyword, a hash ('sha256-lXzxt12nj+7ATE1j5ucGnYo1VkLZpNS/cGA9SL9nCv0='), or a nonce ('nonce-...') is required to enable inline execution."
popup.html Code
<!DOCTYPE html>
<html>
<head>
<style>
body {
width:300px;
font-size:12px;
}
</style>
</head>
<body>
<form action="" method="POST">
<input type="text" id="name" name="uname">
<input type="text" id="pass" name="upass">
<input type="submit" id="submit" name="submit" id="btn">
</form>
</body>
</html>
<script type="text/javascript" src="check.js"></script>
<script type="text/javascript">
$("#btn").click(function(){
var btn =$('#btn').val();
var name= $('#name').val();
var pas = $('#pass').val();
$.ajax({
data :{btn: btn, name : name, pas: pas},
method="POST",
url:"http://localhost/status/index.php",
success : function(data){
lb.val(data);
}
});
});
}
</script>
index.php code which is on server
<?php
$servername = "localhost";
$username = "root";
$password = "";
$dbname = "test";
$conn = mysqli_connect($servername, $username, $password, $dbname);
if(isset($_POST['byn'])){
$localIP = getHostByName(getHostName());
$name = $_POST['name'];
$pass = $_POST['pass'];
$insert = mysqli_query($conn,"INSERT INTO usercheck VALUES('','$name','$pass','1111,'$localIP')");
}
?>
Related
i have a problem with AJAX , not sending the input of type password and when i change type to TEXT
it sends the data normally , the code
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>
<body>
<input type="text" id="username">
<input type="password" id="password">
<input type="submit" id="subit" value="send">
<div id="par"></div>
<script>
var user = $("#username").val();
var pass = $('#password').val();
$(document).ready(function(){
$("#subit").click(function(){
$.ajax({
type:"post",
url: "home.php",
data:{subit:1, username: user, password: pass }
}).done(function(resdata){
$("#par").html(resdata);
});
});
});
</script>
</body>
</html>
and code for processing data
<?php
require_once 'queries.php';
if(isset($_POST['subit'])){
$username = $_POST['username'];
$password = $_POST['password'];
$data = selectrow("users","username,password","'$username','$password'");
if(!empty($data)){
echo $data['username']." ".$data['password'];
} else {
echo "No Data Found";
}
}
?>
i am connecting to the database and checking the data if exist , the PHP code is not wrong as i tried it with form and it was working ,now i am using AJAX, and not working now saying that data is not found , the second echo.
I have the following text fields:
<input type="text" name="empid" id="empid" tabindex="1" onblur="getname()">
<input type="text" name="name" id="name" tabindex="2"/>
<input type="text" name="city" id="name" tabindex="3"/>
<input type="text" name="state" id="name" tabindex="4"/>
and database table is:
empid name city state
EMP471 BBB bbbbb cccccc
EMP444 AAA xxxx yyyyyy
I'm new to php. I found some code on internet to retrieve data. but its not working.
Ajax code is:
function getname() {
var id=$("#id").val();
$.ajax({
type:"post",
dataType:"text",
data:"id="+id,
url:"getinsdata.php",
success:function(response)
{
$("#name").val(response.name);
$("#city").val(response.city);
$("#state").val(response.state);
}
});
}
and php code is
<?php
include 'connection.php';
$id=$_POST['id'];
$id=$_POST['id'];
$query=mysql_query("select name,city,state from ins_master where id=$id");
$result=mysql_fetch_row($query);
echo $result[0];
exit;
?>
when we select the empid then the respective name, city, state should be shown in textboxes when onblur event fires in PHP using AJAX.
What are you trying to achieve? Send the datas and get the response according to a query? Get some datas?
I'd go
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" integrity="sha384-/Y6pD6FV/Vv2HJnA6t+vslU6fwYXjCFtcEpHbNJ0lyAFsXTsjBbfaDjzALeQsN6M" crossorigin="anonymous">
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js" integrity="sha384-b/U6ypiBEHpOf/4+1nzFpr53nxSS+GLCkfwBdFNTxtclqqenISfwAzpKaMNFNmj4" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/js/bootstrap.min.js" integrity="sha384-h0AbiXch4ZDo7tp9hKZ4TsHbi047NrKGLO3SEJAg45jXxnGIfYzk4Si90RDIqNm1" crossorigin="anonymous"></script>
</head>
<body>
<form id="test" method="POST">
<input type="text" id="name" required minlength="5" name="name"/>
<input type="password" id="pw" required name="pw"/>
<input id ="sub" type="submit"/>
</form>
<div id="answer"></div>
</body>
<script>
$("#sub").click(function(event){
event.preventDefault();
query = $.post({
url : 'check_ajax.php',
data : {'name': $('input[name=name]').val(), 'pw': $('#pw').val()},
});
query.done(function(response){
$('#answer').html(response);
});
});
</script>
This is check_ajax.php :
<?php
var_dump($_POST);
?>
in the second file but that's where you're supposed to do your query and insert/select
As people said we don't write code but give clues and since it's basics/fundamentals I can't help more cause you have to understand. Copy paste ain't a great idea
Try this html
<!DOCTYPE html>
<html>
<head>
<title></title>
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.css">
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<script type="text/javascript">
function getname(val) {
$.ajax({
url: 'getinsdata.php',
type: 'POST',
data: 'state_id='+val,
dataType: 'json',
success:function(data){
var len = data.length;
if(len > 0){
var id = data[0]['id'];
var name = data[0]['name'];
var city = data[0]['city'];
var state = data[0]['state'];
document.getElementById('name').value = name;
document.getElementById('city').value = city;
document.getElementById('state').value = state;
}
}
});
}
</script>
</head>
<body>
<form method="post">
<input type="text" name="empid" id="empid" tabindex="1" onblur="getname(this.value);">
<input type="text" name="name" id="name" tabindex="2"/>
<input type="text" name="city" id="city" tabindex="3"/>
<input type="text" name="state" id="state" tabindex="4"/>
</form>
</body>
</html>
and getinsdata.php is
<?php
include('connection.php');
$id = $_POST['state_id'];
$sql = "SELECT * FROM ins_master WHERE id='$id'";
$result = mysqli_query($conn,$sql);
$users_arr = array();
while( $row = mysqli_fetch_array($result) ){
$id = $row['id'];
$name = $row['name'];
$city = $row['city'];
$state = $row['state'];
$users_arr[] = array("id" => $id, "name" => $name, "city" => $city, "state" => $state);
}
// encoding array to json format
echo json_encode($users_arr);
exit;
?>
And your connection.php
<?php
$username = "";
$password = "";
$dbname = "";
$conn = mysqli_connect("localhost",$username,$password,$dbname);
if(!$conn){
die("Error in Connecation");
}
?>
put $dbname= your database name
$(document).ready(function(){
$("#submit").click(function(){
var name = $("#name").val();
var email = $("#email").val();
var password = $("#password").val();
var contact = $("#contact").val();
// Returns successful data submission message when the entered information is stored in database.
var dataString = 'name1='+ name + '&email1='+ email + '&password1='+ password + '&contact1='+ contact;
if(name==''||email==''||password==''||contact=='')
{
alert("Please Fill All Fields");
}
else
{
// AJAX Code To Submit Form.
$.ajax({
type: "POST",
url: "ajaxsubmit.php",
data: dataString,
cache: false,
success: function(result){
alert(result);
}
});
}
return false;
});
});
<!DOCTYPE html>
<html>
<head>
<title>Submit Form Using AJAX and jQuery</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<link href="css/refreshform.css" rel="stylesheet">
<script src="script.js"></script>
</head>
<body>
<div id="mainform">
<h2>Submit Form Using AJAX and jQuery</h2> <!-- Required div Starts Here -->
<div id="form">
<h3>Fill Your Information !</h3>
<div>
<label>Name :</label>
<input id="name" type="text">
<label>Email :</label>
<input id="email" type="text">
<label>Password :</label>
<input id="password" type="password">
<label>Contact No :</label>
<input id="contact" type="text">
<input id="submit" type="button" value="Submit">
</div>
</div>
</div>
</body>
</html>
This is what I have in ajaxsubmit.php
$host = "myhost";
$user = "myusername";
$password = "******";
$database = "thisismydb";
$connection = mysqli_connect($host, $user, $password, $database);
if (mysqli_connect_errno())
{
echo "Failed to connect to MySQL: " . mysqli_connect_error();
}
//Fetching Values from URL
$name2=$_POST['name1'];
$email2=$_POST['email1'];
$password2=$_POST['password1'];
$contact2=$_POST['contact1'];
//Insert query
mysqli_query($connection,"SELECT * FROM databasetable");
mysqli_query($connection,"INSERT INTO databasetable (name, email, password, contact)
VALUES ($name2', '$email2', '$password2','$contact2')");
mysqli_close($connection);
?>
However whenever i click submit it only gives me an alert that shows the code from the ajaxsubmit.php and i dont know what I'm doing wrong D: Help please!
note:i'm using bootstrap3
You need to write <?php tag at top of ajaxsubmit.php
I'm unable to make a call to an ajax function, shown below (index.php):
<script type="text/javascript">
$('.show_more').on('click',function (e){
$.ajax({
type:'POST',
url:'gallery_controller.php',
success:function(html){
$('.content').append(html);
}
});
});
my button click is here (index.php):
<form action="" method="post">
<button type="submit" class="show_more" name="next">Next</button>
</form>
this is my php script (gallery_controller.php):
<?php
$servername = "localhost";
$username = "root";
$password = "";
$conn = new mysqli($servername, $username, $password, "dbgallery");
if ($conn->connect_error) {
die("Connection failed: " . $conn->connect_error);
}
$result = $conn->query("SELECT imagefile FROM tbl_images ORDER BY id DESC LIMIT 10 OFFSET 0");
while($row = $result->fetch_assoc()) {
echo '<h1>'.$row["imagefile"].'</h1><hr />';
}
?>
it seems to simply do nothing, i've tried a few things and nothing appears to work.. im wondering if ajax even works at all on my server.. i am a complete noob.
Do you need a form for that button?
If you wrapped the button into a form for W3C validity issues it's ok, you can simply change your button type attribute from type="submit" to type="button".
Please check the following complete code. I think "e.preventDefault();" is missing in your code.
<html>
<head>
<title>Test</title>
</head>
<body>
<form action="" method="post">
<button type="submit" class="show_more" name="next">Next</button>
</form>
<div class="content">
</div>
<script src="https://code.jquery.com/jquery-1.12.1.min.js"></script>
<script>
$('.show_more').on('click',function (e){
e.preventDefault();
$.ajax({
type:'POST',
url:'gallery_controller.php',
success:function(html){
$('.content').append(html);
}
});
});
</script>
</body>
</html>
auto fill second textbox with the input of first textbox. Like if I choose Jane as first name I want the second textbox to retrieve the last name from database and auto fill it with Doe. I am getting no auto input on second textbox not sure what I am doing wrong.
Here is the test.php code
<?php
?>
<script src="jquery-1.11.1.min.js"></script>
<script>
$(document).ready(function(){
$("#firstName").change(function(){
var firstName=$(this).val();
if(firstName != ''){
$.ajax({
type:"post",
url:"insert_process.php",
data:"firstName="+firstName,
datatype:"json",
success:function(data){ $("#lastname").val(data);
$('#ename').css( "background-color","#B3CBD6" )
$('#ename').animate({backgroundColor: "#fff",});
}
});
}
else{
$("#lastname").val("");
}
});
});
</script>
<!DOCTYPE html>
<html>
<head>
<title>Systems Request </title>
</head>
<body>
<div align="center">
<form action = "insert.php" method ="post" class="form" style="width: 285px; height: 192px">
<br><br>First Name<br>
<input type="text" id="firstName" name="firstName">
<br> Last Name<br>
<input type="text" id="lastname" name="lastname" ><br><br>
<input type="submit" value= "Submit Name "><br>
</form>
</div>
</body>
</html>
and then here is insert_proccess.php code
<?php
header('Content-Type: application/json');
$host = "localhost";
$user = "root";
$db_name= "people";
$pass= "systems399";
$con = mysql_connect($host, $user, $pass);
$db_conx=mysql_select_db("people", $con);
$fname= $_POST["firstName"];
$sql="SELECT * FROM names WHERE firstName='$fname' ";
$query= mysqli_query($db_conx, $sql);
$row = mysqli_fetch_array($query2 MYSQLI_ASSOC);
$rc = $row["lastname"];
echo json_encode ($rc);
?>
Is the request actually being sent (you can checking the networking tab)? Can you alert the returned data? Basically to be more helpful I would need more information on where exactly the process is failing, at a quick glance, try setting up your data structure more like this:
data: { "firstName": firstName }