<?php if(count($_POST)>0) {
header("Location:sweetalertbutton2.php?update=success");} ?>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.5.1.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<form id="form1" name="frmUser" control="" class="form-group" action="" method="post">
<button><input type="submit" name="lupushilang" value="Sahkan" class="btn sahkan" id="submit"> </button>
</form>
<script src="https://cdn.jsdelivr.net/npm/sweetalert2#8"></script>
<script type="text/javascript">
$('.sahkan').on('click', function (event) {
event.preventDefault();
Swal.fire({
title: 'are you sure?',
text: "This book will be delete.",
type: 'warning',
showCancelButton: true,
cancelButtonColor:'#d33',
cancelButtonText: "Tidak",
confirmButtonColor:'#3085d6',
confirmButtonText: 'Teruskan',
}).then((result) => {
if (result.isConfirmed) {
form.submit();
}
})
});
</script>
hello, senior StackOverflow. in new in world coding. so I try to pop up submit button and run the process after I click submit button. but it immediately runs the top PHP code. please help me senior so I can learn form StackOverflow senior . Thank you senior
Related
Any simple way to implement semantic-ui form validation with google recaptcha if the recaptcha field is checked or empty?
To expand on Arpit's answer:
Here's a non-Angular solution that worked for me
Custom validation rule above your fields validation:
$.fn.form.settings.rules.recaptchaValidate = function() {
return (recaptchaVerified);
};
Add this to your validation:
recaptcha: {
identifier: 'recaptcha',
rules: [
{
type: 'recaptchaValidate',
prompt: 'Please complete reCaptcha validation.'
}
]
}
and your HTML:
<div class="required field">
<div class="g-recaptcha" data-sitekey="{your key here}" data-callback="correctCaptcha"></div>
<input type="hidden" name="recaptcha" id="recaptch-validation">
</div>
[ ... then this just before closing body tag ... ]
<script type="text/javascript">
var recaptchaVerified = false;
var correctCaptcha = function(response) {
recaptchaVerified = true;
};
var expiredCaptcha = function() {
recaptchaVerified = false;
};
</script>
use below validation for Google reCaptcha validation.
Script:
$(document).ready(function () {
$('.ui.form').form({
recaptcha: {
identifier: 'g-recaptcha-response',
rules: [
{
type: 'empty',
prompt: 'Please complete reCaptcha validation.'
}
]
}
},
{
onSuccess: function (event, fields) {
console.log('Success:', fields);
return false;
//event.preventDefault();
},
onFailure: function (error) {
console.log('Failure',error);
return false;
}
});
});
HTML:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Self Registration Module</title>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<script src="../../Content/Scripts/jquery.min.js"></script> <!-- version 3.0.0 ->
<script src="../../Content/semantic/semantic.min.js"></script>
<link href="../../Content/semantic/semantic.min.css" type="text/css" rel="stylesheet" class="ui" />
<script src="https://www.google.com/recaptcha/api.js?onload=vcRecaptchaApiLoaded&render=explicit" async defer></script>
</head>
<body ng-app="registrationApp">
<div class="ui container" lang="en"
<div class="ui attached message">
<div class="header">
Registation Form
</div>
<p>Fill out the form below to register user in rev</p>
</div>
<form class="ui form attached segment">
<div class="field">
<div vc-recaptcha
key="'6Lf4ax0UAAAAADWkffMAXBsFzx2dgkMMnqvw4tIE'"
ng-model="RecaptchaResponse">
</div>
</div>
</div>
</form>
</div>
</body>
</html>
Notes : I tired all questions and answers related this topic.
I use form tag then work completely fine. See Code Here .
I want to "place" a drop zone in my div tag, but somehow it doesn't work. See the code here.
Snippet Example Below.
Dropzone.autoDiscover = false;
$("#mydropzone").dropzone({
//url: "/file/post",
addRemoveLinks: true,
maxFilesize: 0.5,
dictDefaultMessage: '<span class="text-center"><span class="font-lg visible-xs-block visible-sm-block visible-lg-block"><span class="font-lg"><i class="fa fa-caret-right text-danger"></i> Drop files <span class="font-xs">to upload</span></span><span>  <h4 class="display-inline"> (Or Click)</h4></span>',
dictResponseError: 'Error uploading file!'
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/dropzone/4.3.0/dropzone.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/dropzone/4.3.0/dropzone.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/dropzone/4.3.0/basic.css" rel="stylesheet"/>
<div class="clsbox-1" runat="server">
<div class="dropzone clsbox" id="mydropzone">
</div>
</div>
After a long research I have finally got the best solution.
HTML
<div class="clsbox-1" runat="server" >
div class="dropzone clsbox" id="mydropzone">
</div>
</div>
JavaScript
Dropzone.autoDiscover = false;
// Dropzone class:
var myDropzone = new Dropzone("div#mydropzone", { url: "/file/post"});
// If you use jQuery, you can use the jQuery plugin Dropzone ships with:
$("div#myDrop").dropzone({ url: "/file/post" });
JSFiddle Demo Here
I have searched this forum for answers and have tried different suggestions that worked for others but did not work for me - including adding the site address to the whitelist in config.xml.
I am working on developing a web app using HTML5, CSS and JavaScript with Cordova 3.5.0-0.2.6 and jQuery Mobile 1.4.3 for the UI. I am using a multi-page JQM page model with the need to make ajax request to submit forms to a server.
Testing the code on localhost works fine but when I build on Android platform in Cordova, the request is not even sent at all as I get the alert message I wrote for when the request is not sent ("Could not connect!").
The code is supposed to use the JSON object returned from the server to display the next page. My codes are as shown below:
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" href="jquery.mobile.theme-1.4.3.min.css" />
<link rel="stylesheet" href="jquery.mobile-1.4.3.min.css" />
<script type="text/javascript" src="jquery-1.11.1.min.js"></script>
<script type="text/javascript">
$(document).on("pageinit", function(){
$.mobile.allowCrossDomainPages = true;
$.support.cors = true;
});
</script>
<script type="text/javascript" src="jquery.mobile-1.4.3.min.js"></script>
<script type="text/javascript" src="cordova.js"></script>
</head>
<body>
<div data-role="page" id="login">
<script>
$(document).bind('mobileinit', '#login', function(){
$(function() {
$("#loginSubmit").on("click", function(e) {
e.preventDefault();
$.ajax({
url: "http://url-address.php",
type: "POST",
cache: false,
dataType: "json",
data: $("#loginForm").serialize(),
success: function(result){
if(result.status == "true")
{
alert('Login Successful! ' + result.user);
$.mobile.changePage("#play");
}
else if(result.status=="false")
{
alert('could not login');
}
},
error: function(){
alert('Could not connect!');
}
});
});
return false;
});
});
</script>
</div>
<div data-role="header">
<h1>App Login</h1>
</div>
<div role="main" class="ui-content">
<h4>New account? Sign Up now!</h4><hr>
<form id="loginForm">
<label for="text-basic">Email:</label>
<input type="text" name="email" id="email" value="">
<label for="text-basic">Password:</label>
<input type="password" name="password" id="password" value="">
<br>
<button type="submit" id="loginSubmit">Submit</button>
</form>
<strong>Forgot Password?</strong>
</div>
<div data-role="footer">
</div>
</div>
<!----------------- SECOND PAGE ---------------------->
<div data-role="page" id="plan">
<script>
$(document).on('pagebeforeshow', '#plan' ,function() {
//e.preventDefault();
$('#gamebuttons').empty();
$.ajax({
url: 'http://url-address.php',
dataType: 'json',
Cache: false,
success: function(data) {
$.each(data, function(i,item) {
$('#gamebuttons').append('<button type="button" class="ui-btn ui-btn-inline" name="plannumber" id="gamepanelbutton" value="'+item+'">' + item + '</button>');
});
$('#gamebuttons').refresh();
},
error: function(){
$('#gamebuttons').append('error importing data');
}
});
});
$(document).on("pageshow", "#plan", function(){
$(function(){
$("#playSubmit").on("click", function(e) {
e.preventDefault();
$.ajax({
url: "http://url-address.php",
data: $("#play").serialize(),
type: "POST",
cache: false,
dataType: "json",
data: {"am": am, "rl": rl},
//data: {action: 'login', formData: $('#submitForm').serialize()},
success: function(result){
if(result.status == "true") {
alert(result.message);
//$.mobile.changePage("#play");
} else if(result.status=="false") {
alert(result.message);
}
},
error: function() {
alert('Could not send play request: Error executing request!');
}
});
});
return false;
});
});
</script>
<div data-role="header">
<h1>Main page</h1>
Options
Help
</div>
<div role="main" class="ui-content">
<p>
</p>
<form id="play">
<!---the other form elements go here-->
<p>
<button type="submit" class="ui-btn ui-shadow" id="playSubmit">Play</button>
</p>
</form>
</div>
<div data-role="footer">
</div>
</div>
</body>
</html>
You should clean up your code and take care about indentation. I edited your first post with good indent. You will see that there is a that should not be here in your code, before the <div data-role="header"> of your 1st page:
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" href="jquery.mobile.theme-1.4.3.min.css" />
<link rel="stylesheet" href="jquery.mobile-1.4.3.min.css" />
<script type="text/javascript" src="jquery-1.11.1.min.js"></script>
<script type="text/javascript">
$(document).on("pageinit", function(){
$.mobile.allowCrossDomainPages = true;
$.support.cors = true;
});
</script>
<script type="text/javascript" src="jquery.mobile-1.4.3.min.js"></script>
<script type="text/javascript" src="cordova.js"></script>
</head>
<body>
<div data-role="page" id="login">
<script>
$(document).bind('mobileinit', '#login', function(){
$(function() {
$("#loginSubmit").on("click", function(e) {
e.preventDefault();
$.ajax({
url: "http://url-address.php",
type: "POST",
cache: false,
dataType: "json",
data: $("#loginForm").serialize(),
success: function(result){
if(result.status == "true")
{
alert('Login Successful! ' + result.user);
$.mobile.changePage("#play");
}
else if(result.status=="false")
{
alert('could not login');
}
},
error: function(){
alert('Could not connect!');
}
});
});
return false;
});
});
</script>
<div data-role="header">
<h1>App Login</h1>
</div>
<div role="main" class="ui-content">
<h4>New account? Sign Up now!</h4><hr>
<form id="loginForm">
<label for="text-basic">Email:</label>
<input type="text" name="email" id="email" value="">
<label for="text-basic">Password:</label>
<input type="password" name="password" id="password" value="">
<br>
<button type="submit" id="loginSubmit">Submit</button>
</form>
<strong>Forgot Password?</strong>
</div>
<div data-role="footer">
</div>
</div>
<!----------------- SECOND PAGE ---------------------->
<div data-role="page" id="plan">
<script>
$(document).on('pagebeforeshow', '#plan' ,function() {
//e.preventDefault();
$('#gamebuttons').empty();
$.ajax({
url: 'http://url-address.php',
dataType: 'json',
Cache: false,
success: function(data) {
$.each(data, function(i,item) {
$('#gamebuttons').append('<button type="button" class="ui-btn ui-btn-inline" name="plannumber" id="gamepanelbutton" value="'+item+'">' + item + '</button>');
});
$('#gamebuttons').refresh();
},
error: function(){
$('#gamebuttons').append('error importing data');
}
});
});
$(document).on("pageshow", "#plan", function(){
$(function(){
$("#playSubmit").on("click", function(e) {
e.preventDefault();
$.ajax({
url: "http://url-address.php",
data: $("#play").serialize(),
type: "POST",
cache: false,
dataType: "json",
data: {"am": am, "rl": rl},
//data: {action: 'login', formData: $('#submitForm').serialize()},
success: function(result){
if(result.status == "true") {
alert(result.message);
//$.mobile.changePage("#play");
} else if(result.status=="false") {
alert(result.message);
}
},
error: function() {
alert('Could not send play request: Error executing request!');
}
});
});
return false;
});
});
</script>
<div data-role="header">
<h1>Main page</h1>
Options
Help
</div>
<div role="main" class="ui-content">
<p>
</p>
<form id="play">
<!---the other form elements go here-->
<p>
<button type="submit" class="ui-btn ui-shadow" id="playSubmit">Play</button>
</p>
</form>
</div>
<div data-role="footer">
</div>
</div>
</body>
</html>
For your request problem, have you changed the URL to map the real server mapping?
I can't make heads or tails of this and am wondering if you could help! When I click on the button, nothing happens. Ideally, I would like the form to validate before submission and to prevent submission if it doesn't validate.
<script type="text/javascript" src="../assets/js/validate/jquery.validate.min.js">
</script>
<script type="text/javascript" src="../assets/js/validate/jquery.validate.more.js">
</script>
<script type="text/javascript" language="javascript">
var J = jQuery.noConflict();
J(document).ready(function(){
J("form#nameform").validate({
rules: {
"name": {
required: true,
format: true},
},
submitHandler: function() {
J.ajax({
type: "POST",
url: "process.php",
data: J("form#nameform").serialize(),
success: function(html) {
J('form#nameform').html('hello');
}
});
};
});
});
</script>
<div id="name">
<form id="nameform" method="post">
<input id="name" class="text" name="name" size="20" type="text">
<input type="submit" value="go" />
</form>
</div>
A lot of tutorial to make Jquery Form valitation, they show how to make ajax validation too :)
<script type="text/javascript">
$(document).ready(function ()
{
$('.date').datepicker
({
dateFormat: 'mm/dd/yyyy',
showStatus: true
}
});
});
</script>
<div>
Date: <input type="text" id="datepicker"/>
</div>
<div>
#Html.TextBox("toDate", Model.toDate.ToString("dd/MM/yyyy"), new { #class = "date" })
</div>
The above is cshtml page.. I am clueless why the date that i click on the datepicker wont show up on the texbox/input .. Can you help?
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>WeeklyReport</title>
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE8" />
<link href="//Content/Site.css" rel="stylesheet" type="text/css" />
<script src="//Scripts/jquery-1.4.4.min.js" type="text/javascript"></script>
<script src="//Scripts/jquery-ui.min.js" type="text/javascript"></script>
<script src="//Scripts/jquery.validate.min.js" type="text/javascript"></script>
<script src="//Scripts/jquery.validate.unobtrusive.min.js" type="text/javascript"></script>
<script src="//Scripts/jquery.infieldlabel.min.js" type="text/javascript"></script>
</head>
<body>
</div>
<div class="content">
<div class="topSpacer">
</div>
<div class="maincontent">
<script type="text/javascript">
$(document).ready(function () {
$('.date').datepicker
({
dateFormat: 'mm/dd/yyyy',
showStatus: true,
highlightWeek: true,
showAnim: "scale",
firstDay: 6,
showOptions: {
origin: ["top", "left"]},
onSelect: function() {
}
});
});
$(function() {
$("#datepicker").datepicker();
});
</script>
<div>
Enter search criteria
</div>
<div style="float: left">
<p>Date: <input type="text" id="datepicker"/></p>
</div>
<div style="float: left; padding-left: 30px">
<input class="date" id="toDate" name="toDate" type="text" value="15/12/2011" /> 
EndDate
</div>
</div>
</div>
</body>
</html>
`
What is this mess? What are you asking? In your question you didn't show how your code look like so we can only be guessing here. Normally when you ask a question you should show precisely how your code looks.
So here's a guess I can make to improve your code with a working example:
View:
#model AppName.Models.SomeViewModel
<script src="#Url.Content("~/Scripts/jquery-ui.min.js")" type="text/javascript"></script>
<script src="#Url.Content("~/Scripts/jquery.validate.min.js")" type="text/javascript"></script>
<script src="#Url.Content("~/Scripts/jquery.validate.unobtrusive.min.js")" type="text/javascript"></script>
<script type="text/javascript">
$(function () {
$('.date').datepicker({
showStatus: true,
highlightWeek: true,
showAnim: 'scale',
firstDay: 6,
showOptions: {
origin: [ 'top', 'left' ]
},
onSelect: function () {
}
});
$('#datepicker').datepicker();
});
</script>
<div>
Date: <input type="text" id="datepicker"/>
</div>
<div>
#Html.TextBox(
"toDate",
Model.toDate.ToString("dd/MM/yyyy"),
new { #class = "date" }
)
</div>