Change JavaScript default alerts by using sweet alerts in process - javascript

I want to ask,, how to call sweet alert in process.php?
example if in html:
<!DOCTYPE html>
<html>
<head>
<title>Sweet Alert</title>
<link rel="stylesheet" type="text/css" href="plugins/sweetalert/sweetalert.css">
<script type="text/javascript" src="plugins/sweetalert/sweetalert.min.js"></script>
</head>
<body>
<button onclick="sweet()">Sweet Alert</button>
<script>
function sweet (){
swal("Good job!");
}
</script>
</body>
</html>
Well, how if placed in process.php?
Example there are 2 fields:
tes.php :
<form method="post" action="proses.php">
<label>NIK</label><br>
<input type="text" name="nik"><br>
<label>Confirm NIK</label><br>
<input type="text" name="confirmnik"><br><br>
<button type="submit" name="submit">Cek</button>
</form>
process.php :
<?php
$nik = $_POST['nik'];
$confirmnik = $_POST['confirmnik'];
if ($nik<>$confirmnik)
{
echo "<script language='javascript'>alert('nik and confirm nik do not match !');window.history.back();</script>";
}
else
{
echo "<script language='javascript'>alert('ok');window.history.back();</script>";
}
?>
result :
How to change javascript default alerts by using sweet alerts in process.php file?

You should be able to seamlessly replace alert with swal.
Your only issue is going to be calling the window.history.back function. You need to put it in a callback as sweet alert does not block the thread like alert does.
You can use promises for that:
So your JS code would look something like:
swal('nik and confirm nik do not match !').then(() => {window.history.back()});
And the full PHP code would look like:
<?php
$nik = $_POST['nik'];
$confirmnik = $_POST['confirmnik'];
if ($nik<>$confirmnik)
{
echo "<script language='javascript'>swal('nik and confirm nik do not match !').then(() => { window.history.back(); });</script>";
}
else
{
echo "<script language='javascript'>swal('ok').then(() => { window.history.back(); });</script>";
}
?>

Related

the button is inactive after successfully moving the page and when returning to the page where the button is still inactive

how to make the button is inactive after successfully moving the page coba.php and when returning to the page test.php button remains inactive
test.php
`<button type="button" id="Btn" onclick="myFunction()">Klik</button>
<script>
function myFunction()
{var x = document.getElementById("Btn");location.href =
"coba.php";x.disabled = true;}
</script>`
this file
coba.php
<?php echo "Hallo!" ?>
Thank you in advance ^_^
If I understand correctly you want that after the file has been moved successfully you want the button to be disabled
if this is the case, one possible way is to use a variable of type sesssion and check if the page has already been visited as in this example:
test.php:
<?php
session_start();
?>
<html>
<body>
<button onClick="myfunction()"
<?php if(isset(session['load'])){echo("disabled");}?>
>Klik</button>
<script>
function myfunction(){
location.href = "coba.php";}
</script>
<body>
<html>
the coba.php look like this:
<?php
session_start();
$_SESSION['load'] = "true";
?>
<html>
<body>
<?php echo("Hallo!") ?>
<button>Back</button>
<body>
<html>

JQuery on("submit") not executing on the 1st click

I am using JQuery to test the size of an input after submitting a form:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Page 1</title>
<meta charset="utf-8">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
</head>
<body>
<form method="post" action="essai.php">
<input type="text" name="mail" id="email" placeholder="mail"/><br />
<input type="submit" name="submit" value="Validate" />
</form>
<?php
if (isset($_POST['submit'])){
echo($_POST['mail']);
if(isset($_POST['mail'])){
$data=789;
}
}
?>
<script>
$(function(){
var data = <?php echo json_encode($data); ?>;
$("form").on("submit", function() {
if(data.toString().length < 4) {
alert(data);
return false;
}
});
});
</script>
</body>
</html>
The problem is that the alert (if I enter only 1 caracter for instance) does not pop up after the 1st submitting but only after the others.
Thank you
First, it's terribly insecure to embed PHP code within JavaScript. I can't think of one reason why you will want to use server-side code on the client-side. As an alternative, echo the javascript code from PHP, not the other way round.
Now your problem comes up because the first time the page is loaded, nothing is posted. You have some chunk of code which executes only after something gets posted. If your PHP script can display errors, you will see an undefined variable notice thrown the first time you load the code. You can work around that by declaring the variable before using it in the condition:
$data = 0; // Initialize variable here
if (isset($_POST['submit'])){
echo($_POST['mail']);
if(isset($_POST['mail'])){
$data=789;
}
}

how to call a php file from javascript?

