I am trying to send data from a form to a php file so I can store it in a database, but its not working...
The code for the form is not on the same server as the php file, because the form will be on a mobile app.
html
<div data-role="page" id="createclub">
<div data-role="content">
<form id="cname" align="left" action="post">
<label for="name">Enter Name:</label>
<input type="text" id="name" value="" />
<input type="submit" value="Submit" data-inline="true">
</form>
<div id="result"></div>
</div>
<script type="text/javascript">
$(document).ready(function(){
$("#cname").submit( function () {
$.post(
'http://www.clubbedin.isadcharity.org/createclub.php',
$("#cname").serialize(),
function(data){
$("#result").html(data);
alert("Data " + data);
}
);
return false;
});
});
</script>
php file
$name = $_POST['name'];
THANK YOU!!!
Add this at the beginning of your PHP file:
header("access-control-allow-origin: *");
More info on cross domain policy here.
I think you need to prevent the default function of the submit button using .preventDefault() because as I look on your code you want to submit your form using ajax
$("#cname").submit(function (e) {
e.preventDefault();
$.ajax({
url: 'http://www.clubbedin.isadcharity.org/createclub.php',
crossDomain: true, //set as a cross domain requests
type: 'post',
data: $("#cname").serialize(),
success: function (data) {
$("#result").html(data);
alert("Data " + data);
},
});
});
and please use .ajax() so that you can set your ajax request to a cross-domain request
http://api.jquery.com/jQuery.ajax/
Your input element <input type="text" id="name" value="" /> must set up the name attribute as name="name".
form #cname after edited
<form id="cname" align="left" action="post">
<label for="name">Enter Name:</label>
<input type="text" id="name" name="name" value="" />
<input type="submit" value="Submit" data-inline="true">
</form>
You can gather more informations from the jQuery API Documention:
http://api.jquery.com/
http://api.jquery.com/serialize/
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 am trying to create a contact form with CI and I am having problem with jQuery triggering HTML5 validation, my form is
<form id="contact_form" name="contact_form">
<INPUT id="name" class="medium user" name="name" type="text" required>
<input type="submit" name="submit_btn" id="submit_btn" value="Send Message">
</form>
with this html validation is working fine but when I try to submit form with Ajax using bellow code, validation stop working and form submitted without validation
$(document).ready(function($){
$("#submit_btn").click(function(){
var response = $.ajax({
type: "POST",
url: "send_email.php",
data: $(contact_form).serialize()
}).done(function( msg ) {
$('#commentForm').html('<h5>Thanks</h5>'+msg);
});
return false;
});
});
how to validate form with ajax form submission?
Thanks
Use submit method instead of click if you want to validate the form and submit ajax.
$(document).ready(function($) {
$("#contact_form").submit(function() {
alert('form submitted');
var response = $.ajax({
type: "POST",
url: "send_email.php",
data: $("#contact_form").serialize()
}).done(function(msg) {
$('#commentForm').html('<h5>Thanks</h5>' + msg);
});
return false;
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form id="contact_form" name="contact_form">
<INPUT id="name" class="medium user" name="name" type="text" required>
<input type="submit" name="submit_btn" id="submit_btn" value="Send Message">
</form>
How can I send data from form with several inputs to a php script? Using POST method ofc. For example I've such form:
<form action="register.php" method="POST" name="registerform">
<span class="login">Nazwa użytkownika:</span>
<input type="text" class="login" placeholder="twój login" name="username">
<span class="login">E-mail</span>
<input type="text" class="login" placeholder="twój email" name="email">
<span class="login">Hasło</span>
<input type="password" class="login" placeholder="twoje hasło" name="password">
<span class="login">Powtórz Hasło</span>
<input type="password" class="login" placeholder="powtórz hasło" name="repassword">
<input type="submit" value="Rejestruj" class="button">
</form>
How to send this all to register.php which is placed in same folder?
<script type="text/javascript">
$(document).ready(function() {
form = $('form[name="registerform"]');
$.post(form.attr('action'), form.serialize());
});
</script>
using jquery.post()
here is the link
You can use serialize() method
var str = $('form[name="registerform"]').serialize();
Then send the data using a ajax request $.ajax or $.post
$.ajax({
url: 'yoururl'
type : 'post',
data : str,
success : function(data){
}
})
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
just a question --
How do i actually submit a form and still stay on the same page whilst the script is being executed?
I have a simple form that goes like this:
<form action="process.php" method="post" id="form">
<label for="name">Name</label>
<input type="text" name="name" id="name" required="required" />
<label for="email">Email</label>
<input type="email" name="email" id="email" required="required" />
<label for="subject">Subject</label>
<input type="text" name="subject" id="subject" required="required" />
<label for="message">Message</label>
<input type="text" name="message" id="message" required="required" />
<input type="submit" id="button" value="Submit"/>
</form>
But everytime i submit the form it just goes to process.php. I don't want that, i want it to stay on the same page, maybe even have a jquery popup saying "thank you" or something.
How do i actually stay on the same page whilst the script is being run?
Put your form processing logic on the same page as the form
Use Ajax
Redirect back to that page when process.php is done processing the form
You have to use ajax in this case.
Basically, you need to post all data using ajax. In server side, you will need to get all parameters using $_POST['name'] like you normally do in server scripting.
FORM
<form action="process.php" method="post" id="form">
<label for="name">Name</label>
<input type="text" name="name" id="name" required="required" />
<label for="email">Email</label>
<input type="email" name="email" id="email" required="required" />
<label for="subject">Subject</label>
<input type="text" name="subject" id="subject" required="required" />
<label for="message">Message</label>
<input type="text" name="message" id="message" required="required" />
<input type="button" id="button" value="Submit"/>
</form>
<div id="dialog-message" title="Thank You">
<p>Your message here</p>
</div>
JQUERY
$(document).ready(function(){
$('#dialog-message').dialog({
modal: true,
autoOpen: false,
buttons: {
Ok: function() {
$(this).dialog("close");
}
}
});
$('#button').on('click', function() {
var name = $('#name').val();
var email = $('#email').val();
var subject = $('#subject').val();
var message = $('#message').val();
var dataString = 'name=' + name + '&email=' + email + '&subject=' + subject + '&message=' + message;
$.ajax({
type: "POST",
url: "process.php",
data: dataString,
success: function() {
alert('');
$('#dialog-message').dialog('open');
}
});
});
});
See the example here
Please note, dont forget to put jquery reference and also jquery ui reference
I think John Conde gave the best answer.
I would either make it so the php file that displays the form also handles the $_POST or if you can't do it that way then do it in Ajax with a code similar to this:
$("#form").bind("submit", function() {
var nameTxt = $("#name").val();
var emailTxt = $("#email").val();
$.post('process.php',
{
name: nameTxt,
email: emailTxt
},
function(data) {
if (data == 'ko')
alert('Could not submit...');
else {
alert('Thank you for your message.');
}
});
return false;
}
What this does is that it "blocks" the regular submit of the form when you click the submit button, retrieve input values and sends them to the process.php script.
It assumes that your "process.php" does an
echo "ko";
if there is an error. You can do some form cleanup after the form has been successfully sent by reseting the inputs:
$("#name").val('');
$("#email").val('');
Assuming you're using jquery:
$(document).ready(function(){
$('#form').submit(function(e){
// do some ajax request to process.php here...
// stop the form doing its default action of submitting directly to process.php
e.preventDefault();
});
});
try something like this
action="<?php print $_SERVER["PHP_SELF"]; ?>" (or) action=""
EDIT:
<?php
if(isset($_POST['Submit'])){
//do your validation or something here
header("location:Process.php");
}
I targeted an iframe to solve the problem, and it worked perfectly.
<form name="contact" role="form" method="post" action="contact.php" target="my_iframe">
Feild 1: <input name="feild1" id="feild1" type="text" placeholder="Lorem ipsum dolor"><br/><br/>
Feild 2: <input name="feild2" id="feild2" type="text" placeholder="Lorem ipsum dolor"><br/><br/>
Feild 3: <textarea name="feild3" id="feild3" rows="5" type="text" placeholder="Lorem ipsum dolor, sit amet."></textarea><br/><br/>
<input type="submit">
</form>
<!-- target iframe to prevent redirection to 'contact.php' -->
<iframe name="my_iframe" width="1" height="1" style="border:none"></iframe>
Literally:
<form action="process.php" method="post" id="form" target="_blank">
^^^^^^^^^^^^^^^^
This will make the browser stay on the same page, even if the form is submitted.
But you will be more likely looking for AJAX instead, some Introduction.
To do that you'll need jquery ajax, see here $.post
You can do something like this (with jQuery, untested)
$(function() {
$("#form").submit(e) {
// Prevent regular form submission
e.preventDefault();
// Submit the form via AJAX
var $form = $("#form");
$.post(
$form.attr("action"),
$form.serialize(),
function() { alert("Done!"); }
);
}
}