I'm attempting to return results from PHP to a div id=loginstart located on home.html, however the results fail to appear. I've tried troubleshooting for over 24hrs but I haven't been able to find anything that works. Any ideas?
[html]
<head>
<link href="css/style.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#checklogin").validate({
debug: false,
rules: {
name: "required",
email: "required",
},
messages: {
name: "Please enter your Username.",
email: "Please enter your Password.",
},
submitHandler: function(form) {
$.post("php/Login.php", $("#myform").serialize(), function(html) {
$("#LoginResult").html(html);
});
}
});
});
$(document).ready(function(){
$.post('php/Users.php', '', function(data) {
$('#loginstart').html(data);
});
});
</script>
</head>
<body>
<div class="sidebar-content-left">
<div id="LoginResult"></div>
<div id="loginstart"></div>
</div>
</body
[users php]
Welcome '.$session_username.'Click here to Log Out. ';
}else{
echo '<h3>Welcome Guest,</h3>Please log in to use Connect-A-Bull Marketplace.<br /><br /><form name="login" id="login" action="" method="POST">Username<br/><input name="Username" id="Username" type="text" /><br/>Password<br/><input name="Password" id="Password" type="password" /><br/><input name="Remember" id="Remember" type="checkbox" value="" />Keep me logged in<br/><input type="submit" class="sub-button" value="Log In" /><input type="reset" class="sub-button" value="Register" /><br/> Forgot Password</form>';
}
?>
Thank you for your time.
I don't see any div with id=loginstart in your code. Try changing it to $('#LoginResult').html(data);
UPDATE:
Try adding your <script> just before the closing </body> tag. Also check your error console in your browser for any possible javascript errors.
Related
Hello so I have 2 submit buttons with different names (btn1, btn2) in my html form and what I am trying to do is to submit to another page without refreshing page. So what I wanted to do is if I click btn1 submit it will do something and if I click btn2 it will do another thing. My code in the html page is this
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Percentage</title>
<script type="text/javascript" src="jquery.js"></script>
<script>
$(document).ready(function(){
$('#myForm').on('submit',function(e) {
$.ajax({
url:'update.php',
data:$(this).serialize(),
type:'POST',
success:function(data){
console.log(data);
$("#success").show().fadeOut(5000);
},
error:function(data){
$("#error").show().fadeOut(5000); //===Show Error Message====
}
});
e.preventDefault();
});
});
</script>
</head>
<body>
<form method="POST" id="myForm">
Input Amount: <input type="text" name="txt_amount" required placeholder="Input number"> <br /> <br />
<span id="error" style="display:none; color:#F00">Some Error!Please Fill form Properly </span> <span id="success" style="display:none; color:#0C0">All the records are submitted!</span>
<input type="submit" name="btn1"> <input type="submit" name="btn2">
</form>
</body>
</html>
And the code in my update.php page
<?php
if(isset($_POST['btn1'])) {
//insert query
} else if(isset($_POST['btn2'])) {
//another insert query
}
?>
I actually got it working if I only have 1 submit button and no if(isset()) thing in the update.php page. What can I do to use 2 submits and with issets in another page without refreshing the main page?
$(this).serialize();
The above code statement doesn't include name of the submit button as a key value pair.
So, as people have suggested before me, you should use button instead of submit button. Something like this.
HTML and JS
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Percentage</title>
<script type="text/javascript" src="jquery.js"></script>
<script>
$(document).ready(function(){
$('#btn1, #btn2').on('click',function(e) {
var datastr = $(this).serialize() + "&button_id="+$(this).attr('id');
$.ajax({
url:'update.php',
data:datastr,
type:'POST',
success:function(data){
console.log(data);
$("#success").show().fadeOut(5000);
},
error:function(data){
$("#error").show().fadeOut(5000); //===Show Error Message====
}
});
e.preventDefault();
});
});
</script>
</head>
<body>
<form method="POST" id="myForm" action="update.php">
Input Amount: <input type="text" name="txt_amount" required placeholder="Input number"> <br /> <br />
<span id="error" style="display:none; color:#F00">Some Error!Please Fill form Properly </span> <span id="success" style="display:none; color:#0C0">All the records are submitted!</span>
<button id="btn1">Button1</button><button id="btn2">Button2</button>
</form>
</body>
</html>
AND PHP would be:
<?php
if($_POST['button_id'] == 'btn1') {
//do something
} else if($_POST['button_id'] == 'btn2') {
//do something else;
}
?>
Use this, may useful for you
try
$('#myForm').on('submit',function(e) {
e.preventDefault();
});
OR
<button type="button">
Use on click event on the button and add the value attribute to the submit button, the value of the click button will be pased to the php file
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Percentage</title>
<script type="text/javascript" src="jquery.js"></script>
<script>
$(document).ready(function(){
$('input[type="submit"]').on('click',function(e) {
e.preventDefault();
$.ajax({
url:'update.php',
data:{'txt_amount':$('input[name="txt_amount"]').val(),'btn': $('input[type="submit"]').val()}
type:'POST',
success:function(data){
console.log(data);
$("#success").show().fadeOut(5000);
},
error:function(data){
$("#error").show().fadeOut(5000); //===Show Error Message====
}
});
});
</script>
</head>
<body>
<form method="POST" id="myForm">
Input Amount: <input type="text" name="txt_amount" required placeholder="Input number"> <br /> <br />
<span id="error" style="display:none; color:#F00">Some Error!Please Fill form Properly </span> <span id="success" style="display:none; color:#0C0">All the records are submitted!</span>
<input type="submit" name="btn1" value="btn1"> <input type="submit" name="btn2" value="btn2">
</form>
</body>
</html>
php:
<?php
if($_POST['btn'] == 'btn1') {
//do something
} else if($_POST['btn'] == 'btn2') {
//do something else;
}
?>
I'm making HTML, PHP and Ajax based site for my university class and having some problems that I can't figure out. Can I post my HTML based Registration Form using Ajax post method to my main PHP site? My code looks like this:
index.php
<form id="loginForm" action="login.php" method="POST">
Username: <input type="text" name="username" id="username"/><br/>
Password: <input type="password" name="password" id="password"/><br/>
<button id="submit">Login</button>
<button id="regButton">Register</button>
</form>
<div id="ack"></div>
<div id="regAjax"></div>
<script type="text/javascript" src="Script/jquery-2.0.3.min.js"></script>
<script type="text/javascript" src="Script/scriptAjax.js"></script>
register.html
<html>
<head><title>Registration Form</title></head>
<body>
<form id="regForm" action="process.php" method="POST">
Username: <input type="text" name="username"/><br/>
Password: <input type="password" name="password"/><br/>
First Name: <input type="text" name="fname"/><br/>
Last Name: <input type="text" name="lname"/><br/>
E-mail: <input type="text" name="email"/><br/>
<button id="register">Register</button>
</form>
<div id="rck"></div>
<script type="text/javascript" src="Script/jquery-2.0.3.min.js"></script>
<script type="text/javascript" src="Script/scriptAjax.js"></script>
</body>
</html>
scriptAjax.js
$("#regButton").click( function() {
$.post ???
$("#regButton").submit( function() {
return false;
});
});
So the main purpose of this to make the smoother page and that registration form would appear in <div id="regAjax"></div> place when Register button is clicked, that user could register not being redirected to another page. Is there a way to do that or I'm taking the wrong path now?
The general Idea is that you have to send the form data to a PHP script that will evaluate it and send a response.
$.post( "validate.php", function( data ) {
$( "#regAjax" ).html( data );
});
I recommend you study this page
$.ajax({
method: 'POST',
url: 'validate.php',
data: data,
success: function(result){
$( "#regAjax" ).html( result );
}
});
I just had to update to a newer version of colorbox due to deprecated jQuery.
Previously I had a colorbox linked to the submit button on a form (presenting"thanks for your message!")
Since updating colorbox, this no longer works.
This was the original code that worked with colorbox 1.3, not on colorbox 1.4
function SendMailForm(){
var dataString = $("#form1").serialize();
$.ajax({
type:"POST",
url:"sendmail.php",
data:dataString,
cache:false,
success:function(html){
$("#HiddenBox").show();
$("#HiddenBox").html(html);
$.fn.colorbox({'href':'#HiddenBox', 'open':true, 'inline':true, 'width':'600px', 'height':'200px'});
$(document).bind('cbox_closed', function(){
$("#HiddenBox").hide();
});
}
});
}
Hitting the submit button caused #HiddenBox to show using .show()
Hidden box code is pretty simple colorbox code:
<div id="HiddenBox" style='display:none'>
<span class="colorBox">Thanks for your message</span>
<p>I'll get back to your query as soon as I can!</p>
</div
Can't actually find any JS errors on the page relating to this, but it no longer launches the colorbox!
See real site here and try to fill in the form
The form:
<form id="form1" class="formular" method="post" action="Javascript:SendMailForm();">
<fieldset>
<input data-validation-placeholder="Name" class="validate[required] text-input" type="text" name="reqplaceholder" id="reqplaceholder" placeholder="Name" data-prompt-position="topRight:-79,15" />
<br /><br />
<input data-validation-placeholder="Email" class="validate[required] text-input" type="text" name="reqplaceholder" id="reqplaceholder" placeholder="Email" data-prompt-position="topRight:-79,15" />
<br /><br />
<textarea value="What's on your mind?" data-validation-placeholder="Message" class="validate[required] text-input message" type="text" name="message" id="reqplaceholder" class="message" placeholder="What's on your mind?" data-prompt-position="topRight:-79,15" ></textarea>
<br /><br />
<input class="button" type="submit">
</fieldset>
</form>
Sendmail:
<?php
$name = $_POST['name'] ;
$email = $_POST['email'] ;
$message = $_POST['message'] ;
if(mail( "blah#jamesperrett.co.uk", "Message via JamesPerrett.com",
$message, "From: $email" )):
echo "<div id='contact_thanks' style='padding:10px; background:#fff;height:200px;'>";
echo "<span class='colorBox'>Thanks!</span>";
echo "<p>Thanks for your message, I'll get back to you as soon as I can!</p>";
echo "</div>";
endif;
?>
I'm not sure whether the colorbox that we are talking about are the same, I used this:
http://www.jacklmoore.com/colorbox/
As I can see, it support ajax directly($('.ajax').colorbox()), so I don't understand why you write the code yourself, but it doesn't matter.
However, seems you want the html respond with ajax shown in the color box, and after user close the colorbox, it show hidden content originally in the document. And the following code do that:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="colorbox.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="jquery.colorbox.js"></script>
<script language='javascript'>
function SendMailForm() {
var dataString=$('#form1').serialize();
$.ajax({
type: 'POST',
url: 'sendmail.php',
data: dataString,
cache: false,
success:
function (html) {
$('#HiddenBox').show();
var node=document.createElement('div');
node.innerHTML=html;
document.body.appendChild(node);
id_1.click();
document.body.removeChild(node);
}
});
}
$(document).ready(
function () {
$('.inline').colorbox({ inline: true, width: '50%' });
}
);
</script>
</head>
<body>
<form id='form1' class='formular' method='post' action='javascript:SendMailForm();'>
<fieldset>
<input data-validation-placeholder='Name' class='validate[required] text-input' type='text' name='reqplaceholder' id='reqplaceholder' placeholder='Name' data-prompt-position='topRight:-79,15' />
<br /><br />
<input data-validation-placeholder='Email' class='validate[required] text-input' type='text' name='reqplaceholder' id='reqplaceholder' placeholder='Email' data-prompt-position='topRight:-79,15' />
<br /><br />
<textarea value="What's on your mind?" data-validation-placeholder='Message' class='validate[required] text-input message' type='text' name='message' id='reqplaceholder' class='message' placeholder="What's on your mind?" data-prompt-position='topRight:-79,15' ></textarea>
<br /><br />
<input class='button' type='submit'>
</fieldset>
</form>
<a id='id_1' class='inline' href="#contact_thanks" style='display: none'></a>
<div id='HiddenBox' style='display:none'>
<span class='colorBox'>Thanks for your message</span>
<p>I'll get back to your query as soon as I can!</p>
</div>
</body>
</html>
Note the a tag of id_1 links to the same document contact_thanks which is responded by sendmail.php, I added a node for the responding html and remove after the colorbox is shown.
I've seen some similar questions, but I haven't seen any that specifically speaks to this. I've created a very simple sample, and I feel that it should work, but it doesn't. The point is to see something simple, so that other, similar things are clear.
I feel that this is very 'basic', and it's hard to be much simpler; so, people should be able to get behind it, knowing that it's the ultimate noobie stepping stone:
The HTML and JS:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<script type="javascript"></script>
<script type="text/javascript" src="/javascript/jquery-1.8.2.js">
$(document).ready(function(){
$("submit").click(function(){
var req = $.ajax({
type: 'POST',
url: 'form.php',
data: {
message: $('#message').val(),
author: $('#author').val()
},
timeout: 20000,
beforeSend: function(msg) {
$("#sent").html(msg);
}
});
req.fail(function(xhr, ajaxOptions, thrownError) {
alert("AJAX Failed");
});
req.done(function(res) {
$("#received").html(res);
});
});
});
</script>
</head>
<body>
<div id="sent"></div>
<div id="form">
<form>
Your message: <input type="text" name="message" value="Hi!" /><br />
Your name: <input type="text" name="author" value="Michael" /><br />
<input type="submit" name="submit" value="Submit me!" />
</form>
</div>
<div id="received"></div>
</body>
</html>
And the PHP:
<?php
echo "The file is located at ".$_POST["message"].".<br>";
echo "The file is named ".$_POST["author"].".";
You can use serialize instead of assigning id to the input fields:
<html>
<head>
<script type="javascript"></script>
<script type="text/javascript" src="/javascript/jquery-1.8.2.js">
$(document).ready(function(){
$("#submit").click(function(){
var req = $.ajax({
type: 'POST',
url: 'form.php',
data: $('#frm').serialize(),
timeout: 20000,
beforeSend: function(msg) {
$("#sent").html(msg);
},
success: function(data){
alert('Success!Data was received by php.Message from the php script:'+data.res);
}
});
req.fail(function(xhr, ajaxOptions, thrownError) {
alert("AJAX Failed");
});
req.done(function(res) {
$("#received").html(res);
});
});});
</script>
</head>
<body>
<div id="sent"></div>
<div id="form">
<form id="frm">
Your message: <input type="text" name="message" value="Hi!" /><br />
Your name: <input type="text" name="author" value="Michael" /><br />
<input type="submit" id="submit" value="Submit me!" />
</form>
</div>
<div id="received"></div>
</body>
</html>
PHP SCRIPT:
<?php
if(isset($_POST['message']) && isset($_POST['author']))
{
$arr_to_pass_as_json = array('res'=>'This is your message:'.$_POST['message'].' and your author '.$_POST['author']);
echo json_encode($arr_to_pass_as_json)
}
else
echo json_encode(array('res'=>'Message and Author is required'));
We use json in displaying result from php to javascript. hope this will help.
Check the difference with this:
$(document).ready(function(){
$("submit").click(function(){
var req = $.ajax({
type: 'POST',
url: 'form.php',
data: {
message: $('#message').val(),
author: $('#author').val()
},
timeout: 20000,
beforeSend: function(msg) {
$("#sent").html(data);
}
})
.fail(function(xhr, ajaxOptions, thrownError) {
alert("AJAX Failed");
})
.done(function(res) {
$("#received").html(res);
});
});
});
Check if this works (According to http://api.jquery.com/jQuery.ajax/#jqXHR it should)
since your using
message: $('#message').val(),
author: $('#author').val()
You will need to specify your id's in you input tgs.
<form>
Your message: <input type="text" name="message" value="Hi!" id="message" /><br />
Your name: <input type="text" name="author" value="Michael" id="author" /><br />
<input type="submit" name="submit" value="Submit me!" />
</form>
Your asking to find and html id selectyor, and get the value from it, 'name' is NOT the same as an ID.
Alternatively you could put and id on your html form and use .sezialize(), but simply adding an id is simpler at this step.
http://api.jquery.com/serialize/
I wanted to show textbox content without refreshing,so I used Jquery
I have problem with this part: name:form.name.value what does this exactly do?And why I have problem?when entering it will show nothing
<html>
<head>
<script type="text/javascript" src="./jquery.js"></script>
<script type="text/javascript">
function get(){
$.post('msql.php',{name:form.name.value},
function(output){
$('#mydiv').html(output).show();
}
);
}
</script>
</head>
<body>
<form name="name">
<input type="text" name="name">
<input type="button" name="but" value="Check" onclick="get();">
<div name="mydiv"></div>
</form>
</body>
</html>
msql.php:
<?php
echo $_POST['name'];
?>
try this:
$(document).ready(function() {
$('input[name="but"]').click(function() {
alert("start");
$name = $('input[name="name"]').val();
$.post('msql.php', {
name: $name
}, function(output) {
alert(output);
$('#mydiv').html(output).show();
});
return false;
});
})
html:
<form id="form_name">
<input type="text" name="name">
<input type="button" name="but" value="Check">
</form>
<div id="mydiv"></div>
I think your problem lies in the period (.) just after html.
it should be $('#mydiv').html(output);
Also, you'll be better off using mgraph's solution but remove the period I just told you about.
I don't think jquery understand what form.name.value is unless you provide it with a proper selector like mgraph suggested.