i have been table site for some time now and i implemented a searching system, but i want it to be real time search so whenever you press a button it will refresh the site. I have little coding experiance so ill ask for some help here.
Here is my ajax code:
function searchDomains() {
$.ajax({
type: "POST",
url: "Ajax/searchDomain.action.php",
data: {
domain: $('input[name="domain"]').val(),
width: $(window).width()
},
success: function(data) {
$("#container_domains").html(data);
}
});
}
You are almost right, but you need to attach this function to the keyup event of the <input /> and make it unobtrusive too:
<input type="text" name="search" id="search" />
<div id="container_domains"></div>
And in the jQuery:
$(function () {
$("#search").keyup(function () {
$.ajax({
type: "POST",
url: "Ajax/searchDomain.action.php",
data: {
domain: $('input[name="domain"]').val(),
width: $(window).width()
},
success: function(data) {
$("#container_domains").html(data).show();
}
});
});
});
Related
I'm sorry everyone.. :( my bad I actually didn't include the jquery library...
Sorry for that :3 i'm just very exhausted right now.
can someone tell me what's wrong and/or lack of my codes? returning false is not working.... is there any conflict in the codes below?...
html
<form class="login-form" method="POST" action="loginauthenticate.php">
<fieldset>
<h3>WELCOME!</h3>
<div id="get_content"></div>
<p>
<input class="username" type="text" name="username" placeholder="Username" autocomplete="off" required/>
<br>
<input class="password" type="password" name="password" placeholder="Password" required/>
<br>
</p>
<input id="register" class="login-button" type="submit" value="Log In" />
</fieldset>
</form>
<footer>
<P>© 2016 ACT Students,Thesis</P>
</footer>
js
<script type="text/javascript">
$(document).ready(function() {
$('form').submit(function() {
$.ajax({
data: $(this).serialize(),
type: $(this).attr('method'),
url: $(this).attr('action'),
success: function(data) {
$('#get_content').html(data);
}
});
return false;
});
});
</script>
This works for preventing default and Ajax also fires. Try it again.
<script type="text/javascript">
$(document).ready(function() {
$('form').submit(function() {
$.ajax({
data: $(this).serialize(),
type: $(this).attr('method'),
url: $(this).attr('action'),
success: function(data) {
$('#get_content').html(data);
}
});
return false;
});
});
</script>
You need to use event.preventDefault() and add event variable in submit(function(event). The event parameter comes from the event binding function. This is the standart method that stops the default action of an element from happening. In oter words if this method is called, the default action of the event will not be triggered.
return false; does 3 separate things when you call it :
1.event.preventDefault(); – It stops the browsers default behaviour.
2.event.stopPropagation(); – It prevents the event from propagating (or “bubbling up”) the DOM.
3.Stops callback execution and returns immediately when called.
preventDefault(); does one thing: It stops the browsers default behaviour.
So when to use them? Simply it depends on what you want to accomplish. Use preventDefault(); if you want to “just” prevent the default browser behaviour. Use return false; when you want to prevent the default browser behaviour and prevent the event from propagating the DOM. In most situations where you would use return false; what you really want is preventDefault().
<script type="text/javascript">
$(document).ready(function() {
$('form').submit(function(event) {
event.preventDefault();
$.ajax({
data: $(this).serialize(),
type: $(this).attr('method'),
url: $(this).attr('action'),
success: function(data) {
$('#get_content').html(data);
}
});
});
});
</script>
try to put return false before ajax work
$('form').submit(function() {
return false;
$.ajax({
data: $(this).serialize(),
type: $(this).attr('method'),
url: $(this).attr('action'),
success: function(data) {
$('#get_content').html(data);
}
});
});
Been looking at some tutorials, since I'm not quite sure how this works (which is the reason to why I'm here: my script is not working as it should). Anyway, what I'm trying to do is to insert data into my database using a PHP file called shoutboxform.php BUT since I plan to use it as some sort of a chat/shoutbox, I don't want it to reload the page when it submits the form.
jQuery:
$(document).ready(function() {
$(document).on('submit', 'form#shoutboxform', function () {
$.ajax({
type: 'POST',
url: 'shoutboxform.php',
data: form.serialize(),
dataType:'html',
success: function(data) {alert('yes');},
error: function(data) {
alert('no');
}
});
return false;
});
});
PHP:
<?php
require_once("core/global.php");
if(isset($_POST["subsbox"])) {
$sboxmsg = $kunaiDB->real_escape_string($_POST["shtbox_msg"]);
if(!empty($sboxmsg)) {
$addmsg = $kunaiDB->query("INSERT INTO kunai_shoutbox (poster, message, date) VALUES('".$_SESSION['username']."', '".$sboxmsg."'. '".date('Y-m-d H:i:s')."')");
}
}
And HTML:
<form method="post" id="shoutboxform" action="">
<input type="text" class="as-input" style="width: 100%;margin-bottom:-10px;" id="shbox_field" name="shtbox_msg" placeholder="Insert a message here..." maxlength="155">
<input type="submit" name="subsbox" id="shbox_button" value="Post">
</form>
When I submit anything, it just reloads the page and nothing is added to the database.
Prevent the default submit behavior
$(document).on('submit', 'form#shoutboxform', function(e) {
e.preventDefault();
$.ajax({
type: 'POST',
url: 'shoutboxform.php',
data: $(this).serialize(),
dataType: 'html',
success: function(data) {
alert('yes');
},
error: function(data) {
alert('no');
}
});
return false;
});
Use the following structure:
$('form#shoutboxform').on('submit', function(e) {
e.preventDefault();
// your ajax
}
Or https://api.jquery.com/submit/ :
$("form#shoutboxform").submit(function(e) {
e.preventDefault();
// your ajax
});
I am working on a login form that gets loaded inside a div (parent of .messageboxcontent) with .load on a button press. It all works till the 3rd time I press submit where the div disappears again (I guess by reload of the page and the div CSS is hidden). The URL has the $_POST data added after the 3rd submit (?username=<whatever_I_Fill_In_As_3rd>).
<div class="messageboxcontent">
<form id="ajaxform">
<table>
<tr>
<td>Gebruikersnaam: </td><td><input type="text" name="username" /></td><td>
</tr>
</table>
<input type="submit" value="Registreer" id="submit" />
</form>
</div>
<script>
$('form').on('submit', function( event )
{
var dataString = $(this).serialize();
event.stopPropagation();
//event.preventDefault();
$.ajax(
{
type: "POST",
url: "register.php",
data: dataString,
success: function(response)
{
$('.messageboxcontent').html(response);//FIXED by changing .messageboxcontent to parent.
}
});
return false;
});
</script>
I tried different kind of approaches like:
$('form').submit(function(event) {
//..
}
//
$('#ajaxform').submit(function(event) {
//..
}
//
$(document).ready(function()
{
$("#ajaxform").on("submit", function( event )
{
var dataString = $(this).serialize();
//event.stopPropagation();
event.preventDefault();
$.ajax(
{
type: "POST",
url: "register.php",
data: dataString,
success: function(response)
{
$("div.messageboxcontent").html(response);
}
});
return false; //with and without this.
});
});
Be consistent with quotes. Also close your div (<div class="messageboxcontent"></div>)
Try this:
$(document).ready(function(){
$("#ajaxform").on("submit", function( event ){
var dataString = $(this).serialize();
event.preventDefault();
$.ajax({
type: "POST",
url: "register.php",
data: dataString,
success: function(response)
{
$("div.messageboxcontent").html(response);
}
});
return false;
});
});
Hope that helps.
return false; or event.preventDefault(); inside your ajax function would stop the page from reloading.
Secondly, jQuery works with selector methods via class or id - so, in your case, you will want to use $('#ajaxform').
Lastly, the possible reason why you are facing with unexpected result like after 3rd time is because your form is wrapped inside a div that you want to manipulate the result. So, try rewrapping your DIV element to this: <div class="messageboxcontent"></div> and have your <form> stand on its own separately from messageboxcontent div.
Been asking a lot of jquery questions lately, I'm trying my best to learn a lot about it.
Anyway, I am sending an Ajax HTTP request to a PHP page in order to make a login form without requiring a page refresh. Now since it may take some time to connect the database and get the login information etc..
Now I do have loading as a .html but how can I hide the loading data once data has loaded?
Tried to use a few functions but didn't seem to work.
Thanks so far, this site has helped me a lot through the learning process.
Here's the JavaScript:
$(document).ready(function() {
// Make a function that returns the data, then call it whenever you
// need the current values
function getData() {
return {
user_login: $('#user_login').val(),
pass_login: $('#pass_login').val()
}
}
function loading(e) {
$('#content').html('Loading Data');
}
function check(e) {
e.preventDefault();
$.ajax({
url: 'ajax/check.php',
type: 'post',
data: getData(), // get current values
success: function (data) {
$('#content').hide('slow');
alert(9);
}
});
}
// Don't repeat so much; use the same function for both handlers
$('#field').keyup(function(e) {
if (e.keyCode == 13) {
var username = $('#user_login').val();
loading(e);
check(e);
}
});
$('#submit').click(function(e) {
if (e.keyCode != 13) {
loading(e);
check(e);
}
});
});
Here is the HTML:
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="js/login.js"></script>
<div id="content"> Loading...</div>
<div id="field">
<input type='text' name='user_login' id='user_login' placeholder='eg: Mark#gmail.com'> <br>
<input type='password' name='pass_login' id='pass_login'> <br>
<input type="submit" name="submit" id="submit" value="Login">
</div>
function check(){
$.ajax({
url: 'ajax/check.php',
type: 'post',
error: function(){
alert('An error has occured.');
},
beforeSend: function(){
$('#content').show('slow').html('Loading');
//loading(e);
},
data: {user_login: $('#user_login').val(),pass_login: $('#pass_login').val()}, // get current values
success: function (data) {
$('#content').hide('slow');
alert(9);
}
});
}
$('#submit').click(function(){
check();
});
$('#field, #field input').keyup(function(e){
var username = $('#user_login').val();
if (e.keyCode == 13) {
check();
}
});
Markup
<div id="field">
<input type='text' name='user_login' id='user_login' placeholder='eg:Mark#gmail.com'> <br>
<input type='password' name='pass_login' id='pass_login'> <br>
<input type="button" name="submit" id="submit" value="Login">
</div>
Good luck!!!
First of all, i'm not sure if your code will return a success. This code will help you find out if the response is not successfully. If you get a browser alert. It means you have a server side error. Its either the url path is wrong or your server response statuscode is 500 (Internal error).
$.ajax({
url: 'ajax/check.php',
type: 'post',
error: function(){
alert('An error has occured.');
},
beforeSend: function(){
$('#content').show('slow').html('Loading');
//loading(e);
},
data: getData(), // get current values
success: function (data) {
$('#content').hide('slow');
alert(9);
}
});
Refactoring your code entirely will look like this. Choose first or second:
$.ajax({
url: 'ajax/check.php',
type: 'post',
error: function(){
alert('An error has occured.');
},
beforeSend: function(){
$('#content').show('slow').html('Loading');
//loading(e);
},
data: {user_login: $('#user_login').val(),pass_login: $('#pass_login').val()}, // get current values
success: function (data) {
$('#content').hide('slow');
alert(9);
}
});
I'm trying to use the POST method in jQuery to make a data request. So this is the code in the html page:
<form>
Title : <input type="text" size="40" name="title"/>
<input type="button" onclick="headingSearch(this.form)" value="Submit"/><br /><br />
</form>
<script type="text/javascript">
function headingSearch(f)
{
var title=f.title.value;
$.ajax({
type: "POST",
url: "edit.php",
data: {title:title} ,
success: function(data) {
$('.center').html(data);
}
});
}
</script>
And this is the php code on the server :
<?php
$title = $_POST['title'];
if($title != "")
{
echo $title;
}
?>
The POST request is not made at all and I have no idea why. The files are in the same folder in the wamp www folder so at least the url isn't wrong.
You need to use data: {title: title} to POST it correctly.
In the PHP code you need to echo the value instead of returning it.
Check whether title has any value or not. If not, then retrive the value using Id.
<form>
Title : <input type="text" id="title" size="40" name="title" value = ''/>
<input type="button" onclick="headingSearch(this.form)" value="Submit"/><br /><br />
</form>
<script type="text/javascript">
function headingSearch(f)
{
var title=jQuery('#title').val();
$.ajax({
type: "POST",
url: "edit.php",
data: {title:title} ,
success: function(data) {
$('.center').html(data);
}
});
}
</script>
Try this code.
In php code, use echo instead of return. Only then, javascript data will have its value.
try this
$(document).on("submit", "#form-data", function(e){
e.preventDefault()
$.ajax({
url: "edit.php",
method: "POST",
data: new FormData(this),
contentType: false,
processData: false,
success: function(data){
$('.center').html(data);
}
})
})
in the form the button needs to be type="submit"
Id advice you to use a bit simplier method -
$.post('edit.php', {title: $('input[name="title"]').val() }, function(resp){
alert(resp);
});
try this one, I just feels its syntax is simplier than the $.ajax's one...
function signIn()
{
var Username = document.getElementById("Username").value;
var Password = document.getElementById("Password").value;
$.ajax({
type: 'POST',
url: "auth_loginCode.jsp",
data: {Username: Username, Password: Password},
success: function (data) {
alert(data.trim());
window.location.reload();
}
});
}
contentType: 'application/x-www-form-urlencoded'