We Keep Coding

Page is getting Submit Without Refresh Via Otp?

I got this website when I fill the information and try to send the OTP page reload
Here's the website:
https://tunisia.blsspainvisa.com/english/book_appointment.php
After you fill the information and click on (Request verification code) and you will know what I mean
What I tried is:
$(function () {
$('#tunisiaThird').on('submit', function (e) {
e.preventDefault();
$.ajax({
type: 'post',
url: 'https://tunisia.blsspainvisa.com/book_appointment.php',
data: $('#tunisiaThird').serialize(),
success: function () {
}
});
});
});
I'm only a client, so I'm using Tampermonkey to inject.

You need to read more about jquery ajax post or get method here:
https://api.jquery.com/jQuery.post/
And there are tons of questions here if you search you will find tons of examples
Here is a complete example, which is getting error messages from php part and displaying on html form.
Like this: in php : $error .= 'an error happend'; and ajax $('#result').html(data.error);
to display in html.
<div id="result"></div>
$(document).ready(function(){
$('#tunisiaThird').submit(function(event){
event.preventDefault();
var formValues = $(this).serialize();
$.ajax({
url:"book_appointment.php",
method:"POST",
data:formValues,
dataType:"JSON",
success:function(data){
if(data.error === 'ok'){
$('#result').html('Successfuly');
$('#tunisiaThird')[0].reset();
setTimeout(function() {
window.location = 'index.php';
}, 1000);
} else {
$('#result').html(data.error);
}
}
});
});
});

.ajaxComplete not working

Hi i currently having a problem with firing .ajaxComplete function, whereby it should be working on a demo site. I'm refer to this function from here http://www.bitrepository.com/a-simple-ajax-username-availability-checker.html
Here are my code :
<SCRIPT type="text/javascript">
<!--
/*
Credits: Bit Repository
Source: http://www.bitrepository.com/web-programming/ajax/username-checker.html
*/
pic1 = new Image(16, 16);
pic1.src = "loader.gif";
$(document).ready(function(){
$("#userID").change(function() {
var usr = $("#userID").val();
if(usr.length >= 4)
{
$("#status").html('<img src="loader.gif" align="absmiddle"> Checking availability...');
$.ajax({
type: "POST",
url: "check.php",
data: "userID="+ usr,
success: function(msg){
$("#status").ajaxComplete(function(event, request, settings){
if(msg == "OK")
{
$("#userID").removeClass('object_error'); // if necessary
$("#userID").addClass("object_ok");
$(this).html(' <img src="tick.gif" align="absmiddle">');
}
else
{
$("#userID").removeClass('object_ok'); // if necessary
$("#userID").addClass("object_error");
$(this).html(msg);
}
});
}
});
}
else
{
$("#status").html('<font color="red">The username should have at least <strong>4</strong> characters.</font>');
$("#userID").removeClass('object_ok'); // if necessary
$("#userID").addClass("object_error");
}
});
});
//-->
</SCRIPT>
I had try to alert the msg , the check.php able to return back the msg value, but it stop on the .ajaxComplete() there where it does not trigger the function after the .ajaxComplete(). Please guide me through this. Thanks

From the document
As of jQuery 1.8, the .ajaxComplete() method should only be attached
to document.
So
$(document).ajaxComplete(function(event, request, settings){
});
But in your code, there is no need to use ajaxComplete, the success callback will be called only when the ajax call is finished, so you can just check the value of msg directly in it.
$.ajax({
type: "POST",
url: "check.php",
data: "userID=" + usr,
success: function (msg) {
if (msg == "OK") {
$("#userID").removeClass('object_error'); // if necessary
$("#userID").addClass("object_ok");
$(this).html(' <img src="tick.gif" align="absmiddle">');
} else {
$("#userID").removeClass('object_ok'); // if necessary
$("#userID").addClass("object_error");
$(this).html(msg);
}
}
});

Take data from a div and write it to text file

I am trying to take data from my div an add it to php file:
my javascript is:
$(document).ready(function(){
$('#save').on('submit',function(e) {
var bufferId = document.getElementById('data2save');
$.ajax({
url:'saver.php',
data:{id : bufferId},
type:'POST',
success:function(data){
console.log(data);
alert("ok"); //=== Show Success Message==
},
error:function(data){
alert("not ok"); //===Show Error Message====
}
});
e.preventDefault(); //=== To Avoid Page Refresh and Fire the Event "Click"===
});
});
my html part is:
<input type="button" value="save" id="save">
<div id="data2save">
Data to be added.
</div>
and my saver.php file is:
<?php
$data = $_POST['id'];
if (($fp = fopen("test.txt", "w"))){
fwrite($fp,$data);
fclose($fp);
echo "ok";
}
?>
Can someone please point out the issue?

Your have a wrong selector, replace document.getElementById('info1'); with var bufferId = $("#data2save").html();
$(document).ready(function(){
$('#save').on('submit',function(e) {
var bufferId = $("#data2save").html();
$.ajax({
url:'saver.php',
data:{id : bufferId},
type:'POST',
success:function(data){
console.log(data);
alert("ok"); //=== Show Success Message==
},
error:function(data){
alert("not ok"); //===Show Error Message====
}
});
e.preventDefault(); //=== To Avoid Page Refresh and Fire the Event "Click"===
});
});

