Hi all I am making a contact form popup window on my website using Jqmodal. The contact form loads and displays correctly, but the contact form itself I am trying to submit it using ajax and then want to give the user a message saying "message send" and slide the form up.
Anyway the main issue I am running into is that it submits the form but takes the user to the actual php file that it should of connected to via ajax. My code is as follows. It is probably something on the Jqmodal side of things but I am unsure if anyone could point me in the right direction that would be fantastic. Also close button is not working but I reckon I can fix that.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<!--[if IE]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<script src="http://www.modernizr.com/downloads/modernizr.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type='text/javascript'>
$(document).ready(function() {
$("#submit").click(function() {
var action = $("#contact_form").attr('action');
var form_data = {
code:$("#code").val(),
name:$("#name").val(),
email:$("#email").val(),
message:$("#message").val(),
is_ajax:1
};
$.ajax({
type:"POST",
url:action,
data:form_data,
success: function(response)
{
if(response == 'success')
$("#form").slideUp('slow', function() {
$("#message").html("<p class='success'>Your Message Has Been Sent.</p>");
});
else
$("#message").html("<p class='error'>Code was typed incorecctly.</p>");
}
});
return false;
});
// refresh captcha
$('#refresh').click(function() {
change_captcha();
});
function change_captcha(){
document.getElementById('captcha').src="./static/classes/get_captcha.php?rnd="+Math.random();
};
});
</script>
<link href="./static/css/style.css" rel="stylesheet" type="text/css" media="screen">
<link href='http://fonts.googleapis.com/css?family=Quantico:400,700' rel='stylesheet' type='text/css'>
</head>
<body>
<span id="close">
<button class="jqmClose">Close</button>
</span>
<br/><br/>
<form name="contact_form" method="POST" action="./static/classes/contact.php" enctype="application/x-www-form-urlencoded">
<input id="name" name="name" type="text" placeholder="Full Name..." required>
<br/>
<input id="email" name="email" type="email" placeholder="Your Email..." required>
<br/>
<input id="message" name="message" type="text" placeholder="Your Message..." required>
<br/>
<section id="captcha_area">
<img src="./static/classes/get_captcha.php" alt="" id="captcha" />
<br/>
<input name="code" type="text" id="code">
</section>
<section id="refresh">?</section>
<br clear="all" /><br clear="all" />
<input type="submit" id="submit" value="Send">
</form>
<span id="message"></span>
</body>
</html>
Change $("#submit").click(function() { to => $("#submit").click(function(e) {
e.preventDefault();. Rest of the code is same. This will stop default behavior of submit action.
OR you can use, .submit event.
Related
I am having a task that the form contains different inputs. Before going to save the data the user has to go for preview. Preview is loading in a modal popup which contains some inputs. In the inputs presented in modal popup is loaded with the values entered by the user in the form. i have written some code. but when i click on preview it was not loading in modal popup. can anybody help. my code goes here
<html>
<head>
<script src="jquery.min.js"></script>
<script src="bootstrap-3.4.1/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="bootstrap-3.4.1/css/bootstrap.min.css">
</head>
<script type="text/javascript">
$(document).ready(function(){
$('#preview').click(function(){
var f_name=$('#name').val();
$('#name1').val(f_name);
});
});
</script>
<div class="modal-body">
1. Name of the Applicant <input type="text" name="name1" id="name1" required />
</div>
Name of the Applicant
<input type="text" name="name" id="name" maxlength="50" required />
<button id="preview" class="btn btn-danger btn-sm">Preview</button>
I am new to jquery ,i have some trouble while inserting data to mysql database using jquery.
this is my html file
<!DOCTYPE html>
<html>
<head>
<title>
staff registration
</title>
<body>
<form>
Staff Id:<input type="text" id="staffid"><br>
Password:<input type="password" id="password1"><br>
Re-enter Password:<input type="password" id="password2"><br>
Email:<input type="email" id="email"><br>
Gender:<input type="text" id="gender"><br>
Qualification:<input type="text" id="qualification"><br>
Course 1:<input type="text" id="course1"><br>
Course 2:<input type="text" id="course2"><br>
Course 3:<input type="text" id="course3"><br><br>
<input type="submit" id="submit" value="CREATE">
</form>
<script src="jquery.min.js"></script>
<script>
$("#submit").click(function(){
var staffid=$("#staffid").val();
var password1=$("#password1").val();
var password2=$("#password2").val();
var email=$("#email").val();
var gender=$("#gender").val();
var qualification=$("#qualification").val();
var course1=$("#course1").val();
var course2=$("#course2").val();
var course3=$("#course3").val();
$.post("insert.php",{si:staffid,pwd1:password1,pwd2:password2,
email:eml,gender:gen,qualification:qal,course1:c1,course2:c2,course3:c3},
function(data){
alert(data);
});
});
</script>
</body>
</html>
this is my php file named insert.php
<?php
$con=new mysqli("localhost","root","","flash");
$si=$_POST['si'];
$pwd1=$_POST['pwd1'];
$pwd2=$_POST['pwd2'];
$eml=$_POST['eml'];
$gen=$_POST['gen'];
$qal=$_POST['qal'];
$c1=$_POST['c1'];
$c2=$_POST['c2'];
$c3=$_POST['c3'];
$sql="INSERT INTO staff(staff_id,password,email_id,gender,qualification,course_1,course_2,course_3) VALUES('$si','$pwd2','$eml','$gen','$qal','$c1','$c2','$c3')";
$con->query($sql);
?>
nothing will happen while i click submit button
please anyone help me to solve this issue
Try to use the non-slim build, available here http://jquery.com/download/, such as:
https://code.jquery.com/jquery-3.3.1.min.js
Also you had issue while making the json for the post, here is the rectified version
<!DOCTYPE html>
<html>
<head>
<title>
staff registration
</title>
<body>
<form>
Staff Id:<input type="text" id="staffid"><br>
Password:<input type="password" id="password1"><br>
Re-enter Password:<input type="password" id="password2"><br>
Email:<input type="email" id="email"><br>
Gender:<input type="text" id="gender"><br>
Qualification:<input type="text" id="qualification"><br>
Course 1:<input type="text" id="course1"><br>
Course 2:<input type="text" id="course2"><br>
Course 3:<input type="text" id="course3"><br><br>
<input type="submit" id="submit" value="CREATE">
</form>
<script
src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script>
$("#submit").click(function(){
var staffid=$("#staffid").val();
var password1=$("#password1").val();
var password2=$("#password2").val();
var email=$("#email").val();
var gender=$("#gender").val();
var qualification=$("#qualification").val();
var course1=$("#course1").val();
var course2=$("#course2").val();
var course3=$("#course3").val();
$.post("insert.php",{si:staffid,pwd1:password1,pwd2:password2,
eml:email,gen:gender,qal:qualification,c1:course1,c2:course2,c3:course3},
function(data){
alert(data);
});
});</script>
</body>
</html>
Here am working on a page were i need the content inside a textarea in a form tag to be passed to another set of form tag in the same page were i have no submit button to pass the content, please help me on this and pardon me if went wrong somewhere, thank you.
content.php
<?php
echo'
<form>
<div class="col-sm-12 form-group"><textarea rows="6" type="text" class="form-control" placeholder="Mail body" name="mail_body"></textarea></div>
//Without using submit button
</form>';
?>
pass_content.php
<?php
<form>
//pass the the content in above textarea in this form which is on the same page
</form>
?>
You can do this using jquery. Like this :
var $mail = $(".mail");
$(".email").keyup(function() {
$mail.val( this.value );
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
<div class="col-sm-12 form-group"><textarea rows="6" type="text" class="form-control email" placeholder="Mail body" name="mail_body"></textarea></div>
</form>
<form>
<textarea rows="6" type="text" class="form-control mail" ></textarea>
</form>
UPDATE : As you want another field to be hidden.
you jquery code:
var $mail = $(".mail");
$(".email").keyup(function() {
$mail.val( this.value );
});
and here is your html code
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
<div class="col-sm-12 form-group">
<textarea rows="6" type="text" class="form-control email" placeholder="Mail body" name="mail_body"></textarea>
</div>
</form>
<form>
<input type="hidden" class="mail" >
</form>
Check this -
<!DOCTYPE html>
<html>
<head>
<title></title>
<script src="https://code.jquery.com/jquery-1.9.1.min.js"></script>
<script type="text/javascript">
$( document ).ready(function() {
console.log('document loaded');
$( "#box-texarea" ).keyup(function() {
console.log( "Handler for .keyup() called." );
// Get data from textarea
var userData = $(this).val();
console.log('userData : '+userData);
// Place data inside form
$('#fm-userdata').html(userData);
});
});
</script>
</head>
<body>
<textarea placeholder="Place for textarea" id="box-texarea" style="width:500px; height: 100px;"></textarea>
<br>
<form id="fm-userdata" style="border: 1px solid #ccc;"></form>
</body>
</html>
I am unable to load external file while using AJAX jQuery. I want to use jQuery AJAX to pop up form then validate, enter data in MySQL. but starting from a simple AJAX function. Kindly let me know where I am going wrong
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" media="all" href="test_style.css">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"> </script>
<script>
$(document).ready(function(){
$("#ajax-contact-form").submit(function(){
var str = $(this).serialize();
$.ajax({
type: "POST",
url:"contact.php",
data: str,
success:function(result) {
$("#div1").html(result);
}
});
});
});
</script>
</head>
<body>
<div id="contact_form">
<form id="ajax-contact-form" name="contact" action="">
<fieldset>
<label for="name" id="name_label">Name</label>
<input type="text" name="name" id="name" size="30" value="" class="text-input"/>
<label class="error" for="name" id="name_error">This field is required.</label>
<input class="button" type="submit" name="submit" value="Send Message">
</fieldset>
</form>
</div>
</body>
</html>
and contact.php file is
<?php
echo "Hello";
?>
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" media="all" href="test_style.css">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script>
$(function() {
$(".button").click(function() {
$.ajax({url:"contact.php",success:function(result){
$("#div1").html(result);
}});
return false;
});
});
</script>
</head>
<body>
<div id="contact_form">
<form name="contact" action="">
<fieldset>
<label for="name" id="name_label">Name</label>
<input type="text" name="name" id="name" size="30" value="" class="text-input" />
<label class="error" for="name" id="name_error">This field is required.</label>
<input type="submit" name="submit" class="button" id="submit_btn" value="Send" />
</fieldset>
</form>
</div>
<div id="div1">
</div>
</body>
</html>
Try that:
What needed to be fixed:
1) You'd duplicated the onReady function,
2) you can use a submit form button, but since it's default action is to submit the form, the result wouldn't have been visible.
3) There was no #div1 for the result to be displayed in.
Hopefully, this has been helpful... Happy Coding!
Try with type button type
<input type="button" name="submit" class="button" id="submit_btn" value="Send" />
And also your both scripts are same use either DOM ready or $(function) like
<script>
$(document).ready(function(){
$(".button").click(function(){
$.ajax({url:"contact.php",success:function(result){
$("#div1").html(result);
}});
});
});
</script>
button is your class name so that it will represented like .button And create an div with id div1 at your html page
$("#div1").html(result);
Use one div which id is div1 inside your page which you want to show the result.
<div id="div1"></div>
I am working on a MailChimp subscription form that will need to send the form $_POST data to MailChimp, but not actually load the success page. I.e. I want it to load custom JS on submission. This is what I have so far. Obviously the preventDefault is breaking the submission. Any thoughts are greatly appreciated:
<!-- Begin MailChimp Signup Form -->
<link href="http://cdn-images.mailchimp.com/embedcode/slim-081711.css" rel="stylesheet" type="text/css">
<script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
<style type="text/css">
#mc_embed_signup{background:#fff; clear:left; font:14px Helvetica,Arial,sans-serif; }
</style>
<form action="http://yourmove.us5.list-manage.com/subscribe/?u=00000444444333331&id=aaa111444iiii" method="POST" id='mc_embed_form'>
<div id="mc_embed_signup">
<h3>Subscribe to <em>Our Newsletter/em> for your free download:</h3>
<input type="email" value="" name="EMAIL" class="email" id="mce-EMAIL" placeholder="email address" required>
<div class="clear"><input type="submit" value="Subscribe" name="subscribe" id="mc-embedded-subscribe" class="button" novalidate></div>
</div>
</form>
<script type="text/javascript">
$(document).ready(function(){
$("#mc_embed_form").submit(function (){
event.preventDefault();
showConfirmation();
});
});
function showConfirmation() {
alert("successful");
}
</script>
You are missing a parameter in your function, try this one:
$(document).ready(function(){
$("#mc_embed_form").submit(function (event){
event.preventDefault();
showConfirmation();
});
});