I want to display the part which comes with the AJAX code in a new or blank page, without getting the requested url under the "old" html code on the same page.
d$(document).ready(function() {
$("#bestello").submit(function() {
if($("#nn").val() == "" || $("#vn").val() == "" || $("#strt").val() == ""){
$("#response").html("Bitte füllen Sie alle Felder aus!");
} else {
$.ajax({
type: "POST",
url: "test.php",
data: "nn=" + $("#nn").val() + "&vn=" + $("#vn").val() + "&strt=" + $("#strt").val(),
success: function(msg)
{
$("#response").html(msg);
}
});
}
return false;
});
});
Everything after the else or $.ajax({ should be displayed in a blank/new page.
How can I solve this problem?
You are looking for popup functions.
Place the following code inside your success function
var w = window.open('', '', 'width=400,height=400,resizeable,scrollbars');
w.document.write(msg);
w.document.close(); // needed for chrome and safari
Rather than submitting the form with ajax, allow the form to be submitted using its native functionality. Add the attributes target='_blank' action='test.php' method='post' to the form so that it will submit to test.php using post and open in a new tab/window.
You can still use javascript to validate the form. Your code would look like this:
$(document).ready(function() {
$("#bestello").submit(function() {
if($("#nn").val() == "" || $("#vn").val() == "" || $("#strt").val() == ""){
$("#response").html("Bitte füllen Sie alle Felder aus!");
return false;
}
return true;
});
});
This will validate the form with javascript and only allow it to submit if it passes validation. (As a side note, you should make sure that you do some server side validation as well).
Related
Recaptcha code always empty on modal...it is working without modal...i am using recaptcha v.3...
modal footer for recaptcha
in form area recaptcha field is here...
<input type="hidden" name="recaptcha_Cevap" id="recaptchaCevabi">
i have posting my form with thi ajax codes and my recaptcha reponse too...
$(document).ready(function(){
$("#submit1").click(function(){
var namederfirma = $('#namederfirma').val();
var recaptchaCevabi = $('#recaptchaCevabi').val();
var dataString = 'namederfirma='+ namederfirma + '&recaptchaCevabi='+ recaptchaCevabi;
if( namederfirma== "" || recaptchaCevabi == "" )
{
alert("Bitte fülle alle Felder aus!");
}
else
{
$.ajax({
type: "POST",
url: "form.php",
data: dataString,
cache: false,
success: function(result){
alert(innerHTML=result);
$('#terminform')[0].reset();
}
});
}
return false;
});
});
And Recaptcha site key is here
grecaptcha.ready(function() {
grecaptcha.execute('6Lez4-EZAAAAAOg5xNHXhd3erQzFnDtMys8tTVcJ', {action: 'action_name'})
.then(function(token) {
var recaptchaCevabi = document.getElementById('recaptchaCevabi');
recaptchaCevabi.value = token;
});
});
I don't understand that 'Recaptcha always post empty',
If without modal is fine ,maybe you hava to check the step 'adding modal'.
Could you describe the change.
Success to get the token?
The hidden input field 'recaptchaCevabi' has value when you set it.
P.S. Maybe you have to hidden the site key.
So basically I have this interest slider plugin that calculates the repayments on a loan over a certain period of time - https://loancalc.000webhostapp.com/
But the problem I am having is submitting the form without reloading the page, currently you enter your name and email.
I have included this ajax script on line 1146 of slider.js but the slider continues to reload the page when submitting the form.
I am told it could be because i'm not enqueuing the script (for wordpress) properly.
jQuery('.qis-register').on('submit', 'input', function(){
event.preventDefault();
var name = $("input#yourname").val();
var email = $("input#youremail").val();
if (name == ""){
$("input#yourname").focus;
return false;
}
else if (email == ""){
$("input#youremail").focus;
return false;
}
else{
jQuery.ajax({
type: "POST",
url: "quick-interest-slider.php",
data: {
name:name,
email:email,
qissubmit:$(".qissubmit").val(),
qisapply:$(".qisapply").val(),
part2submit:$(".part2submit").val(),
},
done: function(msg){
console.log(msg);
}
});
}});
The full code is here (slider.js, quick-interest-slider.php, register.php) - https://github.com/Curnow93/quick-interest-slider/tree/master/quick-interest-slider
There's no submit event on the input. It should be on the form. Also, you need to pass the event to the callback function.
jQuery('.qis_form').on('submit', function(event) {
Also your selector doesn't select anything. I have updated it using the right selector.
I am working on a project where i have an issue with the commenting function i've made. Whenever i comment and use special characters the console displays this error: syntax error, unrecognized expression. Furthermore the request goes through and my backend (PHP) inserts the data to the DB but i then have to refresh to get the updated version of the post with that new comment. I can't figure out why even after a couple of searches here on stack and i could really use a new pair of eyes on the code.
I figure that the backend isn't the issue which is why it's left out of this post. Furthermore the form just contains a text input and a submit button. It might be important to mention that i use jQuery v3.3.1.
Finally when the form is submitted an ajax call gets triggered. Here it is:
var newComment;
$(document).on("submit", "form[data-comment]", function(e){
e.preventDefault();
var where = $(this);
var updateThis = $(where).parent().parent();
var data = $(where).attr("data-comment").split(",");
var comment = $(where).find("input[name='commenter']").val().toString();// <= this might be the issue?
if (data[0] == 1){
if (data[1] != "" && data[2] != "" && data[3] != ""){
//insert comment via ajax and return post and insert post
if (newComment){ <= prevent firing until newComment = false
newComment.abort();
return false;
}
$(where).find("input[type='submit']").prop("disabled", true);
$(where).find("input[type='submit']").val("commenting...");
newComment = $.ajax({
url: "mypage/core/AjaxRequests.php", <= call to php handler
type: "POST",
data: { type: "15", data: data, comment: comment }
});
$(comment).val("");
newComment.done(function(response, textStatus, jqXHR){
newComment = false;
$(where).find("input[type='submit']").prop("disabled", false);
$(where).find("input[type='submit']").val("Comment");
if (response.length > 200){
$(updateThis).parent().fadeTo(0,0);
$(updateThis).parent().prop('outerHTML', response);
$(updateThis).parent().fadeTo(1,1);
}
});
}
}
});
Comment Form is submitting and also data getting saved to the database. But not displaying on the browser without refreshing the page.
here is the code:
$("#post_reply").click(function (event) {
$("#data_status").html("");
$('#ajax_loading').show();
event.preventDefault();
if (document.getElementById('_comment').value.trim() == "") {
return false;
}
$.post('../services/leave_comment.php', $("#open_status").serialize(), function (data) {
$('#ajax_loading').hide();
if (data.split("::")[1] == true) {
$("#data_status").html("Commented Successfully..");
$("#data_status").fadeOut(3000);
document.getElementById('_comment').value = '';
$('#_comment').html("");
} else if (data.split("::")[1] == false) {
$("#data_status").html("Error occured in Comment Submission.. TryAgain..");
$("#data_status").fadeOut(3000);
}
});
});
EDIT:
All i can understand is i haven't published the data with ajax??
Is this what i need to do??
$("#post_reply").click(function (event) {
$("#data_status").html("");
$('#ajax_loading').show();
event.preventDefault();
if (document.getElementById('_comment').value.trim() == "") {
return false;
}
$.post('../services/leave_comment.php', $("#open_status").serialize(), function (data) {
$('#ajax_loading').hide();
if (data.split("::")[1] == true) {
$("#data_status").html("Commented Successfully..");
$("#data_status").fadeOut(3000);
document.getElementById('_comment').value = '';
$('#_comment').html("");
$.ajax({
type: 'POST',
url : 'http://localhost/tech1/services/get_more_comments.php',
data: 'last_id='+last_id,
success: function(data){
$('.view_container').append(data);
},
complete: function(){
console.log('DONE');
}
});
} else if (data.split("::")[1] == false) {
$("#data_status").html("Error occured in Comment Submission.. TryAgain..");
$("#data_status").fadeOut(3000);
}
});
});
All your code does is post the data to the server. There is nothing that fetches the new comments from the server or manually appends the posted comment. You can either use ajax again to refresh comments or more simply append a comment with the posted content.
I would say to search the web for jQuery's .load :
example:
function updateShouts(){
// Assuming we have #shoutbox
$('#shoutbox').load('latestShouts.php');
}
in this case shoutbox would be the containing div with your comments,
you would call this function on the success of your ajax post
latestshouts.php would only contain the content of that div.
kinda hard to explain, i hope it makes sense to you
link: http://api.jquery.com/load/
I'm trying to check if username and email already exist on a register page.
I've got this javascript code:
var nombre = document.getElementById("username").value;
var email = document.getElementById("email").value;
var errorNombre = document.getElementById("erno");
var errorEmail = document.getElementById("erem");
if (nombre == null || nombre.length == 0 || /^\s+$/.test(nombre)) {
errorNombre.innerHTML = "<font color='red' face='century gothic'>Debe introducir un nombre de usuario</font>";
return false;
} else {
$.ajax({
type: 'POST',
data: {
email: email
},
url: 'consulta5.php',
success: function (response) {
if (response != 0) {
errorEmail.innerHTML = "<font color='red' face='century gothic'>Correo ya registrado</font>";
return false;
} else if (response == 0) {
//desde aquí
errorEmail.innerHTML = "";
$.ajax({
type: 'POST',
data: {
nombre: nombre
},
url: 'consulta4.php',
success: function (response) {
if (response != 0) {
errorNombre.innerHTML = "<font color='red' face='century gothic'>Nombre de usuario no disponible</font>";
return false;
}
}
});
}
}
});
}
And it works perfectly if it's part of a $( "#enviar" ).live("click", function(){, but tha problem is that this way the form is not sended if everything's ok. However, if I try to use the on submit = "return validate ()" only the first part of the javascript works, and the form is sended whenever the mail exists or not (but not when there are some blank spaces).
I'd really appreciate some help, because I don't have any idea on how to make this work!!
thanks :)
The form is not submitted because you never tell it to be. If, however, you change your innermost success function to something like:
success: function (response) {
if (response != 0) {
errorNombre.innerHTML = "<font color='red' face='century gothic'>Nombre de usuario no disponible</font>";
return false;
}
else {
$("#yourForm").submit();
}
}
then I believe your logic will be sound.
That said, there are some other changes I would recommend.
First, consider reworking your validation php to check both fields (name and email) in a single call. You can use a single response value to indicate which (if any) failed. If you want numeric response codes, then you could do something as simple as 0 for all's well, 1 for bad email, 2 for bad name, 3 for errors in both. There's really no need to be making two sequential trips to validate data that has no interdependencies.
Second, consider using CSS! There's no need to be using <font> here. Put a style (if you must) or a class (preferable) on errorNombre and errorEmail. If there are multiple errors that might be shown in those places, then just set the error text dynamically. If these are the only errors that go there, you don't even need that - put the error message in your HTML, and just dynamically show or hide the element.