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);
}
}
});
});
});

multiple ajax calls with codeigniter

excuse me sir/ma'am
i'm new to ajax, i'm trying to do multiple ajax call in one function to dislay info after an option in dropdown is selected and it goes into separate field ,something like
a goes into description field, b goes into schedule field
i already got the function for a 1 call but when i'm trying to do 2 it's just doesn't work
here is the code that i made for multiple call
<script>
// multiple ajax calls code that i make
// #paket is the dropdown id
$.when(
$('#paket').unbind('change');
$('#paket').change(function(){
var opt_sel = $('#paket').val();
$.ajax({
url:'bttdev3/tour/s1',
method: "POST",
data: {
sel_op:opt_sel
}
}),
$.ajax({
url:'bttdev3/tour/s2',
method: "POST"
data: {
sel_op:opt_sel
}
});
});
);
.then(function(a,b){
$.('#detail').html(a);
$.('#jadwal').html(b);
});
</script>
here is the previous code that works for 1 data call
<script>
1 call function
(function(){
$('#paket').unbind('change');
$('#paket').change(function(){
var opt_sel = $('#paket').val();
var baseurl = "www.dev3.gatra.com/bttdev3";
$.ajax({
method:"POST",
url: '/bttdev3/tour/s1',
// url: "/bttdev3/tour/" + s1,
data:{
sel_op:opt_sel
}
}).done(function(a){
$('#detail').html(a);
}).fail(function(){
alert("gagal memanggil data.");
});
});
});
</script>
any help would be appreciated

try this one
$(document).on('change', '#packet', function(){
_ajax('bttdev3/tour/s1', 'POST', {sel_op: $(this).val()}, function(res){
$('#detail').html(res);
});
_ajax('bttdev3/tour/s2', 'POST', {sel_op: $(this).val()}, function(res){
$('#jadwal').html(res);
});
});
function _ajax(url, method, data, callback){
$.ajax({
method,
url,
data
}).done(function(a){
if(typeof(callback) != 'undefined'){
callback (a);
}
}).fail(function(){
alert("gagal memanggil data.");
});
}

after submit clear textbox

I'm inserting data into a table using Ajax. I'm using ajax so my page wouldn't get refresh. Here is my Ajax code for calling the inserting page:
<script type="text/javascript">
var i = jQuery.noConflict();
i(document).ready(function(){
i('#myForm').on('submit',function(e) {
i.ajax({
url:'insert.php',
data:$(this).serialize(),
type:'POST'
});
e.preventDefault();
});
});
</script>
Now every time i write in the textbox and hit the submit button the data gets entered but it remains in textbox and i have to press the delete button to erase it.
Question: how can I make so my data gets cleared when I press the submit button?

You can reset the form in the ajax success handler
var i = jQuery.noConflict();
jQuery(function ($) {
$('#myForm').on('submit', function (e) {
$.ajax({
url: 'insert.php',
data: $(this).serialize(),
type: 'POST',
context: this
}).done(function () {
this.reset();
});
e.preventDefault();
});
});

document.getElementById('myForm').reset(); // In Javascript
$("#myform")[0].reset(); // In jQuery Fashion

