I'm trying to use Ajax for a form but it seems not to be working. I'm not sure if it's because the file is php but being shown as a javascript file, or something along those lines but I would like to get this fixed. Thanks in advance.
login/index.php
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title><?php echo SERVER_NAME; ?> | <?php echo $this->title ?></title>
<link rel="stylesheet" media="screen" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
<link rel="stylesheet" href="<?php echo URL; ?>/public/css/bootstrap.min.css"></link>
<link rel="stylesheet" href="<?php echo URL; ?>/public/css/css.login.php" />
<script type="text/javascript" src="<?php echo URL; ?>/public/js/jquery.min.js"></script>
<script type="text/javascript" src="<?php echo URL; ?>/public/js/bootstrap.min.js"></script>
</head>
<body>
<div id="login" class="container">
<div class="module">
<div class="module-header">
<h4>Login</h4>
</div>
<div class="module-body module-padding">
<form class="form" method="post" action="<?php echo URL;?>/actions/login.php">
<input type="text" name="login-username" placeholder="Username">
<br />
<input type="password" name="login-password" placeholder="Password">
<br />
<input type="submit" name="submit" placeholder="Login" class="pull-right">
</form>
</div>
</div>
<div class="msg">
</div>
</div>
<script type="text/javascript" src="<?php echo URL; ?>/public/js/user-login.php"></script>
</body>
</html>
user-login.php (acts as js)
<?php
header('Content-Type: application/javascript');
require "../../Application/Configuration/config.php";
?>
$(window).load(function() {
$('.form').submit(function(event) {
var formData = {
'login-username': $('input[name=login-username]').val(),
'login-password': $('input[name=login-password]').val()
};
$.ajax({
type: "POST",
url: "<?php echo URL; ?>/actions/login.php",
data: formData,
success: function (json_data) {
var data_array = $.parseJSON(json_data);
if (data_array['error'] == false) {
$('.msg').css('display', 'block');
$('.msg').addClass('msg-success');
$('.msg p').html(data_array['text']);
$('.msg').fadeOut(4000);
var delay = 4000;
setTimeout(function() {
window.location.replace("../index.php");
}, delay);
} else {
$('.msg').css('display', 'block');
$('.msg').addClass('msg-failure');
$('.msg p').html(data_array['text']);
$('.msg').fadeOut(4000);
}
},
fail: function () {
alert("failed to send");
}
});
});
});
Related
I am trying to run an ajax script from javascript inside a PHP file :
$(document).on('click', '.goto_date', function(){
var datechosen= $('#pickdate').val();
alert(datechosen);
$.ajax({
url:"vdater.php",
method:"POST",
dataType:"json",
data:{'datechosen':datechosen},
success:function(data){
alert('success');
}
});
});
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
</head>
<body>
<div align="center">
<input type="button" name="gotodate" value="Go to date" id="gotodate" class="btn btn-danger btn-xs goto_date" />
<input type="date" name='pickdate' id='pickdate' />
</div>
</body>
</html>
But when I run the code nothing happens apart from the alert box referring that the ajax script is reachable in the code..
The PHP file may contain the following code:
echo $_POST['datechosen'];
Surprisingly, It worked by removing the line:
dataType:"json",
Try this one. It must be worked!
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Get Ajax Response</title>
</head>
<body>
<div align="center">
<input type="button" name="gotodate" value="Go to date" id="gotodate" class="btn btn-danger btn-xs goto_date" />
<input type="date" name='pickdate' id='pickdate' />
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
<script>
let dateBtn = document.querySelector('#gotodate');
let getDate = document.querySelector('#pickdate');
dateBtn.addEventListener('click',(event)=>{
event.preventDefault();
if(getDate.value.trim() !== ""){
console.log(getDate.value.trim());
dateBtn.style.borderColor = "transparent"
jQuery.ajax({
type: "POST",
url: "vdater.php",
data:{
datechosen: getDate.value.trim()
},
success: ((response,status, object) => {
response = JSON.parse(response);
if(response.status){
alert(`Date Chosen: ${response.PickedDate}`);
}
})
});
}else{
dateBtn.style.border = "1px solid #fb5757";
}
});
</script>
</body>
</html>
<?php
if(isset($_POST['datechosen'])){
$date = $_POST['datechosen'];
echo json_encode(["PickedDate"=> $date,"status"=>true]);
}
I want to set a PHP cookie through a button click event of JavaScript how can I achieve this. Is there any big minds can help me.
<script>
function openC(){
<?php setcookie('z', 'on', time() + (86000), "/" ); ?>
oopen();
}
</script>
<div class="row">
<div class="col-12 p-rel">
<button type="button" onclick="openC()" id="opner" class="btn hide btn-dark "><i
class="fa fa-bars"></i></button>
</div>
</div>
above is my code if I try to echo my cookie in another page like my header page I get nothing
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!--Favicon-->
<link rel="icon" href="<?= base_url() ?>assets/new_assets/images/favicon.png" type="image/gif" sizes="16x16">
<link href="<?= base_url() ?>assets/new_assets/css/style.css" rel="stylesheet" type="text/css"/>
<!--Site Title-->
<title><?php echo!empty($title) ? $title : ""; ?></title>
<p> <?php echo $_COOKIE["z"]; ?></p>
</head>
<script type="text/javascript">
var url = "<?php echo base_url(); ?>";
</script>
I have a input field which when selected opens a date range calendar.
I am trying to send the date values over AJAX to a PHP file to echo when the apply button is pressed. The AJAX post request does send, however when I try to test for detection in my PHP file nothing is returned.
I have searched online and have found nothing to indicate why. Here is my code
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script type="text/javascript" src="//cdn.jsdelivr.net/jquery/1/jquery.min.js"></script>
<script type="text/javascript" src="//cdn.jsdelivr.net/momentjs/latest/moment.min.js"></script>
<link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/bootstrap/latest/css/bootstrap.css" />
<!-- Include Date Range Picker -->
<script type="text/javascript" src="daterangepicker.js"></script>
<link rel="stylesheet" type="text/css" href="daterangepicker.css" /> </head>
<body>
<input type="text" name="datefilter" value="" id="dates" />
<script type="text/javascript">
$(function () {
$('input[name="datefilter"]').daterangepicker({
"showDropdowns": true
, "minDate": "01/01/2014"
});
$('input[name="datefilter"]').on('apply.daterangepicker', function (ev, picker) {
$(this).val(picker.startDate.format('MM/DD/YYYY') + ' - ' + picker.endDate.format('MM/DD/YYYY'));
});
$('input[name="datefilter"]').on('cancel.daterangepicker', function (ev, picker) {
$(this).val('');
});
$(".applyBtn").attr('id', 'testing');
$('#testing').click(function (e) {
$.ajax({
type: "POST",
url: 'test.php',
data: {
dates: $('#dates').val()
},
success: function (data) {
alert("success")
}
});
});
});
</script>
</body>
</html>
test.php
<?php
if (isset($_POST['dates'])) {
$range = $_POST['dates'];
echo $range;
} else {
echo "false";
}
?>
EDIT//
response body
The code works fine, the server response is in the "Response" tab:
instead of showing "success" in the alert, you could do this:
success: function (data) {
alert(data)
}
EDIT
Output in test.php:
put datefilter in a form
<form id="frm-test" action="test.php" method="post">
<input type="text" name="datefilter" value="" id="dates" />
</form>
dates -> datefilter in test.php
<?php
if (isset($_POST['datefilter'])) {
$range = $_POST['datefilter'];
echo $range;
} else {
echo "false";
}
I got this error from my bootstrap.js. what is the error and how can i fix this?
GET http://localhost/hr/public/js/booststrap.js index:12
status 404
My header code is,
<!--DOCTYPE html-->
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Login</title>
<link rel="stylesheet" href="<?php echo base_url();?>public/css/bootstrap-responsive.min.css" type="text/css" media="screen" title="no title" charset="utf-8">
<link rel="stylesheet" href="<?php echo base_url();?>public/css/style.css" type="text/css" media="screen" title="no title" charset="utf-8">
<script src="<?php echo base_url()?>public/js/jquery.js"></script>
<script src="<?php echo base_url()?>public/js/booststrap.js"></script>
</head>
<body>
<header>
Header
</header>
i am using code igniter on xampp.
I think you need to change the script tags to this:
<script src="<?php echo base_url();?>public/js/jquery.js"></script>
<script src="<?php echo base_url();?>public/js/bootstrap.js"></script>
And, as suggested by #wolfgang1983 make sure to edit the base_url in the config file to http://localhost/hr/
i have problem with including javascript in joomla 3 template code. I am trying to create slider menu with http://9bitstudios.github.io/flexisel/. Outside of joomla with only html and java code, menu works great. But when i try to implement into joomla template i cant get it working.
My template code:
<?php
defined( '_JEXEC' ) or die( 'Restricted access' );
?>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"
xml:lang="<?php echo $this->language; ?>" lang="<?php echo $this->language; ?>" >
<head>
<jdoc:include type="head" />
<link rel="stylesheet" href="<?php echo $this->baseurl ?>/templates/system/css/system.css" type="text/css" />
<link rel="stylesheet" href="<?php echo $this->baseurl ?>/templates/system/css/general.css" type="text/css" />
<link rel="stylesheet" href="<?php echo $this->baseurl ?>/templates/<?php echo $this->template; ?>/css/reset.css" type="text/css" />
<link rel="stylesheet" href="<?php echo $this->baseurl ?>/templates/<?php echo $this->template; ?>/css/style.css" type="text/css" />
<link rel="stylesheet" href="<?php echo $this->baseurl ?>/templates/<?php echo $this->template; ?>/css/flexisel.css" type="text/css" />
<?php
JHtml::_('jquery.framework');
?>
<script type="text/javascript" src="templates/<?php echo $this->template ?>/js/jquery.flexisel.js"></script>
<script type="text/javascript" charset="utf-8">
$(window).load(function() {
$("#flexiselDemo1").flexisel();
});
</script>
</head>
<body>
<div id="page">
<div id="head">
VOSSP
</div>
<div id="main-menu">
<jdoc:include type="modules" name="main-menu" />
</div>
<div id="footer">
</div>
</div>
</body>
</html>
I tryed using of $document->addScriptDeclaration and $document->addScript, from http://docs.joomla.org/Adding_JavaScript, but no change.
You are importing jQuery in noConflict mode, so try changing this:
$(window).load(function() {
$("#flexiselDemo1").flexisel();
});
to this:
jQuery(document).ready(function($) {
$("#flexiselDemo1").flexisel();
});
Note: go back to using JHtml::_('jquery.framework');