I am trying to execute some simple JQuery commands in an echo statement from PHP after the user submits a Log In form.
The user is able to Log In with the correct credentials, however if they enter incorrect ones it should show the invalid credentials paragraph.
Here is the code:
<?php
//PHP code for login in, working, not needed to show
echo 'Testing
<script>
$( ".wrong" ).show( "slow" );
</script>';
?>
<!DOCTYPE html>
<html>
<head>
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
</head>
<body class="login">
<form action="" method="post" class="login-form">
<p class="wrong" style="display: none;">Invalid Credentials</p>
<a class="link" href="#">Forgot your password?</a>
<button type="submit" class="login-btn" name="submitLogin">Log in</button>
</form>
</body>
NOTE: The Testing value from the echo displays, yet the JQuery does not execute.
It is not possible to put the PHP code after the HTML as it creates a session for my login form to work.
<?php
echo 'Testing
<script>
$( ".wrong" ).show( "slow" );
</script>';
?>
This does not create a session, and does not need to be at the top. What needs to be at the top is a session_start() call yes, but echoing out script html is not required at the top
For instance you could do
<?php
session_start();
if(attemptLogin()){
//logged in path
} else {
//wrong credentials
$LoginError = true;
}
?>
<!doctype html>
<html>
<head>
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<?php if($LoginError):?>
<script>
jQuery(document).ready(function(){
$( ".wrong" ).show( "slow" );
});
</script>;
<?php endif;?>
</head>
You need to allow your js files to be loaded first, then the DOM to be loaded and then you can use your code below just before the </body> tag and it will work.
<?php
//PHP code for login in, working, not needed to show
echo 'Testing
<script>
$( ".wrong" ).show( "slow" );
</script>';
?>
Related
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>
My apologize in advance for my (maybe) stupid question but my knowledge of Javascript/JQuery is almost 0
I have in index.html the following script:
index.html
<script type="text/javascript" src="jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$("#MyDIV")
.load("buttons.php")
});
</script>
<div id="MyDIV"></div>
As you can see, the idea is load buttons.php in a div tag in index.html - That works fine -
buttons.php
<div id="buttom">
<div id="botton5"><img src="5.png" id="5"/></div>
</div>
<script>
$('#botton5').click(function(event){
$("#bottons").load('somepage.php?answer=5'); //here!
});
</script>
Thats also works fine and I receive the information from somepage.php in MyDIV in index.html
but does not work when I include a php in the URL in the line
$("#bottons").load('somepage.php?answer=5&title=<?php echo $title;?>&date=<?php echo $date;?>'); //here!
Including a PHP in load, the div does not load in index.html, can you please support me on how to add a php in the URL in load?
Thanks in advance for your support
#Luis Gerardo Runge In JavaScript you can't use PHP but logically you can take your value in hidden field and use in javascript. i have add some sample code my be it's help you
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
</head>
<div id="buttom">
<div id="botton5"><img src="5.png" id="5"/></div>
</div>
<div id="bottons">
</div>
<?php
$title = 'your title';
$date = 'yourdate';
?>
<input type="hidden" id="title" name="title" value="<?php echo urlencode($title); ?>">
<input type="hidden" id="date" name="date" value="<?php echo urlencode($date); ?>">
<script>
$('#botton5').click(function(event){
alert('call');
$("#bottons").load('json.php?answer=5&title='+$('#title').val()+'&date='+$('#date').val()+''); //here!
});
</script>
FYI: You need to use urlencode and urldecode for pass parameter through the URL
So, I tried everything that I know and I tried to find everywhere but no luck. I want to paste imdb link into (id="id_imdb") and then when I press button (name="b") I want that link to become variable $hjo and then to execute php script get_info_imdb.php and then return variable $slbl into javascript which will set textarea (name="movie_desc") to echo $slbl.
insert-movie.php
<html>
<body>
<?php
global $hjo;
$hjo = "http://www.imdb.com/title/tt1431045/";
include ("get_info_imdb.php");
?>
<form action="insert_movie.php" method="post" enctype="multipart/form-data">
<div>
<div>
<div>Description:</div>
<div><textarea name="movie_desc" rows="7" cols="50" id="id_desc" value="<?php echo (isset($slbl))?$slbl:'';?>"></textarea></div>
</div>
<div>
<div>Imdb:</div>
<div><input id="id_imdb" type="text" name="movie_imdb" size="50">
<button name="b" type="button">Button</button></div>
</div>
<div>
<div><input type="submit" name="submit" value="Publish"></div>
</div>
</form>
<script type="text/javascript">
function myFunction() {
document.getElementById("id_desc").value = "<?php echo $slbl; ?>";
}
</script>
</body>
</html>
<?php
...here is script to insert in database which is working...
?>
get_info_imdb.php
<?php
include ("simple_html_dom.php");
$html = new simple_html_dom();
$html->load_file($hjo);
$html = $html->find('.summary_text', 0);
$nesto = strip_tags($html);
$nesto = trim($nesto);
$slbl = $nesto;
?>
This is an example to explain how to perform your request through javascript and jQuery. It's only an example, you have to implement it wih your own code:
File get_info_imdb.php:
<?php
$movieID = $_GET['id'];
// Your code to retrieve movie info and chunk of HTML you want put in textarea
echo $TextAreaValue;
?>
Fle insert-movie.php:
<!DOCTYPE html>
<html>
<head>
<title>Test</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
</head>
<body>
<script type="text/JavaScript">
function getHTML()
{
$.get( "get_info_imdb.php?id=tt1431045", function( data ) {
$( "#myTextArea" ).html( data );
});
}
</script>
<form action="YourAction.php" method="YourMethod">
<textarea id="myTextArea"></textarea>
<button id="myButton" onclick="getHTML(); return false;">Click Me</button>
</form>
</body>
</html>
In the <head><script> I load jQuery; In javascript function getHTML() I use jQuery get method to retrieve desired url (I have insert movie id, you can insert variable id with php) and put it into the content of textarea #myTextArea.
In the <form> the <button id="myButton"> call getHTML() js function.
See more about jQuery
See more about jQuery.get method
See an alternative in javascript
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.
I need to add date to the form input field, but in codeigniter it is not working,here is my code in view, I don't know why it is not working, I have link web links also. it is only not working in codeigniter.this page is loaded using ajax.I think it would be the reason for the problem,how can I fix it????
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.0/themes/base/jquery-ui.css" />
<script src="http://code.jquery.com/jquery-1.8.3.js"></script>
<script src="http://code.jquery.com/ui/1.10.0/jquery-ui.js"></script>
<link rel="stylesheet" href="/resources/demos/style.css" />
<script>
$(function() {
$( "#datepicker" ).datepicker();
});
</script>
<div id="content">
<h2>Payment Details.</h2>
<?php
$this->load->helper('form');
$attributes = array('method'=>'post','name'=>'payments','id'=>'payments');
echo form_open_multipart('',$attributes);?>
<?php //echo form_open_multipart('payments/insert_payment');?>
<label>Payee Name: </label> <?php echo form_input('payee_name');?><br/><br/>
<label>Address: </label> <?php echo form_input('address');?><br/><br/>
<label>Account No: </label> <?php echo form_input('account_no');?><br/><br/>
<label>Bank Name: </label> <?php echo form_input('bank_name');?><br/><br/>
<label>Branch: </label> <?php echo form_input('branch');?><br/><br/>
<label>Amount: </label> <?php echo form_input('amount');?><br/><br/>
<label>Pick a Check Date: </label> <?php
$data = array(
'name'=> 'check_date',
'id' => 'datepicker',
'placeholder' => 'date',
);
echo form_input($data);?><br/><br/>
<label>Check Number: </label> <?php echo form_input('check_number');?><br/><br/>
<input type="submit" name="submit" value="Next"/>
<?php echo form_close(); ?>
You are trying to add two jquery files with different versions
thats why the datepicker is confused which jquery version can be used
please add jQuery.noConflict() before the document.ready function
Hope this helps :)
<script>
jQuery.noConflict();
$(function() {
$( "#datepicker" ).datepicker();
});
</script>
Debug as following
1> Check console.
2> Use inspect element for actual Id ( lots of frameworks changed it internally).
3> Try to put
$( "#datepicker" ).datepicker(); at end of file
Datepicker is not working because #datepicker didn't exist yet. You could make this work by moving ('#datepicker').datepicker() to after the point in the code where it(#datepicker) is created.
You are adding date picker to the id
$( "#datepicker" ).datepicker();
But where is this Id. You should add datepiker to the view where the id is available and add the respective javascript file also
I saw alot of problems
save the style sheet inside css folder(optional) your css should inside your ci folder
your href in css is not the right code, if your linking css do the code below
<link rel="stylesheet" href="<?php echo base_url();?>css/style.css" />`
make sure your base_url is correct. To see if this correct try to echo base_url();
hope this help you
View:
$this->load->helper(array('form'));
Controller:
function datepicker(){
$this->load->view('datepicker');
}
jQuery:
$(function() {
$( "#datepicker" ).datepicker();
});