Keeps going to next page but I want it to print below the form box. Any ideas why this is happening?
<input type="text" name="name" id="name" placeholder="Enter">
<div id="result"></div>
<input type="submit" value="Submit">
<!-- Placeholder where link is updated on success or an error message is shown -->
<div id="result"></div>
</form>
</div>
</body>
<script>
$('#process_form').ajaxForm({ // Make sure the form doesn't redirect us.
success: function(response) {
// Update the link with the response.
$('#result').html(response);
$('#name').val('');
}
});
</script>
This is how you can solve this problem...
just use this Elemetn.preventDefault()
here your html code
<form action="" method="get"></form>
<input type="text" name="name" id="name" placeholder="Enter">
<div id="result"></div>
<input type="submit" value="Submit">
<!-- Placeholder where link is updated on success or an error message is shown -->
</form>
here your js code
$('input[type="submit"]').on('click', function (e) {
e.preventDefault()
var value = $('#name').val();
$('#result').html(value)
});
Hope it will be work :)
Related
I am trying to submit a form to a my PHP script that uses phpmailer to send emails. I am using a. ajax call to run the PHP script without refreshing but when I click the submit button all it does is refresh the page. Thank you.
Below is my form script
<form method="POST" name="form" onsubmit="return chk()">
<fieldset>
<p><input type="text" name="name" placeholder="NAME" class="field"></p>
<p><input type="email" name="email" placeholder="EMAIL" class="field"></p>
<p><textarea cols="2" name="msg" rows="2" placeholder="MESSAGE"></textarea></p>
<p><input type="submit" class="button" onclick="return chk()"></p>
</fieldset>
</form>
Below is the ajax call. Its my first time using ajax so it may be wrong.
<script type="text/javascript">
function chk()
{
e.preventDefault();
var name=document.getElementById('name').value;
var email=document.getElementById('email').value;
var msg=document.getElementById('msg').value;
var dataString='name='+name+'&email='+email+'&msg='+msg;
$.ajax({
type:"post",
url:"mail.php",
data: dataString,
cache:false,
success: function(html) {
'Email Sent'
}
});
return false
}
</script>
To use .preventDefault() from a function you need to pass event as an argument
function chk(e){ //<<<<<<< here chk(e) while you're using e.preventDefault() if its somethingelse.preventDefault() so it should be chk(somethingelse)
e.preventDefault();
console.log('Not refreshed');
//return false; no need for it here.. return false here will work for a function not for the submit/click event so it will not prevent the default action in this case you've to use `preventDefault()`
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form onsubmit="chk(event)"> <!-- ck(event) -->
<input type="submit" value="submit"> <!-- No need for onclick here -->
</form>
You can forget about the function and use the submit event directly .. no need to use onsubmit/onclick
$(document).ready(function(){
$("form[name='form']").on('submit' , function(e){
e.preventDefault();
console.log('Not refreshed');
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form method="POST" name="form">
<fieldset>
<p><input type="text" name="name" placeholder="NAME" class="field"></p>
<p><input type="email" name="email" placeholder="EMAIL" class="field"></p>
<p><textarea cols="2" name="msg" rows="2" placeholder="MESSAGE"></textarea></p>
<p><input type="submit" class="button"></p>
</fieldset>
</form>
This is my first page index.php:
<body>
<div id="nerde2"> </div>
<div id="nerde1"> </div>
<input type="button" value="ilk update" id="update" />
<!-- <input type="button" value="ilk save" id="save" />-->
ilk save
<script src="Jquery_Projesi/js/bootstrap.min.js"></script>
<script src="Jquery_Projesi/js/js.js"></script>
<script src="get_post.js"></script>
</body>
This is my second page index2.php:
<body>
<?php
if(isset($_GET['savee'])){
?>
<form action="" method="post">
<input type="submit" value="save">
<input type="text" name="a">
</form>
<?php
}
?>
<?php
if(isset($_GET['updatee'])){
?>
<form action="" method="post">
<input type="submit" value="update">
<input type="text" name="b">
</form>
<?php
}
?>
</body>
This is my third page get_post.js:
$(document).ready(function(){
"use strict";
$('#update').click(function(){
$('#nerde2').hide(1000);
$('#nerde1').show(3000);
var vall="veri gonderildi";
$.get('index2.php',{updatee:vall},function(data){
$('#nerde1').html(data);
});
});
$('#save').click(function(){
$('#nerde1').hide(1000);
$('#nerde2').show(3000);
var vall="veri gonderildi";
$.get('index2.php',{savee:vall},function(data){
$('#nerde2').html(data);
});
});
});
When i click save or update button, i want to show index2.php functions on the index.php page.
I used a get method in jquery.js and everything is working but when i am using an , page is refreshing and nothing appends inside to the index.php
You need to stop the default event propagation. Try adding the following to your code
$('#update').click(function(e){
e.preventDefault();
$('#nerde2').hide(1000);
$('#nerde1').show(3000);
var vall="veri gonderildi";
$.get('index2.php',{updatee:vall},function(data){
$('#nerde1').html(data);
});
return false;
});
This is driving me nuts.
No matter what I do I cannot keep this Ajax JQuery form from submitting whenever you hit enter in any of the form fields.
I keep looking into forums and none of the suggestions seem to help. I am refreshing my browser window, which I think will refresh all the code but this is getting crazy.
Please help!
<title>555</title>
<!-- jQuery -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<!-- The Ajax Submit Script -->
<script>
$(function () {
$('#msform').submit(function(e){
e.preventDefault();
$.ajax({
type: 'post',
url: 'assets/upload.php',
data: $('#msform').serialize(),
success: function () {
alert('form was submitted');
}
});
return false;
});
});
</script>
</head>
<body>
<!-- start error message div -->
<div id="form-messages"></div>
<!-- end error message div -->
<!-- multistep form -->
<form id="msform" name="msform">
<fieldset>
<h2 class="fs-title">Submit This</h2>
<h3 class="fs-subtitle">heidiho neighbor!</h3>
<input type="text" name="website" placeholder="Website" />
<table>
<tr>
<td><input type="text" name="firstname" placeholder="First Name" /></td>
<td><input type="text" name="lastname" placeholder="Last Name" /></td>
</tr>
</table>
<input type="text" name="email" placeholder="Email" />
<input type="text" name="phone" placeholder="Phone" />
<input type="submit" value="submit" id="submit"/>
</fieldset>
</form>
I think you need to capture Enter key on textboxes and disable them if found.
$(":text").keydown(function(e){
if(e.which==13)
{
return false;
}
});
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 have a very simple question but its been bugging me for quite some time .I have a html contact us page in which I have a simple form which already has validation assigned to it.The form code is :
<div class="contact_form">
<form method="post" id="contactForm" name="contactForm" action="">
<fieldset class="contactFieldset">
<ul>
<li>
<label for="contactName" class="leftLabel">*Name:</label>
<input type="text" name="contactName" id="contactName" class="contactInput required" value="" />
</li>
<p></p>
<li>
<label for="email" class="leftLabel">*Email:</label>
<input type="text" id="email" name="email" class="contactInput email required" value="" />
</li>
<span class="simple-success">I'll be in touch soon</span>
<li>
<label for="subject" class="leftLabel">*Subject:</label>
<input type="text" name="subject" id="subject" class="contactInput required" value="" />
</li>
<p></p>
<li>
<label for="message" class="leftLabel">*Message:</label>
<textarea rows="10" cols="40" id="message" name="message" class="contactTextarea required"></textarea>
</li>
<p></p>
<li>
<input type="submit" alt="Submit button" name="submit" class="submit" id="submit">
</li>
</ul>
</fieldset>
</form>
</div>
The code which I am using to try and call the php form using ajax is this
$(document).ready(function() {
//if submit button is clicked
$('#submit').click(function () {
alert("test i am here");
/*get the email value*/
var email = $("input#email").val();
var name = $("input#contactName").val();
var subject = $("input#subject").val();
var message=$("input#message").val();
alert("email"+email);
/* Check if the email is good or bad */
var goodEmail = email.match(/\b(^(\S+#).+((\.com)|(\.net)|(\.edu)|(\.mil)|(\.gov)|(\.org)|(\.info)|(\.sex)|(\.biz)|(\.aero)|(\.coop)|(\.museum)|(\.name)|(\.pro)|(\.arpa)|(\.asia)|(\.cat)|(\.int)|(\.jobs)|(\.tel)|(\.travel)|(\.xxx)|(\..{2,2}))$)\b/gi);
apos=email.indexOf("#");dotpos = email.lastIndexOf(".");lastpos=email.length-1;
var badEmail = (apos<1 || dotpos-apos<2 || lastpos-dotpos<2);
/*If the email is bad ,display the error message*/
if (email=="" || !goodEmail || badEmail) {
$("email").focus();
return false;
}
var dataString = 'email='+ email + '\n Name='+ name+ '\n Subject='+ subject+ '\n message='+ message;
alert (dataString);
$.ajax({
type: "POST",
url: "mai.php",
data: dataString,
//Do not cache the page
cache: false,
success: function(html) {
$('.simple-sucess').fadeIn(100).show();
$('.contact_form').fadeOut(100).hide();
$('.simple_error').fadeOut(100).hide();
}
});
return false;
});
});
The thing is the alert is not even being displayed when I press the submit button..what am I doing wrong here?
The validation code is
<script type="text/javascript">
jQuery(document).ready(function($){
$("#contactForm").validate();
});
First of all, use the submit event, not the submit button click event because the submit button is already wired up to do a normal submit. There may also be a bug, be sure to check your javascript console for errors. Either way...
What you probably really want to do is use the jQuery form plugin which will make your code a lot more simple.
Then your revised code would be as simple as:
$('#contactForm').ajaxForm(function() {
$('.simple-sucess').fadeIn(100).show();
$('.contact_form').fadeOut(100).hide();
$('.simple_error').fadeOut(100).hide()
});
In this case you would lose your email validation, but why reinvent the wheel, there are tons of validators out there that already have the bugs worked out etc.
the first thing is you are using :
<input type="submit" alt="Submit button" name="submit" class="submit" id="submit">
in your form, and in jquery you are using .click() event,
if try to change
<input type="submit" alt="Submit button" name="submit" class="submit" id="submit">
to :
<input type="button" alt="Submit button" name="submit" class="submit" id="submit">
then it will work perfectly with the .click() event
or the second option you have if you don't want to change the input type then use .submit() instead of .click()
OMG, so many code lines. A little suggestion: keep it simple enough to debug. A jsfiddle demo is recommended for better answers.
Here I post my solution for ajax forms, which works in basic browsers without javascript support.
html:
<form method="post" id="contactForm" action="somewhere">
Name: <input type="text" name="contactName" />
<br />
<input type="submit" value="Submit this form" />
</form>
javascript:
jQuery(function($){
$('#contactForm').submit(function(e){
e.preventDefault?e.preventDefault():false;
$.post(this.action,$(this).serialize(),function(text){
//callbacks
console.log(text);
});
return false;
})
});