I am trying to create a form, after clicking on submit i should get a popup with entered values for confirmation with edit and submit buttons.
I see lots of examples but nothing is exact.
help is appreciated.
this is the code:
<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
<link rel="stylesheet" type="text/css" href="css/blitzer/jquery-ui-1.8.2.custom.css">
<script type="text/javascript" src="js/jquery-1.4.2.min.js"></script>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css">
<script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
<script>
$(document).ready(function(){
$("#list").click(function() {
var cun = $("#list").val();
$.ajax({
type: "POST",
url: "http://localhost/prakash/popup form/view.php",
data: {'data':cun},
success: function(data){
//redirect to id using response
//window.location.replace("http://yoursite.com/products/" + response);
$('.display').html(data);
}
});
});
});
</script>
<script>
$(document).ready(function(){
$("#add").click(function() {
var cun = $("#dis").val();
$.ajax({
type: "POST",
url: "http://localhost/prakash/popup form/add.php",
data: {'data':cun},
success: function(data){
//redirect to id using response
//window.location.replace("http://yoursite.com/products/" + response);
$('.display').html(data);
}
});
});
});
</script>
<script>
$(function(){
// jQuery UI Dialog
$('#dialog').dialog({
autoOpen: false,
width: 400,
modal: true,
resizable: false,
buttons: {
"Submit Form": function() {
document.testconfirmjq.submit();
},
"Cancel": function() {
$(this).dialog("close");
}
}
});
$('form#testconfirmjq').submit(function(e){
e.preventDefault();
$("p#dialog-name").html($("input#name").val());
$('#dialog').dialog('open');
});
});
</script>
</head>
<body>
<div data-role="page">
<div data-role="header">
<h1>Welcome To My Homepage</h1>
</div>
<div align="center" data-role="main" class="ui-content">
Add New
Show List
</div>
<div class="display" align="center" display="inline">
<table id="dis" border="0">
<form id="testconfirmjq" method="POST" action="insert.php">
<tr><td>Name</td><td> <input type="text" name="name" id="name"></td></tr>
<tr><td>Age</td><td><input type="text" name="age" id="datepicker-13" size="30"></td></tr>
<tr><td>City</td><td> <input type="text" name="city"></td></tr>
<tr><td><input id="button" type="submit" name="send" value="Submit"></td></tr>
</form>
</table>
You entered your Name as:
If this is correct, click Submit Form.
To edit, click Cancel.
This code may be help you
function send(){
var name = document.getElementById('name').value;
var r = confirm(name);
if (r == true) {
//apply with your function(it will be excuted)
return true;
} else {
return false;
}
return false;
}
<form action="demo.php" onsubmit="return send()">
<input type="text" id="name">
<input type="button" value="send">
</form>
Related
after the success of the ajax call by clicking on the submit button I am getting the bellow error page in the browser and I can't find any errors in the console.
This page isn’t working If the problem continues, contact the site
owner. HTTP ERROR 405
I am new to javascript, jquery, and ajax calls. So please give me suggestions for solving this error
HTML code:
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="css/index.css" />
<title>Document</title>
</head>
<body>
<div>
<h1 class="myclass">HELLO!WELCOME</h1>
</div>
<div id="maindiv">
<form id="loginform" method="post">
<div class="form-group">
<input type="number" class="form-control" id="inputphone" placeholder="Enter phone number">
</div>
<div class="form-group">
<input type="password" class="form-control" id="inputpassword" placeholder="Enter Password">
</div>
<div class="forgot-password">
forgot password
</div>
<button id="submit" class="submit-button" >Submit</button>
<!-- <input type="submit"value="Login"/>-->
</form>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="js/index.js" type="text/javascript"> </script>
</body></html>
JS code:
$('#submit').click(function () {
alert(".click() called.");
var inputphoneno = document.getElementById("inputphone").value;
var inputpassword = document.getElementById("inputpassword").value;
const jdata = {
"phonenumber": inputphoneno,
"password": inputpassword
};
try {
$.ajax({
type: "POST",
url: "http://localhost:8085/Smatr/signIn",
data: JSON.stringify(jdata),
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function (data) {
console.log(data)
alert(data);
}
});
}
catch (ex) {
alert(ex);
}
});
You should add attribute type="button" to prevent submitting form. If there is no attribute type, button behave like a submit button.
<button id="submit" type="button" class="submit-button" >Submit</button>
<form id="myForm" name="gadaj"> <input type="text" name="fname" id="fname"/>
<input type="submit" name="click" value="button"> </form> <p id="status"></p>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script>
function info()
{
document.getElementById("status").innerHTML="Message Sent";
setTimeout(function() {
$('#status').fadeOut('slow');
}, 1000);
}
$(document).ready(function(){
$(function(){
$("#myForm").submit(function(event){
event.preventDefault();
$.ajax({
method: 'POST',
url: 'submit.php',
data : $('#myForm').serialize(),
success: function (response){
{
document.forms['myForm'].reset();
info();
}
},
error: function(XMLHttpRequest, textStatus,errorThrown) {
alert("Some Error.");
}
});
});
});
});
</script>
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
</head>
<body>
<form id="myForm" name="gadaj">
<input type="text" name="fname" id="fname"/>
<input type="submit" name="click" value="button" id="klik">
</form>
<p id="status"></p>
</body>
</html>
Now it's only one time shows Message Sent. It's kind of webchat txt field and I wanna show message text every time after sent. How do this ?
I do not know Ajax. I just found it but I do not how to do any change.
Basically i find code on the internet to test and use it.
the problem is that when i reload the page, the data disappears.
what i want to happen is for the data or the value to just stay.
Thanks guys
Here is the code in index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Pass Data to PHP using AJAX without Page Load</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script
src="https://code.jquery.com/jquery-2.2.4.js" integrity="sha256-iT6Q9iMJYuQiMWNd9lDyBUStIq/8PuOW33aOqmvFpqI=" crossorigin="anonymous"></script>
</head>
<body>
<div class="container">
<h2>Enter Some Data Pass to PHP File</h2>
<div class="row">
<div class="col-md-3">
<form>
<div class="form-group">
<input type="text" id="pass_data" class=" form-control">
<input type="button" class="btn btn-success" onclick="passData();" value="Set">
<p id="message"></p>
</div>
</form>
</div>
</div>
</div>
</body>
<script type="text/javascript">
function passData() {
var name = document.getElementById("pass_data").value;
var dataString = 'pass=' + name;
if (name == '') {
alert("Please Enter the Anything");
} else {
// AJAX code to submit form.
$.ajax({
type: "POST",
url: "post.php",
data: dataString,
cache: false,
success: function(data) {
$("#message").html(data);
},
error: function(err) {
alert(err);
}
});
}
return false;
}
</script>
</html>
and here is my php code
<?php
$pass=$_POST['pass'];
echo json_encode($pass);
?>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Pass Data to PHP using AJAX without Page Load</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script
src="https://code.jquery.com/jquery-2.2.4.js"
integrity="sha256-iT6Q9iMJYuQiMWNd9lDyBUStIq/8PuOW33aOqmvFpqI=" crossorigin="anonymous"></script>
</head>
<body>
<div class="container">
<h2>Enter Some Data Pass to PHP File</h2>
<div class="row">
<div class="col-md-3">
<form>
<div class="form-group">
<input type="text" id="pass_data" class=" form-control">
<input type="button" id="success" class="btn btn-success" value="Set">
<p id="message"></p>
</div>
</form>
</div>
</div>
</div>
</body>
<script type="text/javascript">
$("#success").click(function () {
var name = document.getElementById("pass_data").value;
var dataString = 'pass=' + name;
if (name == '') {
alert("Please Enter the Anything");
} else {
// AJAX code to submit form.
$.ajax({
type: "POST",
url: "post.php",
data: dataString,
cache: false,
success: function (data) {
$("#message").html(data);
localStorage.setItem("data",data);
},
error: function (err) {
alert(err);
}
});
}
return false;
})
$(document).ready(function () {
var someVarName = localStorage.getItem("data");
console.log(someVarName)
$("#message").html(someVarName);
});
</script>
</html>
First of all i changed your js code to use more jquery syntax, as you already have included it (i trigger the on click event on the script and i don't put it in in html). After that in order not to lose your variable after refresh on ajax success i pass the value of data to localstorage, and after refresh (on document ready) i retrieve it and display it in the label.
Of course every time you put a new value and display it, it over-writes the previous one, so after refresh you display the latest value put in your input field.
I am not sure I understand what you mean but...
Before this line:
<!DOCTYPE html>
enter
<?php session_start(); ?>
In this line add
<input type="text" id="pass_data" class=" form-control" value="<?php echo $_SESSION['VAL']; ?>">
and in your php file:
<?php session_start();
$pass=$_POST['pass'];
$_SESSION['VAL'] = $pass;
echo json_encode($pass);
?>
I have created a basic chat application.
it shows the no. of users when u r logged in and u can chat to any of them .
but the problemm is that newly added chats to receiver is not displaying but its added in mysql and also displaying the messages in the sender's side.
plz help me with this....
<?php
session_start();
?>
<html>
<head>
<title>Live Table Data Edit</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
</head>
<body>
<div class="container">
<br />
<br />
<br />
<div class="table-responsive">
<h3 align="center">You Are : <?php echo $_SESSION['name']; ?></h3><br />
<div id="live_data"></div>
</div>
<div id="messages"></div>
<div class="area" style="display:none">
<textarea id="text" name="text"></textarea>
<input type="submit" id="sub" name="sub" value="Send" />
</div>
</div>
</body>
</html>
<script>
$(document).ready(function(){
function fetch_data()
{
$.ajax({
url:"select.php",
method:"POST",
success:function(data){
$('#live_data').html(data);
}
});
}
fetch_data();
$(document).on('click', '.first_name', function(){
var id=$(this).data("id1");
fetch_chat();
function fetch_chat()
{
$.ajax({
url:"fetch_chat.php",
method:"POST",
data:{id:id},
dataType:"text",
success:function(data){
$('#messages').html(data);
$("div.area").show();
}
});
}
$("#sub").off("click").on("click", function() {
var text= $("#text").val();
$.post('insert_chat.php',{id:id,msg:text},function(data){
$("#messages").append(data);
$("#text").val('');
});
});
});
});
</script>
Using modules and plugins jquery-validate.
But the plugin starts to work only after the second run of a modal window.
I can not understand why this is happening.
// Callback forms
(function(){
var app = {
init: function(){
this.setUpListeners();
},
setUpListeners: function(){
$(document).on('submit', 'form', this.submitForm);
$(document).on('keyup', 'input', this.removeError);
},
submitForm: function(e){
e.preventDefault();
var form = $(this),
btnSubmit = form.find('[type="submit"]');
if(app.validateForm(form) === false) return false;
btnSubmit.addClass('disabled');
var str = form.serialize();
$.ajax({
url: 'contacts.php',
type: 'post',
data: str
}).done(function(msg){
if(msg === "OK"){
var res = "<div class=\"alert alert-success\" role=\"alert\"> <strong>Well done!</strong> You successfully read this important alert message. </div>";
$(".fancybox").html(res);
setTimeout(function(){
$.fancybox.close();
}, 2000)
console.log('ok');
$(".fancybox").fancybox().trigger('click');
}else {
$(".fancybox").html(msg);
$(".fancybox").fancybox().trigger('click');
}
}).always(function(){
btnSubmit.removeAttr('disabled', '');
});
},
validateForm: function(form){
var inputs = form.find('input'),
valid = true;
form.validate({
invalidHandler: function(event, validator){
var errors = validator.numberOfInvalids();
if (errors) {
valid = false;
} else {
console.log('valide');
}
validator.focusInvalid();
}
});
return valid;
},
removeError: function(){
var $this = $(this),
formGroup = $this.closest('.form-group');
formGroup.removeClass('has-danger');
}
}
app.init();
})();
if($(".modalbox").length){
$(".modalbox").fancybox({
fitToView : false,
autoSize : false,
closeClick : false,
maxWidth : 502,
maxHeight : 444,
prevEffect : 'none',
nextEffect : 'none',
padding : 0,
margin : 50,
closeBtn : false,
helpers : {
overlay : {
css : {
'background' : 'rgba(0, 0, 0, 0.72)'
}
},
}
});
}
.callback-modal {
display: none;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
<script src="https://code.jquery.com/jquery-1.11.3.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/fancybox/2.1.5/jquery.fancybox.css" />
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/fancybox/2.1.5/jquery.fancybox.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.15.1/jquery.validate.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.15.1/additional-methods.js"></script>
</head>
<body>
<div class="wrap">
cb form
<div id="request" class="callback-modal">
<div class="callback-modal__inner">
<form class="callback__form" id="callbackForm">
<div class="form-row">
<input type="text" name="name" id="r-name" placeholder="Name" class="input" data-rule-required="true">
</div>
<div class="form-row">
<input type="text" name="phone" id="r-phone" placeholder="Phone" class="input" data-rule-required="true" data-rule-minlength="5">
</div>
<div class="form-row">
<input type="text" name="email" id="r-email" placeholder="E-mail" class="input" data-rule-required="true" data-rule-email="true">
</div>
<input type="submit" value="Send" class="btn btn__submit">
<div class="fancybox"></div>
</form>
</div>
</div>
</div>
</body>
</html>
This must be:
if the form does not pass validation, the submit button is disabled and not when sending data.
if a form is all right, it is submitted to.
How can fix this problem?