You can reset form fields on the completion as suggested by arun or on success as below
var i = jQuery.noConflict();
jQuery(function ($) {
$('#myForm').on('submit', function (e) {
$.ajax({
url: 'insert.php',
data: $(this).serialize(),
type: 'POST',
success:function(data) {
$('#myForm')[0].reset();
}
});
e.preventDefault();
Hope it helps

Javascript only working when placed below HTML

I couldn't find a solution for the following problem I'm having. I'm using some javascript code to make my (live) search work (via ajax). The problem is that the Javascript only works when I place it below the HTML:
<form action="filter.php" name="filter" method="get" id="filter">
<input type="text" id="search_bar" name="s" placeholder="Type hier je zoekterm..." />
</form>
<ul id="result"></ul>
Javascript
$("#filter").submit(function(event) {
event.preventDefault();
$("#result").html('');
var values = $(this).serialize();
$.ajax({
url: "tracks_content.php",
type: "get",
data: values,
success: function(data){
$('#result').html(data);
},
});
});
$(this).mouseup(function() {
document.getElementById('result').style.display='none';
});
$("#result").mouseup(function(){
return false;
});
$("#filter").bind('input',(function(event){
var query = document.getElementById('search_bar').value;
if(query!=""){
$("#filter").submit();
document.getElementById('result').style.display='block';
}
else{
$('#result').html('');
document.getElementById('result').style.display='none';
}
}));
How can I make it work when putting the Javascript in front of the HTML?

This is because you are referring to HTML that doesn't exist yet when the JavaScript is on top.
Wrap your code in $( document ).ready(). Thi smakes the browser wait until the DOM is loaded before firing the JavScript.
$( document ).ready(function() {
$("#filter").submit(function(event) {
event.preventDefault();
$("#result").html('');
var values = $(this).serialize();
$.ajax({
url: "tracks_content.php",
type: "get",
data: values,
success: function(data){
$('#result').html(data);
},
});
});
$(this).mouseup(function() {
document.getElementById('result').style.display='none';
});
$("#result").mouseup(function(){
return false;
});
$("#filter").bind('input',(function(event){
var query = document.getElementById('search_bar').value;
if(query!=""){
$("#filter").submit();
document.getElementById('result').style.display='block';
}
else{
$('#result').html('');
document.getElementById('result').style.display='none';
}
}));
});
FYI, why are you uisng document.getElementById() when you have jQuery available to you and are already using it?

If you put that before the HTML, then you are trying to add a submit event to a form which doesn't exist at the time the JavaScript runs.
Wrap the script in a function, then use that function as an event handler for the ready or load event.
Passing a function (instead of a selector, DOM element or strong of HTML) as the argument to jQuery will bind as the ready handler.
jQuery(bind_form_event_handler);
function bind_form_event_handler() {
$("#filter").submit(function(event) {
// etc etc
}

Change you javascript to this
wrap with $(function(){}
like this
$(function(){
$("#filter").submit(function(event) {
event.preventDefault();
$("#result").html('');
var values = $(this).serialize();
$.ajax({
url: "tracks_content.php",
type: "get",
data: values,
success: function(data){
$('#result').html(data);
},
});
});
$(this).mouseup(function() {
document.getElementById('result').style.display='none';
});
$("#result").mouseup(function(){
return false;
});
$("#filter").bind('input',(function(event){
var query = document.getElementById('search_bar').value;
if(query!=""){
$("#filter").submit();
document.getElementById('result').style.display='block';
}
else{
$('#result').html('');
document.getElementById('result').style.display='none';
}
}));
})

Getting a success info after submitting form via $.ajax in jquery

I have a few forms on my single page and I'm submitting them by this method:
$(function() {
$(".button").click(function() {
var upform = $(this).closest('.upform');
var txt = $(this).prev(".tekst").val();
var dataString = 'tekst='+ txtr;
$.ajax({
type: "POST",
url: "http://url-to-submit.com/upload/baza",
data: dataString,
success: function() {
upform.html("<div class='message'></div>");
$('.message').html("<h2>FORM SUBMITTED</h2>")
.append("<p>THANKS!!</p>")
.hide()
.fadeIn(1500, function() {
$('.message').append("<img src='http://my-images.com/i/check.png' />");
});
}
});
return false;
});
});
As you can see, after submit a form, message div appears instead of submitted form.
It works perfectly, when I submit only one form - then it changes to my message div, but when I submit second, and next and next - every time ALL of my already submitted form's messages refreshing.
It looks bad. I want to operate only on actually submitting form. How to fix it?

Well you're setting the message of every .message div by using $('.message').html(). Try this:
upform.find('.message').html(...)

Hard to tell without seeing how your HTML looks but i'm guessing it's this bit,
$('.message')
Should be something like,
$('.message', upForm).

First you have to find out the message div (upform.find('.message')) and than add any html to it. i think your code should be
$(function() {
$(".button").click(function() {
var upform = $(this).closest('.upform');
var txt = $(this).prev(".tekst").val();
var dataString = 'tekst='+ txtr;
$.ajax({
type: "POST",
url: "http://url-to-submit.com/upload/baza",
data: dataString,
success: function() {
upform.html("<div class='message'></div>");
upform.find('.message').html("<h2>FORM SUBMITTED</h2>")
.append("<p>THANKS!!</p>")
.hide()
.fadeIn(1500, function() {
upform.find('.message').append("<img src='http://my-images.com/i/check.png' />");
});
}
});
return false;
});
});

Another way without editing more in your current code just add few lines.
var msgbox = $("<div class='message'></div>");
upform.html(msgbox);
msgbox.html("<h2>FORM SUBMITTED</h2>")
.append("<p>THANKS!!</p>")
.hide()
.fadeIn(1500, function() {
$(this).append("<img src='http://my-images.com/i/check.png' />");
});