I have a form:
<form method="post" action="insert.php">
<input type="text" name="firstname" placeholder="Vorname" required>
<br>
<input type="text" name="lastname" placeholder="Nachname" required>
<br>
<input type="text" name="nickname" placeholder="Spitzname" required>
<br>
<input type="email" name="email" placeholder="Email" required>
<br>
<input type="submit" value="Speichern">
</form>
As you can see my action is action="insert.php" so that calls my insert.php. A new url is created and it is opened in the browser.
But what if i dont want that? I want to stay on the same site where the form is and i would prefer not to call any php directly. i would prefer to call a javascript function. For example, my select i do with ajax:
function getData() {
$.ajax({
url: "queries.php",
data: {action: "retrieve_data"},
dataType: "json",
type: "post",
success: function(output) {
// do stuff
}
});
}
Can i also do something like that with the insert?
<html>
<body>
<form method="post" action="insert.php" id="insertForm">
<input type="text" name="firstname" placeholder="Vorname" required>
<br>
<input type="text" name="lastname" placeholder="Nachname" required>
<br>
<input type="text" name="nickname" placeholder="Spitzname" required>
<br>
<input type="email" name="email" placeholder="Email" required>
<br>
<input type="button" id="insertData" value="Speichern">
</form>
<script type="text/javascript" src="lib/js/jquery-2-1-3.min.js"></script>
<script type="text/javascript">
$(function () {
$('#insertData').click({ inputs:$('#insertForm :input') }, getData);
});
function getData(o) {
var values = {};
o.data.inputs.each(function() {
values[this.name] = $(this).val();
});
$.ajax({
url: "queries.php",
data: {action: "retrieve_data", firstname: values['firstname'], lastname: values['lastname'], nickname: values['nickname'], email: values['email']},
dataType: "json",
type: "post",
success: function(output) {
// do stuff
}
});
}
</script>
</body>
</html>
Here you go, you can always edit is as you want, or what values are optional and such.
Remember i've used a type="button" so the page doesn't reload, so the action could just stay empty.
Since you seem to be using jQuery, this is easy; as explained in the documentation. If you give your form id=insertForm this should work:
$("#insertForm").submit(function(e){
$.ajax({
url: "/insert.php",
type: "post",
data: $(this).serialize();
});
e.preventDefault();
});
Related
I having 3 textbox and I want to send value enter over there to controller method
<input class="form-control" type="text" id="id" name="id">
<input class="form-control" type="text" id="id1" name="id1">
<input class="form-control" type="text" id="id2" name="id2">
#Html.ActionLink("Send", "MethodNameInController", "ColtrollerName", new { id= $('#id').val(),
id1= $('#id1').val(), id2= $('#id2').val()})
and in controller
public ActionResult MethodNameInController(int id, string id1, string id2)
{
//some text here
}
but it's sending null value
If you want to stay on the same view or redirect to another url after, instead of using #Html.ActionLink() try passing the values to the controller using an ajax call.
function submitAjax(){
//purely for readability
var id = $('#id').val();
var id1 = $('#id1').val();
var id2 = $('#id2').val();
//ajax call
$.ajax({
url: "/ControllerName/MethodNameInController",
data: { id: id, id1: id1, id2: id2 },
success: function (result) {
//handle something here
}
});
};
<input class="form-control" type="text" id="id" name="id">
<input class="form-control" type="text" id="id1" name="id1">
<input class="form-control" type="text" id="id2" name="id2">
<button type="button" onclick="submitAjax()">submit</button>
If the method does some processing and then returns you to a different view, you could do a form submit.
function submitForm(){
var $form = $("#idForm");
//optional validation
$form.submit();
};
<form id="idForm" class="form-horizontal" asp-controller="ControllerName" asp-action="MethodNameInController" >
<input class="form-control" type="text" id="id" name="id">
<input class="form-control" type="text" id="id1" name="id1">
<input class="form-control" type="text" id="id2" name="id2">
<!-- type="button" prevents the from from submitting so you can do validation checks in the js -->
<button type="button" onclick="submitForm()">submit</button>
</form>
I got the solution using ajax just want to know is there any direct solution
$(function () {
$('#receipt').unbind('click');
$('#receipt').on('click', function () {
$.ajax({
url: "/Controller/Method",
type: 'POST',
contentType: "application/json; charset=utf-8",
dataType: 'json',
data: JSON.stringify({
fromDate: $("#fromDate").val(),
toDate: $("#toDate").val(),
id: $("#id").val()
}),
async: false
});
});
});
I'm using a Google Form's value to integrate with my website where I want to submit the form and store data in google sheet as form responses. I'm using AJAX to redirect to another page instead of google form submit page. But whenever I'm trying to submit it's redirecting to my page accurately but datas are not saved in google sheet. Here are my codes,
<strong>Full Name</strong>
<input type="text" name="Fullname" class="form-control" id="Fullname" />
<strong>Email Address</strong>
<input type="text" name="Email" class="form-control" id="Email" />
<strong>Subject</strong>
<input type="text" name="Subject" class="form-control" id="Subject" />
<strong>Details</strong>
<textarea name="Details" rows="8" cols="0" class="form-control" id="Details"></textarea><br />
<button type="button" id="btnSubmit" class="btn btn-info" onclick="postContactToGoogle()">Submit</button>
<script type="text/javascript" src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
<script>
function postContactToGoogle() {
var email = $('#Email').val();
var fullname = $('#FullName').val();
var subject = $('#Subject').val();
var details = $('#Details').val();
$.ajax({
url: "https://docs.google.com/forms/d/abcdefgh1234567xyz/formResponse",
data: {
"entry_805356472": fullname,
"entry_1998295708": email, "entry_785075795":
subject, "entry_934055676": details
},
type: "POST",
dataType: "xml",
statusCode: {
0: function () {
window.location.replace("Success.html");
},
200: function () {
window.location.replace("Success.html");
}
}
});
}
</script>
How can I save the data in google sheet? Am I missing something in my code? Need this help badly? Thanks.
You can directly copy the form from google view form page like shown in the demo, and then do the following changes in the AJAX call as shown below.
And now once you submit data it is visible in google forms, view responses.
$(function(){
$('input:submit').on('click', function(e){
e.preventDefault();
$.ajax({
url: "https://docs.google.com/forms/d/18icZ41Cx3-n1iW7yTOZdiDx9a6mySWHOy9ryd1l59tM/formResponse",
data:$('form').serialize(),
type: "POST",
dataType: "xml",
crossDomain: true,
success: function(data){
//window.location.replace("youraddress");
//console.log(data);
},
error: function(data){
//console.log(data);
}
});
});
});
<div class="ss-form"><form action="https://docs.google.com/forms/d/18icZ41Cx3-n1iW7yTOZdiDx9a6mySWHOy9ryd1l59tM/formResponse" method="POST" id="ss-form" target="_self" onsubmit=""><ol role="list" class="ss-question-list" style="padding-left: 0">
<div class="ss-form-question errorbox-good" role="listitem">
<div dir="auto" class="ss-item ss-text"><div class="ss-form-entry">
<label class="ss-q-item-label" for="entry_1635584241"><div class="ss-q-title">What's your name
</div>
<div class="ss-q-help ss-secondary-text" dir="auto"></div></label>
<input type="text" name="entry.1635584241" value="" class="ss-q-short" id="entry_1635584241" dir="auto" aria-label="What's your name " title="">
<div class="error-message" id="1979924055_errorMessage"></div>
<div class="required-message">This is a required question</div>
</div></div></div>
<input type="hidden" name="draftResponse" value="[,,"182895015706156721"]
">
<input type="hidden" name="pageHistory" value="0">
<input type="hidden" name="fvv" value="0">
<input type="hidden" name="fbzx" value="182895015706156721">
<div class="ss-item ss-navigate"><table id="navigation-table"><tbody><tr><td class="ss-form-entry goog-inline-block" id="navigation-buttons" dir="ltr">
<input type="submit" name="submit" value="Submit" id="ss-submit" class="jfk-button jfk-button-action ">
</td>
</tr></tbody></table></div></ol></form></div>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
If you go to your form on Google and click on 'View Live Form', and then view source on the form, you'll see that the fields you want to upload have aname in the form entry.12345678; the id is in the form entry_12345678. You need to use the name value. Try this:
<script>
function postContactToGoogle() {
var email = $('#Email').val();
var fullname = $('#FullName').val();
var subject = $('#Subject').val();
var details = $('#Details').val();
$.ajax({
url: "https://docs.google.com/forms/d/abcdefgh1234567xyz/formResponse",
data: {
"entry.805356472": fullname,
"entry.1998295708": email,
"entry.785075795": subject,
"entry.934055676": details
},
type: "POST",
dataType: "xml",
statusCode: {
0: function () {
window.location.replace("Success.html");
},
200: function () {
window.location.replace("Success.html");
}
}
});
}
</script>
My code is working in chrome,safari but its not working in firefox.
Here is my code
<script>
$(document).ready(function () {
$("#loginform").on('submit',(function(e) {
e.preventDefault();
$('#loading').html("Loading....");
$.ajax({
url: "login.php",
type: "POST",
data: new FormData(this),
contentType:false,
cache: false,
processData:false,
async:false,
success: function(data)
{
$('#loading').hide();
$("#message").html(data);
}
});
return false;
}));
});
</script>
Can anyone solve this issue??? I have one more same script in the same page only url is different but its working fine,but this script is not working .Iam getting empty data .But in chrome,safari its working fine.
My Html Code :
<form role="form" method="post" id="loginform" action="">
<div class="form-group">
<label for="username">Username</label>
<input type="text" class="form-control" id="username" name="username" placeholder="Enter Username" required>
</div>
<div class="form-group">
<label for="password"> Password</label>
<input type="password" class="form-control" id="password" name="password" placeholder="Enter password">
</div>
<div class="checkbox">
<label><input type="checkbox" value="" name="user_rememberme" checked>Remember me</label>
</div>
<div id="loading"></div>
<div id="message"></div>
<button type="submit" name="login" class="btn btn-success pull-right">Login</button>
</form>
Never use async:false in ajax call unless you knows specifically wat you are doing.The problem is that async:false freezes the browser until ajax call is complete (either error or success).set it to true or remove it (by default it is true).Implement error block too and check if its an error from server side
success: function(data)
{
$('#loading').hide();
$("#message").html(data);
},error:function(data){
console.log(data)
}
Try this:
<script>
$(document).ready(function () {
$("#loginform").on('submit',(function(e) {
dta = $(this).serialize();
e.preventDefault();
$('#loading').html("Loading....");
$.ajax({
url: "login.php",
type: "POST",
data:dta,
success: function(data)
{
$('#loading').hide();
$("#message").html(data);
}
});
return false;
}));
});
</script>
I'm trying to run a php script using ajax after a form submission.
this is the form
<form id="form" class="form">
<input id="email" type="email" required name="email" placeholder="Email" onchange="myUpdateFunction()" value="">
<textarea id="message" type="text" value="" name="message" onchange="myUpdateFunction()" required placeholder="Comments" style="border:none;border-bottom:1px solid #424242; width:530px;"></textarea>
<input id="submit" type="submit" class="submit" name="send_request" value="Submit" >
</form>
this is my script
$('.submit').on('click', function() {
$.ajax({
url: "send.php",
method:'post',
data: {'email': $('#email').val(), 'message': $('#message').val()}
}).done(function() {
alert('Message Sent.');
});
});
and this is my send.php file
<?php
if(isset($_POST['send_request'])){
//send email
}
?>
but it doens't work, the page is reloaded, the email is not sent and no "alert message" is displayed
there is no problem in php because if I delete the javascript and I add action="send.php" method="POST" as attributes in the form it works, so I think that the problem is the javascript
http://jsfiddle.net/o5xvpkmv/2/
You shouldn't use the onchange or the click event for this kind of stuff, but the submit event (preventing the default behaviour of submit button).
<form id="form" class="form">
<input id="email" type="email" name="email" placeholder="Email" required>
<textarea id="message" type="text" value="" name="message" placeholder="Comments" required></textarea>
<input id="submit" type="submit" class="submit" name="send_request" value="Submit">
</form>
$("#form").on('submit', function(e) {
e.preventDefault();
$.ajax({
url: "send.php",
method:'post',
data: $( this ).serialize()
}).done(function() {
alert('Message Sent.');
});
});
or (both ways are good)
$(document).ready(function () {
$('#submit').click(function () {
$.ajax({
url: "send.php",
method: 'post',
data: $(this).serialize()
}).done(function () {
alert('Message Sent.');
});
return false;
});
});
Also, about the backend, you should make this kind of check:
if (
isset($_POST["email"]) &&
!empty($_POST["email"]) &&
isset($_POST["message"]) &&
!empty($_POST["message"])) {
//send email
}
why does this not work?
function AjaxCall (FormName, PHPFunction) {
alert(FormName);
$.ajax({
type: "GET",
url: "webservice.php?method=" + PHPFunction,
data: $("'" + FormName + "'").serialize(),
success: function (response) {
alert(response);
},
failure: function (response) {
alert(response);
}
});
}
and this is the call from the form:
<form id="form_login" name="form_login" method="POST" onsubmit="return AjaxCall('form_login','CheckUserLogin')">
Thank you
FormName will be 'form_login', which you use as a jQuery selector which would match <form_login> elements if you weren't adding quotes to the string, but simply isn't a valid selector as you are.
Don't mess around with passing identifying strings, just pass the element itself.
onsubmit="return AjaxCall(this, ...
and
$(FormName)
This Code will work fine:
HTML Code:
<form id="form_login" name="form_login" method="POST" onsubmit="" action="">
E-Mail: <input type="text" size="30" name="email" id="email" >
Passwort: <input type="text" size="30" name="password" id="password" >
DeviceID: <input type="text" size="30" name="deviceid" id="deviceid" >
<input type="submit" value="Login" name="submit_login" />
</form>
JAVASCRIPT Code:
$(function () {
$('#form_login').on('submit', function (e) {
$.ajax({
type: 'GET',
url: 'webservice.php?method=CheckUserLogin',
data: $('#form_login').serialize(),
success: function (response) {
alert(response);
},
failure: function (response) {
alert(response);
}
});
e.preventDefault();
});
});
so, and now i change it to them:
HTML Code:
<form id="form_login" name="form_login" method="POST" onsubmit="return AjaxCall('form_login', 'CheckUserLogin')" action="">
E-Mail: <input type="text" size="30" name="email" id="email" >
Passwort: <input type="text" size="30" name="password" id="password" >
DeviceID: <input type="text" size="30" name="deviceid" id="deviceid" >
<input type="submit" value="Login" name="submit_login" />
</form>
JAVASCRIPT Code:
function AjaxCall(FormName, PHPFunction) {
$.ajax({
type: 'GET',
url: 'webservice.php?method=CheckUserLogin',
data: $('#form_login').serialize(),
success: function (response) {
alert(response);
},
failure: function (response) {
alert(response);
}
});
}
i get no request to webserice.php and i don't know why. I can see any AJAX request, i use fiddle, all i can see is:
"/projekte/werbung/login.php"