i want to enter names after the display with loading gif comes prompt me to enter my age.
i want after entering my age i get redirected to url. any url like stackoverflow.com
i have updated my question to above. but still same problem
<!DOCTYPE html>
<html lang="en">
<head>
<title>title</title>
<meta charset="utf-8">
</head>
<body>
<form method="post">
<p>
<input type="text" name="myname" />
</p
<label>
<input type="submit" name="submit" value="Enter your names" />
</label>
</form>
<div style="display:none;">
<p>enter your age to enter this site</p>
<p>mr.myname</p>
<div id="spinner">
<img src="js/ajax-loader.gif" alt="Loading" /> waiting for your age to enter site
</div>
<input type="text" name="age" />
</div>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script>
$('form').submit(function() {
$('#spinner').show(); //activate spinner on submit
$.ajax({
type: 'POST',
url: 'https://localhost',
dataType: 'json',
success: function(json) {
// $('#spinner').hide(); //not necessary because of redirect
window.location.href = "http://www.wdr.de";
},
error: function(){
$('#spinner').hide();
}
return false;
});
</script>
</body>
</html>
you can do something like this:
I have updated your code. Sure, you have to set style for your spinner.
Here is also a fiddle: https://jsfiddle.net/mattopen/pkb4xs7w/41/
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<title>title</title>
</head>
<body>
<form method="post">
<p>
<input type="text" name="myname" />
</p>
<label>
<input type="submit" name="submit" value="Enter your names" />
</label>
</form>
<div style="display:none;">
<p>enter your age to enter this site</p>
<p>mr.myname</p>
<div id="spinner">
<img src="js/ajax-loader.gif" alt="Loading" /> waiting for your age to enter site
</div>
<input type="text" name="age" />
</div>
<script>
$('form').submit(function() {
$('#spinner').show(); //activate spinner
$.ajax({
type: 'POST',
url: '/your_url/submit_username',
dataType: 'json',
success: function (json) {
alert('redirect');
// $('#spinner').hide(); //not necessary because of redirect
window.location.href = "https://jsfiddle.net/";
},
error: function () {
alert('something went wrong');
$('#spinner').hide();
window.location.href = "https://jsfiddle.net/";
}
});
})
</script>
</body>
</html>
edit:
it was not clear to me if op will use ajax call and submit data to server or only want`s to check a date input and then redirect to url.
If op will make use of ajax, then '/your_url/submit_username' has to be a valid url within your application.
This approach is without the use of an ajax call.
$('input[name="submit"]').click(function(event) {
event.preventDefault();
$('#spinner').show(); //activate spinner
// here goes your code for check input
// function check(){....; return 'ok'};
// now redirect if check was ok like if(check === 'ok')
window.location.href = "https://jsfiddle.net/";
})
Related
I am not able to insert data through ajax, I want to insert it and get JSON response too.Actually at the end i want to create an API of this total code.
<?php
error_reporting(1);
mysql_connect("localhost","root","");
mysql_select_db("behindtherock");
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
</head>
<body>
<form >
<label>Country</label><br />
<input type="text" id="country" />
<br />
<label>First name</label><br />
<input type="text" id="first_name" />
<br />
<label>Last Name</label><br />
<input type="text" id="last_name" />
<br />
<input type="submit" id="save" value="post" />
</form>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#save").click(function(){
var country=$("#country").val();
var first_name=$("#first_name").val();
var last_name=$("#last_name").val();
var address_line_1=$("#address_line_1").val();
var address_line_2=$("#address_line_2").val();
var city=$("#city").val();
var state=$("#state").val();
var zip=$("#zip").val();
var user_phone=$("#user_phone").val();
var user_email=$("#user_email").val();
var u_stream=$("#u_stream").val();
var referring_member=$("#referring_member").val();
var promotion_code=$("#promotion_code").val();
$.ajax({
url:"add.php",
type:"post",
async:false,
data:{
"done":1,
"country":country,
"first_name":first_name,
"last_name":last_name,
"address_line_1":address_line_1,
"address_line_2":address_line_2,
"city":city,
"state":state,
"zip":zip,
"user_phone":user_phone,
"user_email":user_email,
"u_stream":u_stream,
"referring_member":referring_member,
"promotion_code":promotion_code,
};
success:function(data){
}
});
});
});
</script>
</body>
</html>
<?php
error_reporting(1);
include("db.php");
if(isser($_POST['done'])){
$country=mysql_escape_string($_POST['country']);
$first_name=mysql_escape_string($_POST['first_name']);
$last_name=mysql_escape_string($_POST['last_name']);
$address_line_1=mysql_escape_string($_POST['address_line_1']);
$address_line_2=(int)$_POST['address_line_2'];
$city=mysql_escape_string($_POST['city']);
$state=mysql_escape_string($_POST['state']);
$zip=mysql_escape_string($_POST['zip']);
$user_phone=mysql_escape_string($_POST['user_phone']);
$user_email=mysql_escape_string($_POST['user_email']);
$u_stream=mysql_escape_string($_POST['u_stream']);
$referring_member=mysql_escape_string($_POST['referring_member']);
$promotion_code=mysql_escape_string($_POST['promotion_code']);
mysql_query("INSERT INTO user_details(country,first_name,last_name,address_line_1,address_line_2,city,state,zip,user_phone,user_email,u_stream,referring_member,promotion_code)
VALUES ('('', '$country','$first_name','$last_name','$address_line_1','$address_line_2','$city','$state','$zip','$user_phone','$user_email','$u_stream','$referring_member','$promotion_code')')");
exit();
}
?>
I am not able to insert data through ajax, I want to insert it and get JSON response too.Actually at the end i want to create an API of this total code.
i try sample project which take some data in form in html file .. then pass it to spring service .. which return object successfully .. now i want to pass this object to another Html fie to Display
Form's Html File :
<!DOCTYPE html>
<html ng-app="phase2">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<head>
<title>Sign UP Page</title>
<script src="RigesterationController.js"></script>
</head>
<body >
<center>
<p>Enter Your User Name : <input type="text" , name="UserName" id ="UName" required /> </p>
<p>Enter Your Email : <input type="text" , name="Email" id ="email" required /> </p>
<p>Enter Your Password : <input type="password" , name="pass" id ="Pass" required/> </p>
<p>Choose Gender : <br> Male<input type="radio" name="gender" value="m" id="Gender" /> Female<input type="radio" name="gender" value="f" id="Gender"/> </p>
<p>Choose User Type :<br> Student<input type="radio" name="UserType" value="s" id="Utype" /> Teacher<input type="radio" name="UserType" value="t" id="Utype"/> </p>
<div ng-controller="SignUP">
<input type="button" name="signup" value="SignUP" ng-click="save()" />
</div>
</center>
</body>
</html>
RigesterationController.js file :
angular.module("phase2" , [])
.controller("SignUP" , function($scope , $http )
{
var dat ;
$scope.save = function() {
var email= document.getElementById("email").value;
var UName=document.getElementById("UName").value;
var Pass=document.getElementById("Pass").value;
var gender=document.getElementById("Gender").value;
var UserType=document.getElementById("Utype").value;
var Info ;
$http.get('http://localhost:8090/SignUp/'+email+'/'+UName+'/'+Pass+'/'+gender+'/'+UserType)
.then(function(response)
{
Info = response.data;
dat=Info ;
alert(dat.name) ;
window.location.href="http://localhost:8060/TheAngular_Project/StudentPage.html";
});
}
});
second Html file :
<!DOCTYPE html>
<html ng-app="phase2">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<script src="RigesterationController.js"></script>
<head>
<title>Student Page</title>
</head>
<body>
<div ng-controller="SignUP">
<p><span class="name">Welcome {{dat.name}}</p>
</div>
</body>
</html>
now nothing appeared in dat.name in second html file ..
although .. in regestrationController.js ..I test dat.name in an allert and it appeared successfuly ..
thanks in advance
i found the answer by Wawy in this post..
[AngularJS - Passing data between pages
You need to create a service to be able to share data between controllers.
app.factory('myService', function() {
var savedData = {}
function set(data) {
savedData = data;
}
function get() {
return savedData;
}
return {
set: set,
get: get
}
});
In your controller A:
myService.set(yourSharedData);
In your controller B:
$scope.desiredLocation = myService.get();
Remember to inject myService in the controllers by passing it as a parameter.
I am a novice developer of angularJs.
Working on some tutorials and facing the following problem now.
This is my view.
<!DOCTYPE html>
<html lang="en" ng-app="eventsApp">
<head>
<title>Event Registry</title>
<meta charset="utf-8"/>
<link type="text/css" rel="stylesheet" href="css/app.css"/>
<link type="text/css" rel="stylesheet" href="css/bootstrap.css"/>
</head>
<body ng-cloak>
<div id="container">
<div class="navbar">
<div class="navbar-inner">
<ul class="nav">
<li> Add Event
</ul>
</div>
</div>
<div ng-controller="EditEventController">
<div class="container">
<h1>New Event</h1>
<hr/>
<form name="editEventForm">
<fieldset>
<label for="eventname">Event Name :</label>
<input id="eventname" type="text" ng-model="event.name" placeholder="Enter your Event Name"/>
<label for="eventdate">Event Date :</label>
<input id="eventdate" type="text" ng-model="event.date" placeholder="format is (dd/mm/yy)..."/>
<label for="eventtime">Event Time : </label>
<input id="eventtime" type="text" ng-model="event.time" placeholder="Enter the start time and end time"/>
<label for="eventlocation">Event Location :</label>
<input id="eventlocation" type="text" ng-model="event.location.address" placeholder="Enter the location of the event"/>
<br/>
<input id="eventstate" type="text" class="input-small" ng-model="event.location.state" placeholder="Enter the state of the location of the event"/>
<input id="eventcountry" type="text" class="input-small" ng-model="event.location.country" placeholder="Enter the country of the location of the event"/>
<br/>
<label for="eventImageUrl">Image Url:</label>
<input id="eventImageUrl" type="url" class="input input-xlarge" ng-model="event.imageUrl" placeholder="enter the image url"/>
</fieldset>
<img ng-src="{{event.imageUrl}}" src=""/>
<br/>
<br/>
<button type="submit" class="btn btn-primary" ng-click="savestatus(event,editEventForm)">Save</button>
<button type="button" class="btn btn-default" ng-click="reset()">Cancel</button>
</form>
</div>
</div>
</div>
<script src="lib/jquery-1.9.1.min.js"></script>
<script src="lib/jquery-ui.js"></script>
<script src="lib/underscore-min.js"></script>
<script src="lib/bootstrap.min.js"></script>
<script src="lib/angular/angular.js"></script>
<script src="lib/angular/angular-sanitize.js"></script>
<script src="lib/angular/angular-resource.js"></script>
<script src="js/services/services.js"></script>
<script src="js/services/EventData.js"></script>
<script src="js/services/GravatarUrlBuilder.js"></script>
<script src="js/controllers/controllers.js"></script>
<script src="js/controllers/EventController.js"></script>
<script src="js/controllers/EditEventController.js"></script>
<script src="js/controllers/EditProfileController.js"></script>
<script src="js/app.js"></script>
<!--<script src="js/filters.js"></script>-->
</body>
</html>
and my controller is
angular.module('eventsApp.controllers').controller('EditEventController',function EditEventController($scope,eventData){
$scope.event={};
$scope.savestatus=function(event,form){
if(form.$valid){
eventData.save(event).
then(function(response){
console.log("success :",response);
},
function(response){
console.log("failure:",response);
});
};
} ;
$scope.reset=function(){
window.location='../app/EventList.html';
}
});
and the app.js file is
angular.module('eventsApp', [ 'ngSanitize' ,'eventsApp.controllers', 'eventsApp.services','ngResource'
])
and the services file i am using is:
angular.module('eventsApp.services').factory('eventData',function($resource,$q){
var resource= $resource('data/eventData/:id.json',{id:'#id'});
return{
getEventItem:function(){
var deferred=$q.defer();
resource.get({id:1},
function(eventItem){
deferred.resolve(eventItem);
},
function(response){
deferred.reject(response);
});
return deferred.promise;
} ,
save:function(event){
var deferred=$q.defer();
event.id=999;
resource.save(event,
function(response){
deferred.resolve(response);
},
function(response){
deferred.reject(response);
}
);
return deferred.promise;
}
};
}
) ;
When i am trying to save the input text details on click of the savestatus() button
I am unable to save them as a json file on the disk as shown in the tutorial I am referring to..
Whenever I have tried to save it I am getting the following error...
POST http://localhost:8000/app/data/eventData/999.json 501 (Not Implemented) angular.js:7073
failure: Object {data: "", status: 501, headers: function, config: Object}
I encountered this problem and solved my case. Here's how I did:
You have to modify your back-end (in my case: web-server.js
from angular-seed project, running with NodeJs) in order
to accept 'POST' method requests.
Then, when a POST request will be sent, you
must catch it (a simple 'if' would do the trick) and call a function
to handle it.
Finally, you have to write this function which will
catch the request data and do what you want with it (e.g. create a
JSON file and copy the data into it).
If you're also using NodeJs and maybe the web-server.js from angular-seed, here's what I've done : modified Web-server.js
Hope it will help you or someone else to avoid 501 errors!
Is there any way to stop this scrolling when user inputs data on ipad,i tried different things but does not work.
Is there any way to stop this scrolling.
here is my code
<html lang = "en">
<head>
<title>formDemo.html</title>
<meta charset = "UTF-8" />
<script>
$(document).ready(function() {
$(document).bind('touchmove', false);
});
</script>
</head>
<body>
<h1>Form Demo</h1>
<form>
<label for="name">Text Input:</label>
<input type="text" name="name" id="inputtext" onFocus="window.scrollTo(0, 0); value="" style="margin:400px 0 0 0;" />
</form>
</body>
</html>
Your question is almost answered here. You only have to combine your logic with:
$(document).bind('touchmove', false); // or true, depends you want to disable / enable
I tried following a couple of examples on the web about adding to a mysql database using ajax but it isn't posting to the database but is executing the header at the bottom of the page.
This is the html document where you input the information
edit: Thank you for all your answers, This has now been fixed.
<!DOCTYPE HTML>
<html>
<head>
<script type="text/javascript" src="message.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<link rel="stylesheet" type="text/css" href="style.css">
<title>Add a comment!</title>
</head>
<body id="bodymain">
Home
<br>
<div id="main">
<?=$blog_post_history?>
</div>
<br>
<br>
<form method="post" action="addreply.php">
<input type="hidden" name="blogid" value="<?php echo $_GET['id'] ?>">
Author: <input type="text" name="poster" size="60">
<br>
Email: <input type="text" name="email" size"60">
<br>
Comment: <textarea name='content' rows=10 cols=50 id='content'></textarea>
<input type="submit" value="send" />
</form>
</body>
</html>
This is the javascript
$(function(){
//Whenever the form submites, call this
$("form").submit(function()) {
//submit using ajax
submitMessage();
//prevent from submitting
return false;
}
};
var submitMessage = function (){
if($("#content").val().length > 0 && $("author").val.length > 0)
{
//start ajax request
$.post(
"addreply.php"
{
content: $("#message").val(),
author: $("#author").val(),
email: $("email").val(),
blogid: $("blogid").val()
},
);
}
};
And this is the php page adding to database
<?php
include("connect.php");
$add_comment_query = $db->prepare("
INSERT INTO `comments`
(`email`, `author`, `content`, `postid`)
VALUES
(:email, :author, :content, :postid)
");
$add_message_query->execute(array(
':email' => $_POST['email'],
':author'=> $_POST['author'],
':content' => $_POST['content'],
':postid' => $_POST['blogid']
));
// This calls for a '301' response code instead of '200', with a 'Location'
// sent to tell the browser where to redirect to.
header("Location: home.php");
?>
Can anyone see where I am going wrong. I am completely stumped.
$("author") and $("#author") should be $("#poster").
Also, all your <input> elements are midding id attributes. So:
<input type="text" name="poster" size="60">
should be:
<input type="text" name="poster" id="poster" size="60">
and similarly for all the other inputs.
Your selectors aren't correct.
Did you try debugging the javascript in your browser to see what the value of for instance $("#author") is?
The hash is the ID selector so you need the HTML for that element to have an id property:
<input type="text" name="poster" id="poster" size="60">
All of your other fields should be modified similarly so that each element you are going to use has an ID and each jquery selector is in the format "#" Currently author, email, and blogid have wrong selectors.
Make the HTML:
<!DOCTYPE HTML>
<html>
<head>
<script type="text/javascript" src="message.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<link rel="stylesheet" type="text/css" href="style.css">
<title>Add a comment!</title>
</head>
<body id="bodymain">
Home
<br>
<div id="main">
<?=$blog_post_history?>
</div>
<br>
<br>
<form method="post" action="addreply.php">
<input type="hidden" id="blogid" name="blogid" value="<?php echo $_GET['id'] ?>">
Author: <input type="text" name="poster" id="poster" size="60">
<br>
Email: <input type="text" name="email" id="email" size"60">
<br>
Comment: <textarea name='content' rows=10 cols=50 id='content'></textarea>
<input type="submit" value="send" />
</form>
</body>
</html>
and your jquery:
var submitMessage = function (){
if($("#content").val().length > 0 && $("#poster").val.length > 0)
{
//start ajax request
$.post(
"addreply.php"
{
content: $("#message").val(),
author: $("#poster").val(),
email: $("#email").val(),
blogid: $("#blogid").val()
},
);
}
};