I'm quite new to jquery but can't get the following to work properly. I can submit my form only once, after that i can't submit it a second time.
<script type="text/javascript" language="javascript">
$(document).ready(function() {
$('#register').submit(function() {
$.ajax({
data: $(this).serialize(),
type: $(this).attr('method'),
url: $(this).attr('action'),
success: function(response) {
$('#regrespons').html(response);
$("#regrespons").css("visibility", "visible");
$("#regrespons").fadeOut(1000);
}
});
return false;
});
});
</script>
<form id="register" action="includes/register.php" method="post" autocomplete="off">
<input class="inp" name="gebr`enter code here`" type="text" />
<input class="inp" name="ww1" type="password" />
<input class="inp" name="ww2" type="password" />
<input class="inp" name="mail" type="text" />
<input class="but" type="submit" value="Registreren" />
</form>
Any help is apriciated!
Change $("#register").submit(function () { to $(document).on('submit', '#register', function () {
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>
I'm having a data in my view such as
<input name="start" type="hidden" value="1" />
<input name="end" type="hidden" value="2" />
I need to pass this values to the controller when my page getting load.
How should I pass it to the controller.
Is there any way to send this values using jQuery!!!...
Someone help me..
Why don't you try ajax?
<input name="start" class="start" type="hidden" value="some_value1" />
<input name="end" class="end" type="hidden" value="some_value2" />
var postData = {
"param1" : some_value1,
"param2" : some_value2
};
console.log(postData);
$.ajax({
type: "POST",
url: "test.php",
data: postData,
success: function(){
alert(param1 + ' ' + param2);
window.open("test.php");
}
});
test.php is your controller...
Try this
<input name="start" class="start" type="hidden" value="1" />
<input name="end" class="end" type="hidden" value="2" />
<script type="text/javascript">
$(function() {
pass_value();
});
function pass_value(){
var start = $(".start").val();
var end = $(".end").val();
$.post('{your_url}', {start:start, end:end},function(data){
console.log(data);
})
}
</script>
I'm trying to post data to the same page.
I can see that the post from the ajax is working correctly but the $_POST in my index.php isn't finding the post after form submission.
<form method="post" id="classic_login" action="">
<input type="text" name="user" placeholder="Username" class="classic_field" id="user_field" />
<input type="text" name="pass" placeholder="Password" class="classic_field" id="pass_field" />
<input type="submit" name="login" value="Login" class="classic_button" id="login_button" />
<input type="submit" name="register" value="Register" class="classic_button" id="register_button" />
</form>
and I've tried both print_r($_POST) and isset both don't change after submission
print_r($_POST);
if(isset($_POST['user']) && isset($_POST['pass']))
echo "works";
printing formdata after a test submission i get: user=testuser&pass=testpass
$("#classic_login").submit(function(event) {
var formdata = $(this).serialize();
event.preventDefault();
$.ajax
({
url: "",
type: 'POST',
data: formdata,
//success: function(response) { alert(response); },
error: function() { alert("fail"); }
});
});
Alternatively, you could use document.URL to make a request on the same page. Then in PHP, include an exit; after the request:
<?php
if($_SERVER['REQUEST_METHOD'] == 'POST') {
echo '<pre>';
print_r($_POST);
exit; // this is important!
}
?>
<form method="post" id="classic_login" action="">
<input type="text" name="user" placeholder="Username" class="classic_field" id="user_field" />
<input type="text" name="pass" placeholder="Password" class="classic_field" id="pass_field" />
<input type="submit" name="login" value="Login" class="classic_button" id="login_button" />
<input type="submit" name="register" value="Register" class="classic_button" id="register_button" />
</form>
<!-- this is no brainer, of course you need to load the library -->
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script type="text/javascript">
$("#classic_login").submit(function(event) {
var formdata = $(this).serialize();
event.preventDefault();
$.ajax({
url: document.URL, // you can use this
type: 'POST',
data: formdata,
success: function(response) {
alert(response);
}
});
});
</script>
Sample Output
I have struggled for quite some time now with this but can figure out whats wrong.
I have an index file where I'm loading the contend with ajax (in this case a form stored in add_admin.php). I have a form which loads just perfectly in a div after clicking a menu item(calling the ajax function - this part works). But if I want to submit that form with jQuery afterwords using the
$(".loginform").submit(function(e) {});
it doesn't get called. I'm suspecting the reason is that the form was not present on the page at the time it was loaded. If I move the form directly to the index page, the function works perfectly.
$(document).ready(function () {
$(".loginform").submit(function(e) {
data = $("#loginform").serialize();
password = document.getElementById("user_pass").value;
passtosubmit=hex_sha512(password);
data += "&pass=" + encodeURIComponent(passtosubmit);
password="";
//$.post("modules/process/process_add_admin.php", data);
//alert(data);return false;
$.ajax({
type: "POST",
url: "/modules/process/process_add_admin.php",
data: data,
success: function() {
$('#main_panel_container').html("<div id='message'></div>");
$('#message').html("<h2>Contact Form Submitted!</h2>")
.append("<p>We will be in touch soon.</p>")
.hide()
.fadeIn(1500, function() {
$('#message').append("<img id='checkmark' src='images/check.png'/>");
});
}
});
return false;
});
});
The form to submit
add_admin.php
<div id="contact_form">
<form name="loginform" class="loginform" id="loginform" action="#" method="post">
<label><strong>Username</strong></label><input type="text" name="username" id="user_login" size="28" class="input" />
<br />
<label><strong>Password</strong></label><input type="password" name="p" id="user_pass" size="28" class="input"/>
<br />
<label><strong>E-mail</strong></label><input type="text" name="email" id="user_email" size="28" class="email" />
<br />
<label><strong>First Name</strong></label><input type="text" name="fname" id="user_fname" size="28" class="input" />
<br />
<label><strong>Last Name</strong></label><input type="text" name="lname" id="user_lname" size="28" class="input" />
<br />
<input id="save" class="addbutton" type="submit" value="Add" onclick=""/>
</form>
</div>
can anyone please advise?
Thanks
Here's what I normally do, add a onSubmit event in the form tag
<form name="loginform" class="loginform" id="loginform" action="#" method="post" onSubmit="return addContent('loginform');">
and then with javascript
function addContent(frm) {
//anything you wanna do before you post
$.post(
url,
$('#' + frm).serialize(),
function (data) {
result = data;
}
)
.success(function() {
//add your success proccesses
})
.complete(function() {
})
.error(function() {
alert('An error has occurred.');
});
return false;// this stops the form from actually posting
}
Use this code:
<div id="contact_form">
<form name="loginform" class="loginform" id="loginform" action="javascript:add_admin();" method="post">
<label><strong>Username</strong></label><input type="text" name="username" id="user_login" size="28" class="input" />
<br />
<label><strong>Password</strong></label><input type="password" name="p" id="user_pass" size="28" class="input"/>
<br />
<label><strong>E-mail</strong></label><input type="text" name="email" id="user_email" size="28" class="email" />
<br />
<label><strong>First Name</strong></label><input type="text" name="fname" id="user_fname" size="28" class="input" />
<br />
<label><strong>Last Name</strong></label><input type="text" name="lname" id="user_lname" size="28" class="input" />
<br />
<input id="save" class="addbutton" type="submit" value="Add"/>
</form>
</div>
You have to define a function on javascript use this javascript code
function add_admin(){
data = $("#loginform").serialize();
password = document.getElementById("user_pass").value;
passtosubmit=hex_sha512(password);
data += "&pass=" + encodeURIComponent(passtosubmit);
password="";
//$.post("modules/process/process_add_admin.php", data);
//alert(data);return false;
$.ajax({
type: "POST",
url: "/modules/process/process_add_admin.php",
data: data,
success: function() {
$('#main_panel_container').html("<div id='message'></div>");
$('#message').html("<h2>Contact Form Submitted!</h2>")
.append("<p>We will be in touch soon.</p>")
.hide()
.fadeIn(1500, function() {
$('#message').append("<img id='checkmark' src='images/check.png' />");
});
}
});
return false;
}
Thanks!
I was having the same issue when I ran across this thread. This solution did not quite work for what I needed to do, but what I wound up doing is just calling my page initiate function again after I loaded the AJAX form. This added the new AJAX form to the event calls and it worked perfectly.
When I try to run my code on any other webbrowsers apart from the Internet explorer it works fine. But when I try to run the code on Internet explorer I do get an alert box saying HERE along with an Ok button. but the problem is when I click on that OK button I do not get anything. Ideally I should be getting another alert box.
<!DOCTYPE html>
<html>
<head>
<script src="js/jquery-1.4.2.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#submit").click(function(event) {
alert("here");
$.post('process.php', {name:'test1',email:'test.com'}, function(data)
{
$('#results').html(data);
alert(data);
});
});
});
</script>
</head>
<body>
<form name="myform" id="myform" action="" method="POST">
<label for="name" id="name_label">Name</label>
<input type="text" name="name" id="name" size="30" value=""/>
<br>
<label for="email" id="email_label">Email</label>
<input type="text" name="email" id="email" size="30" value=""/>
<br>
<input type="button" name="submit" id="submit" value="Submit">
</form>
<div id="results"><div>
</body>
</html>
Any help on this is very much appreciated.
Edit: I found out that Internet Explorer which has HTTP works perfectly fine but not on Internet Explorer which uses HTTPS.
Change your code to
<form name="myform" id="myform" action="" method="POST" onsubmit="return validate(this);">
<label for="name" id="name_label">Name</label>
<input type="text" name="name" id="name" size="30" value=""/>
<br>
<label for="email" id="email_label">Email</label>
<input type="text" name="email" id="email" size="30" value=""/>
<br>
<input type="button" name="submit" id="submit" value="Submit">
</form>
<script>
function validate(elem){
$.post('process.php', {name:'test1',email:'test.com'}, function(data)
{
$('#results').html(data);
return true;
});
return false;
}
</script>
try using jquery $.ajax() for posting your form data using $(fomname).serialize() method
function submitYourForm()
{
$.ajax({
type: 'POST',
cache: false,
async:true,
url: 'your url',
data: $('#myform').serialize(),
success: function(data) {
alert(data);
}
});
}
change your button type from "submit" to "button" and call your function onclick the button
like
<input type="button" name="submit" onclick="submitYourForm();" value="Submit" />
remove function call onsubmit.
try this