As document.getElementById('data2save') is an DOM element. You cannot sent it directly as data in the AJAX request.
Replace it with document.getElementById('data2save').value and then let us know if it works.
The new javascript would be like this
(document).ready(function(){
$('#save').on('submit',function(e) {
var bufferId = document.getElementById('data2save').value;
$.ajax({
url:'saver.php',
data:{id : bufferId},
type:'POST',
success:function(data){
console.log(data);
alert("ok"); //=== Show Success Message==
},
error:function(data){
alert("not ok"); //===Show Error Message====
}
});
e.preventDefault(); //=== To Avoid Page Refresh and Fire the Event "Click"===
});
});

if and else not working, always showing the same window

I have a problem with my html webpage, I am trying to use a code to show determinate window's login, the problem is no matter what statement(if-else, if-if, or other) I use...always display the same window (mean always display the window I coded on deslogeado.php, I can't make display the window coded on logeado.php).
Some details: msg is an string which can bring the word 'cero'(here will display a window to user can login) or other word (here will display a window where user is already logged).
<script type="text/javascript">
$(document).ready(function()
{
var flag = 'cero';
var msg = $.ajax({type: "GET", url: "getSesion.php", async: false}).responseText;
console.log(msg);
if(msg === flag)
$('#apDiv7').load('deslogeado.php');
if(msg !== flag)
$('#apDiv7').load('logeado.php');
}
);
</script>
or
<script type="text/javascript">
$(document).ready(function()
{
var flag = 'cero';
var msg = $.ajax({type: "GET", url: "getSesion.php", async: false}).responseText;
tipo=typeof msg;
console.log(msg,flag);
if(msg == flag)
{
$('#apDiv7').load('deslogeado.php');
}else{
$('#apDiv7').load('logeado.php');
}
}
);
</script>
or
<script type="text/javascript">
$(document).ready(function()
{
$.ajax({
type: "GET",
url: "getSesion.php",
success: function(data)
{
var flag='cero';
console.log(data,flag);
if(data === flag)
{
$('#apDiv7').load('deslogeado.php');
}else{
$('#apDiv7').load('logeado.php');
}
}
})
}
);
</script>
or
<script type="text/javascript">
$(document).ready(function()
{
$.ajax({ url: "getSesion.php", dataType: "json" }).done(function(data)
{
if(data.message == flag)
{
$('#apDiv7').load('deslogeado.php');
}else{
$('#apDiv7').load('logeado.php');
}
});
});
</script>
Tried with 1,2 and 3 equal on if, I don't know if an html attribute problem or what. I really hope someone can help me! My regards!

When sending data via ajax in the future, consider formatting it with JSON, which will alleviate the ambiguity of free text (with possible spaces before/after).
You are using AJAX which is asynchronous. You should use the "success" callback, or the done() method of the Deferred Ajax call.
$.ajax({ url: "getSesion.php", dataType: "json" }).done(function(data) {
if(data.message == flag) {
$('#apDiv7').load('deslogeado.php');
}else{
$('#apDiv7').load('logeado.php');
}
});
Your php script should return a json formatted object like:
{ "message":"cero" }

Limiting search results Javascript

I was wondering how to limit the search result in the Javascript file, my JS file details as following:
/* JS File */
<script>
// Start Ready
$(document).ready(function() {
// Icon Click Focus
$('div.icon').click(function(){
$('input#search').focus();
});
// Live Search
// On Search Submit and Get Results
function search() {
var query_value = $('input#search').val();
$('b#search-string').html(query_value);
if(query_value !== ''){
$.ajax({
type: "POST",
url: "search.php",
data: { query: query_value },
cache: false,
success: function(html){
$("ul#results").html(html);
}
});
}return false;
}
$("input#search").live("keyup", function(e) {
// Set Timeout
clearTimeout($.data(this, 'timer'));
// Set Search String
var search_string = $(this).val();
// Do Search
if (search_string == '') {
$("ul#results").fadeOut();
$('h4#results-text').fadeOut();
}else{
$("ul#results").fadeIn();
$('h4#results-text').fadeIn();
$(this).data('timer', setTimeout(search, 100));
};
});
});
</script
I just need to add similar to following code to be able to load a loading images before the result and limit the results into five or whatever, and if possible add load more later.
<script>
function loadSearch(query) {
document.body.style.overflow='hidden';
if (typeof xhr != "undefined") {
xhr.abort();
clearTimeout(timeout);
}
if (query.length >= 3) {
timeout = setTimeout(function () {
$('#moreResults').slideDown(300);
$('#search_results').slideDown(500).html('<br /><p align="center"><img src="http://www.tektontools.com/images/loading.gif"></p>');
xhr = $.ajax({
url: 'http://www.tektontools.com/search_results.inc.php?query='+encodeURIComponent(query),
success: function(data) {
$("#search_results").html(data);
}
});
}, 500);
} else {
unloadSearch();
}
}
function unloadSearch() {
document.body.style.overflow='';
$('#search_results').delay(100).slideUp(300);
$('#moreResults').delay(100).slideUp(300);
}
</script>
I have got the 2nd code from another template page, and I am just failing to adjust it to fit my search template (1st code), I'd appreciate it if someone could help me to adjust it, thanks a lot.

If you want to do this on the javascript side, you can use slice.
$.ajax({
type: "POST",
url: "search.php",
data: { query: query_value },
cache: false,
success: function(html){
$("ul#results").html(html.slice(0, 5);
}
});
I would personally suggest that you do the limiting of rows on the server side to minimize the amount of data you transfer between the client and the server.