Hi I am very new to JavaScript, looking for some help. I have a form, shown below. When the user gives input and clicks submit, I want to call a php file (shown below also) to be invoked and return a hello. Here is the code I have tried, though it is not working as intended.
<html>
<head>
<script type='text/javascript' src="http://code.jquery.com/jquery-1.8.0.min.js"></script>
</head>
<body>
<form>
<input id="name-typed" type="text" />
<input id="name-submit" type="submit" value="submit" onclick="post()"/>
</form>
<div id="result"></div>
</body>
<script>
function post() {
var hname = $('input#name-typed').val();
$.post('dat.php',{name: hname},function(data) {
$('div#result').html(data);
});
}
</script>
</html>
The PHP file dat.php looks like this:
<?php echo "hello";?>
As in my first paragraph, can anyone suggest any changes I should make?
Try this:
you can change dat.php to say:
<?php
$name = $_POST['name'];
echo "Hello ".$name;
?>
And then your html file would be:
Notice that the button type is changed to a normal button so that it just execute the function rather than submitting the form.
<html>
<head>
<script type='text/javascript' src="http://code.jquery.com/jquery-1.8.0.min.js"></script>
</head>
<body>
<form>
<input id="name-typed" type="text" />
<button type="button" onclick="post()">Submit</button>
</form>
<div id="result"></div>
</body>
<script>
function post() {
$.ajax({
type: "POST",
url: "dat.php",
data: { name: $('#name-typed').val()
},
success: function(response) {
$('#result').html(response);
}
});
}
</script>
</html>
I haven't test but something like this:
$('form').submit(function(){
post()
return false;//block the reload of the page
})
In fact I think you just forget the return false. remvove the onclick if you use my answer

JQuery POST data to php, direct to php, data not exist anymore in php

I passed along data via POST to php using JQuery, but when the page direct to the php file, the POST["createVal"] in php doesn't seem to exit after the call back. I showed this in demo below, notice that the $name is undefined when the callback result is clicked. Any idea how to fix this?
I'm trying to make a function that when the returned result was clicked, html page could redirect to the php page in which user input in html file could be printed out.
HTML file
<html>
<head>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
</head>
<body>
<input type="text" id="userinput">
<div id="result">
</div>
</body>
<script>
$("input").keyup(function(){
var input=$("input").val();
$.post("process.php",{createVal:input},function(data){
$("#result").html("<a href='process.php'>"+data+"</a>");
})
})
</script>
</html>
php file(process.php)
<?php
if(isset($_POST["createVal"])){
$name=$_POST["createVal"];
echo $name;
}
?>
<?php
echo $name;
?>
change
$("#result").html("<a href='process.php'>"+data+"</a>");
to
$("#result").html("<a href='process.php?createVal="+data+"'>"+data+"</a>");
and
process.php
if(isset($_REQUEST["createVal"])){
$name=$_REQUEST["createVal"];
echo $name;
}
Use this Html Code:
<html>
<head>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js">
</script>
</head>
<body>
<input type="text" id="userinput">
<div id="result"> </div>
</body>
<script>
$("input").keyup(function(){
var input=$("input").val();
$.ajax({
type: "POST",
url: "http://localhost/stackoverflow/process.php",
data: {'createVal': input},
success: function(data){
$("#result").html("<a href='http://localhost/stackoverflow/process.php?createVal="+data+"'>"+data+"</a>");
}
});
});
</script>
</html>
PHP Code:
<?php
if(!empty($_REQUEST['createVal']) || !empty($_GET['createVal'])){
$name = $_REQUEST['createVal'];
echo $name;
}elseif(!empty($_GET['createVal'])){
$name = $_GET['createVal'];
echo $name;
}
return 1;
?>
I have run and checked this too.
localhost: if you are running this code on localhost
stackoverflow: is the folder name, if you have any folder in localhost for it so replace the name by this.

PHP: send post to div on same page instead of another page

I have a page called login.php loaded into a div on another page (index.php). login.php includes a form with action pointing to login.php
Once I press the submit button, the page will open either in a new tab (if no target is specified), or as the whole page (if target is _top, overwriting index.php). what I want is to have index.php open while login.php is loaded into it's div, and the post data to go to login.php which is inside the div. is that even possible?
LOGIN.PHP
<!DOCTYPE html>
<html>
<head>
<link href="others.css" rel="stylesheet">
</head>
<body>
<?php
require_once('funcs.php');
if (!empty($_POST['user']) && !empty($_POST['pass']))
{
$username=cleanInput($_POST['user']);
$password=cleanInput($_POST['pass']);
if (login($username,$password)) { show_login_form("Invalid username or password!"); }
else
{
// login...
echo "okay boss!";
}
}
else { show_login_form(null); }
?>
</body>
</html>
FUNCS.PHP
<?php
function cleanInput($data)
{
$data=trim($data);
$data=htmlspecialchars($data,ENT_QUOTES, "UTF-8");
return $data;
}
function show_login_form($err)
{
echo '<h4>Enter username and password:</h4>';
if (isset($err)) { echo "<span style='color:red'>Error: $err</span><br>"; }
echo '
<br><form method="post" action="login.php">
username: <br><input name="user" type="text"><br>
password: <br><input name="pass" type="password"><br><br>
<input id="button" type="submit" value="Login"></form>
';
}
?>
INDEX.PHP
<!DOCTYPE html>
<html>
<head>
<title>Dating Site</title>
<link href="site.css" rel="stylesheet">
</head>
<body>
<?php require_once ("header.php"); ?>
<div id="mainframe" class="mainframe">
<?php require_once ("home.php"); ?>
</div>
<?php require_once ("footer.php"); ?>
</body>
</html>
and to load a page into the "mainframe" div,I use this code:
function loadsel(page)
{
if (page == 1)
$("div#mainframe").load('login.php');
}
What you need to do is use ajax to submit your form . Try this plugin and add the following code
http://jquery.malsup.com/form/#ajaxSubmit
download the plugin
function login(){
$('#login_form').ajaxSubmit({
target:'#output_login',
url:'./php/login.php'
});
return false;
}

Categories

Resources