I have two functions that need to work when a button is pressed, but (I think)the problem is one is jQuery and the other is PHP (I can't change that part). This is what my code looks like:
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script>
$(document).ready(function() {
$("#clicker").click(function(){
alert ("Button Was Clicked!");
});
});
</script>
</head>
<body>
<form name="myForm" action = "page_name.php">
<input id="clicker" type="submit" name="submit" value="Submit" />
</form>
<?php
$msg = "Not Clicked!";
if(isset($_POST['submit']))
{
$msg = "Clicked!";
}
?>
<p> <?php echo $msg; ?> </p>
</body>
</html>
For some reason, the PHP is not working, but the jQuery is. Could someone tell me what I need to change and why?
Thanks!
Use form to submit POST request.
Just change this:
<input id="clicker" type="submit" name="submit" value="Submit" />
with
<form action="" method="POST">
<button id="clicker" type="submit" name="submit">Submit</button>
</form>
Put this under your jquery script
$("#clicker").click(function(e){
e.preventDefault() ; alert ("Button Was Clicked!");
Related
I test my first AJAX form, but when I submit my form the alert message just shows '2'. I search for sending ajax data to the same page and I found, that I can do that, but URL is optional.
my PHP code:
<html>
<body>
<form action="index.php" method="post">
<input name="name" type="text" />
<input type="submit" value="submit" name="submit">
</form>
<?php
if(isset($_POST["name"]))
{
$data="test string";
echo json_encode($data);
}
?>
<script src="jquery-2.1.0.min.js"></script>
<script src="ajax.js"></script>
</body>
</html>
my AJAX code:
$(document).ready(function() {
$('form').submit(function(event) {
$.ajax({
type : 'POST',
url : 'index.php',
data : $(this).serialize(),
dataType : 'json',
encode : true
})
.done(function(data) {
alert(1);
})
.fail(function(data) {
alert(2);
});
event.preventDefault();
});
});
I don't know where I go wrong?
It's better to delegate page generation and json-response generation to different pages. At least you should isolate it, because the following part of page also ends up in ajax-response:
<html>
<body>
<form action="index.php" method="post">
<input name="name" type="text" />
<input type="submit" value="submit" name="submit">
</form>
...
<script src="jquery-2.1.0.min.js"></script>
<script src="ajax.js"></script>
</body>
</html>
Modifiyng your script, you can do something like that:
<?
if(isset($_POST["name"]))
{
// And don't forget to specify content type!
header("Content-type: application/json");
$data="test string";
echo json_encode($data);
} else {
?>
<html>
<body>
<form action="index.php" method="post">
<input name="name" type="text" />
<input type="submit" value="submit" name="submit">
</form>
<script src="jquery-2.1.0.min.js"></script>
<script src="ajax.js"></script>
</body>
</html>
<? } ?>
And, for future, please, post the exact request and response information in your questions, which you can get on Network page for developer tools of chrome, for example.
I want my form to load webpages. I want to turn html textbox into address bar. Just like whenever I write URL into that, It loads webpages in the same window.
My current HTML code is:
<html>
<body>
<title>BlogSoc Browser</title>
<h1 style="font-family:verdana;font-size:50px;color:#000000;text-align:center;">Address Bar</h1>
<center><form method="GET" action="/load.php"><input type="text" name="url" value="http://" /><input type="submit" value="Go" name="submit" /></form></center>
</body>
</html>
It looks like this: (couldn't post image)
or you can just open http://blogsoc.org/load
Please tell me the appropriate load.php code. Thanks in advance.
<?php
header("Location: " . $_GET['url']);
?>
should be what you need.
Using client side scripting:
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('#myform').submit(function(){ //when form is submitted..
window.location = $('#url').val(); //..get url from the textbox and load that url
return false; // prevent the form from being submitted
});
});
</script>
</head>
<body>
<form id="myform">
<input type="text" id="url" value="http://" />
<input type="submit" id="submit" value="Submit" />
</form>
</body>
</html>
I used jQuery. For reference: https://developer.mozilla.org/en-US/docs/DOM/window.location
I have a php script page with a form like this:
<form method="post" action="clientmanager.php">
<input type="text" name="code_client" id="code_client" />
<input type="submit" value="Save" />
</form>
In my file "clientmanager.php", I have a function for example "addClient()".
I want to click the button and only call the function "addClient()" in the file "clientmanager.php" instead of call the whole file "clientmanager.php", So how could I do??
Thx!!!!
Add this to the top of the file:
if (isset ($_POST ['code_client'])) addClient();
However, you should consider using a different setup - processing forms like this is considered bad practice.
Maybe create a separate file, use OOP, MVC, a framework, anything other than this.
You can do that over jquery (ajax).
Call jquery library in head
Call clientmanager.php over this code:
my_form.php
....
<script type="text/javascript" src="jquery.js"></script>
...
<form method="post" action="">
<input type="text" name="code_client" id="code_client" />
<input id="my_button" type="button" value="Save" />
</form>
<div id="response_div"></div>
<script type="text/javascript">
$(document).ready(function(){
$("#my_button").click(function(){
$.post("clientmanager.php", {code_client: $('#code_client').val()}, function(data){
if(data.length >0) {
$('#response_div').html(data);
}//end if
});
});
});
</script>
clientmanager.php
<?php
echo $_POST['code_client'];
?>
I am learning how to call external javascript files in my PHP code. I got some codes from the internet and tried it but its not working. Can somebody pls give me some advice or explain to me this. I am not a programmer but I am studying how to program and just started learning that's why I have difficulty understanding some concepts.
I have here the codes, PHP File and JS file. They are in the same folder.
Here are the codes:
index.php
<html>
<head>
<script language="JavaScript" src="exer_1.js"></script>
</head>
<body>
<form name="myform">
<input type="text" id="input_1" name="input_1" /><br />
<input type="text" id="input_2" name="input_2" /><br />
<input type="submit" value="Check!" onclick="javascript:parseTest() return false;" />
</form>
</body>
</html>
exer_1.js
function parseTest() {
var elem_1 = document.getElementById('input_1');
var elem_2 = document.getElementById('input_2');
var inp_1 = elem_1.value;
var inp_2 = elem_2.value;
if (inp_1 == "" && inp_2 == "") {
alert("You need to enter integers!!!");
elem_1.focus();
} else if (inp_1 == ""){
alert("You need to enter Integer 1!!!");
elem_1.focus();
} else if (inp_2 == ""){
alert("You need to enter Integer 2!!!");
elem_2.focus();;
} else {
if (!parseInt(inp_1) || !parseInt(inp_2)) alert ("Enter Integers only!!!");
else {
alert("Correct Inputs!!!");
}
}
}
<script language="JavaScript" src="exer_1.js"></script>
The language attribute is deprecated, use type instead
<script type="text/javascript" src="exer_1.js"></script>
The correct syntax for inline event binding is
<input type="submit" value="Check!" onclick="parseTest(); return false;" />
You may want to consider moving the event handler to the form's submit event. Your function could then return false on error or true on success, which can then be used to determine whether the form submission continues or not, eg
<form onsubmit="return parseTest()">
You have not really specified what is not working but i am noticing something in your code.
<html>
<head>
<script language="JavaScript" src="exer_1.js"></script>
</head>
<body>
<form name="myform">
<input type="text" id="input_1" name="input_1" /><br />
<input type="text" id="input_2" name="input_2" /><br />
<!-- The following will cause an error -->
<input type="submit" value="Check!" onclick="javascript:parseTest() return false;" />
<!-- instead use this -->
<input type="submit" value="Check!" onclick="javascript:parseTest(); return false;" />
</form>
</body>
</html>
semicolon error
I would look into JQuery for a nice javascript framework. Instead of putting javascript code on the button's "onclick" event, with jquery you could do something like:
$('#submit').click(function() {
// whatever code you want to run when submit is clicked.
alert('Submit clicked');
}
<script type="text/javascript" src="exer_1.js"></script>
test.html
<html>
<!--
Please see the full php-ajax tutorial at http://www.php-learn-it.com/tutorials/starting_with_php_and_ajax.html
If you found this tutorial useful, i would apprciate a link back to this tutorial.
Visit http://www.php-learn-it.com for more php and ajax tutrials
-->
<title>php-learn-it.com - php ajax form submit</title>
<head>
<script type="text/javascript" src="prototype.js"></script>
<script>
function sendRequest() {
new Ajax.Request("test.php",
{
method: 'post',
postBody: 'name='+ $F('name'),
onComplete: showResponse
});
}
function showResponse(req){
$('show').innerHTML= req.responseText;
}
</script>
</head>
<body>
<form id="test" onSubmit="return false;">
<input type="hidden" name="name" id="name" value="value">
<input type="hidden" name="somethingElse" value="test" value="submit" onClick="sendRequest()">
</form>
Post!
<div id="show"></div>
<br/><br/>
</body>
</html>
<?php
/*
* Please see the full php-ajax tutorial at http://www.php-learn-it.com/tutorials/starting_with_php_and_ajax.html
* If you found this tutorial useful, i would apprciate a link back to this tutorial.
* Visit http://www.php-learn-it.com for more php and ajax tutrials
*/
if($_POST["name"] == "")
echo "name is empty";
else
echo "you typed ".$_POST["name"];
?>
Where is the wrong in form thanks.
A few things are wrong here:
You have an onclick on a hidden form element
The Post! anchor onclick isn't submitting anything
Suggested changes:
<head>
<script type="text/javascript" src="prototype.js"></script>
<script>
function showResponse(req){
$('show').innerHTML = req.responseText;
}
</script>
</head>
<body>
<form id="test" name="test" action="test.php">
<input type="hidden" name="name" id="name" value="cats" />
<input type="hidden" name="somethingElse" value="test" />
</form>
Post!
<div id="show"></div>
</body>
form id="test" and no name
and yet :
a href="#" onclick="myForm.submit()"
just for starters.