JQuery form validation does not work for me - javascript

I have tested this code in http://jsfiddle.net/gLpHY/92/, in there it runs fine but when I run it in my computer it does not work. (I have tested two versions of this code once using just html and jquery and the next time I use them with php, both of them did not work for me.)
<html>
<head>
<link rel="stylesheet" href="<?php echo base_url()?>css/style.css">
<link rel="stylesheet" href="<?php echo base_url()?>css/tableCss.css">
<script type="text/javascript" scr="<?php echo base_url()?>js/jquery-1.12.0.js"></script>
<script type="text/javascript" scr="<?php echo base_url()?>js/projs.js"></script>
<script type="text/javascript" scr="<?php echo base_url()?>js/jquery.validate.min.js"></script>
<title>Questions</title>
</head>
<body>
<div class="frm"><?php $a=array("id"=>"myForm","name"=>"myForm");
echo form_open('site/search',$a); ?>
<div>
<?php echo form_label('Question:','question'); ?>
<?php echo form_input('question', set_value('question', #$_GET['question']), 'id="question"', 'name="question"'); ?>
</div>
<div>
<?php echo form_label('Category:','category'); ?>
<?php echo form_dropdown('category', $category_options, set_value('category', #$_GET['category']), 'id="category"', 'name="category"'); ?>
</div>
<div>
<?php echo form_label('Score:','score'); ?>
<?php echo form_dropdown('score_comparison', array('gt' => '>', 'gte' =>'>=' , 'eq' => '=', 'lt' => '<', 'lte' => '<='), set_value('score_comparison', #$_GET['score_comparison']), 'id="score_comparison"', 'name="score_comparison"'); ?>
<?php echo form_input('score', set_value('score', #$_GET['score']), 'id="score"', 'name="score"'; ?>
</div>
<div>
<?php echo form_submit('action','');?>
</div>
<?php echo form_close();?>
</div>
<script type="text/javascript">
$(document).ready(function () {
$("#myForm").validate({
rules: {
question: {
required: true
}
},
messages: {
question:{
required: "Please enter some text"
}
}
});
});
</script>
</body>
</html>

First off all, replace you <?php echo base_url()?> with just /. You can use relative path for resources from your site. Path should be like this: scr="/js/jquery-1.12.0.js" for all you scripts.
For second replace your string $().ready(function () { with $(function () {
Hope this helps.

Try typing in the full URL instead of using <?php echo base_url()?> as I have seen that cause problems with printing the URL twice and then the page obviously not being able to find it. Also, the way you have written .ready() is not recommended. You might want to consider adding document inside the parenthesis like this:
$(document).ready(function(){});
.ready() source

Related

How do I access session variable from php in external javascript

I know this has been asked before but there's no explanation from start to finish. I have a login.php from which I want to get $_SESSION['user_id']
from
<?php
include "connect.php";
session_start();
$email=$_POST['email'];
$password=$_POST['password'];
$select_data=mysql_query("select * from user where email='$email' and password='$password'");
if(isset($_POST['email']))
{
if($row=mysql_fetch_array($select_data))
{
$_SESSION['user_id']=$row['id']; //The variable want to access from ext.js
echo "success";
}
else
{
echo "fail";
}
exit();
}
?>
By the way, this authenication works fine
My Main.php
<!DOCTYPE html>
<?php include 'connect.php';
session_start();
echo $_SESSION['user_id']; //works fine
//;
?>
<body>
//contents
<script src="login.js"></script>
<script src="postad.js"></script> //the script from which I want to get $SESSION_['user_id']
</body>
I want this variable to insert later on in a database. Any suggestions?
If you want to call php variable in external js file then you have to store value in input.
Main.php
<body>
<input type="hidden" value="$SESSION_['user_id']" class="user_id">
<script src="login.js"></script>
<script src="postad.js"></script> //the script from which I want to get $SESSION_['user_id']
</body>
postad.js
$(function(){
var user_id = $('.user_id').val();
alert(user_id);
});
And if you want to use in same file then you can directly use php echo.
Main.php
<body>
//content..
<script>
var user_id = "<?php echo $SESSION_['user_id'] ?>";
</script>
<script src="login.js"></script>
<script src="postad.js"></script> // console.log(user_id); that file you'll get that id.
</body>
You can assign session id value to a JavaScript variable to make it available for JavaScript:
<!DOCTYPE html>
<?php include 'connect.php';
session_start();
echo $_SESSION['user_id']; //works fine
//;
?>
<body>
//contents
<script>
var sessionId = "<?php echo $_SESSION['user_id'] ?>";
</script>
<script src="login.js"></script>
<script src="postad.js"></script> // "sessionId" variable should be available for the script
</body>

Two JQuery functions, whichever is loaded second stops the first from working

I have two jQuery document.ready functions, one is for a pop-up, the other is for a cookie notification banner.
The problem I am encountering is when I load these separately whichever one I load second stops the first from working.
For example:
<script type="text/javascript">
jQuery(document).ready(
function() {
jQuery("#bookdirectlink").click(function() {
jQuery("#bookdirectp").show();
});
jQuery(".close").click(function() {
jQuery("#bookdirectp").hide();
});
}
);
</script>
<script type="text/javascript">
jQuery(document).ready(
function() {
$('.cookie-message').cookieBar({ closeButton : '.my-close-button' });
});
</script>
The second script then works and hides the cookie bar when the button is clicked, but the first script doesn't work. The reverse is true if I swap the scripts around.
I've also tried combining the two into one ready statement, ie:
<script type="text/javascript">
jQuery(document).ready(
function() {
jQuery("#bookdirectlink").click(function() {
jQuery("#bookdirectp").show();
});
jQuery(".close").click(function() {
jQuery("#bookdirectp").hide();
});
$('.cookie-message').cookieBar({ closeButton : '.my-close-button' });
}
);
</script>
But then none of the functions work.
The cookie bar runs from a script that I am loading in the header:
<script type='text/javascript' src="<?php bloginfo('template_url'); ?>/dist/js/jquery.cookieBar.js"/>
Any advice would be greatly appreciated.
This is the html for the cookie banner:
<div class="cookie-message">
<p>We use cookies, including those by third parties, to improve our services, show you advertisements based on your preferences, perform statistical analysis on our users' browsing behaviour and simplify the interaction with social networks. If you continue browsing, we will assume that you agree with their use.</p><p> You can obtain further information here. Privacy Policy</p> <a class="my-close-button" href>Accept</a>
</div>
And the html for the pop up:
<div id="directcontainer">
<a class="close" href="#">X</a>
<?php if(get_field('heading', 'option')){ ?><h2><?php the_field('heading', 'option'); ?></h2> <?php } ?>
<?php if(get_field('main_text', 'option')){ ?><p><?php the_field('main_text', 'option'); ?></p> <?php } ?>
<?php if(get_field('small_text', 'option')){ ?><p><span><?php the_field('small_text', 'option'); ?></span></p> <?php } ?>
<?php if(get_field('booking_button_link', 'option')){ ?><?php if(get_field('booking_button_text', 'option')){ ?><?php the_field('booking_button_text', 'option'); ?> <?php } ?><?php } ?>
</div>
Stupid mistake:
I had
<script type='text/javascript' src="<?php bloginfo('template_url'); ?>/dist/js/jquery.cookieBar.js"/>
instead of:
<script type='text/javascript' src="<?php bloginfo('template_url'); ?>/dist/js/jquery.cookieBar.js"></script>

Cannot update html text from script in php echo

I have some code like this:
<?php
echo "<script> alert('hello world!!!'); </script>";
echo "<script> document.getElementById('updatetext').innerHTML='heyatest'; </script>";
?>
<html>
<head>
</head>
<body>
<p id="updatetext">Some Text Here</p>
</body>
</html>
I need it to work this way and update the text at certain point through PHP code. In above the alert popup shows, but my text does not get updated with "heyatest"
You're calling the javascript that tries to find your id updatetext before that object exists. It cannot find it. Call the php after the html object you're looking for.
<html>
<head>
</head>
<body>
<p id="updatetext">Some Text Here</p>
</body>
</html>
<?php
echo "<script> alert('hello world!!!'); </script>";
echo "<script> document.getElementById('updatetext').innerHTML='heyatest'; </script>";
?>
The Javascript isn't calling an initiated object. Try it like this:
<html>
<head>
</head>
<body>
<p id="updatetext">Some Text Here</p>
<?php
echo "<script> alert('hello world!!!'); </script>";
echo "<script> document.getElementById('updatetext').innerHTML='heyatest'; </script>";
?>
</body>
</html>

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.

Simple ajax post Uncaught ReferenceError

Hello I have a simple ajax call but I can not see the result. What am I doing wrong ? Thank You.
index.php
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type">
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript">
function prova(SelectedFriend){
$.post("result.php", {Selected:Selected});
return false;
}
</script>
</head>
<body>
<?
$user="name1";
?>
<div onclick="prova(<? echo $user; ?>)" style="cursor:pointer;">
<? echo $user; ?>
</div>
<?
$user="name2";
?>
<div onclick="prova(<? echo $user; ?>)" style="cursor:pointer;">
<? echo $user; ?>
</div>
<?
$user="name3";
?>
<div onclick="prova(<? echo $user; ?>)" style="cursor:pointer;">
<? echo $user; ?>
</div>
<div id="Result"></div>
</body>
</html>
and result.php
<?
echo $_POST['Result'];
?>
The console of my browser says "Uncaught ReferenceError: name1 is not defined" when I click on name1.
The $user must be placed inside simple quotes:
<div onclick="prova('<? echo $user; ?>')" style="cursor:pointer;">
Also your function is not using the parameter as it should:
function prova(SelectedFriend){
$.post("result.php", {SelectedFriend:SelectedFriend});
return false;
}
And the result.php file must be corrected as well:
<?php
echo $_POST['SelectedFriend'];

Categories

Resources