I have a simple contact form on contact.php, but submitting it there is no any data into corresponding php file (mail.php).
form inside contact.php
<form id="contact" action="" method="post">
<input id="name" type="text" name="name" width="250" size="35" placeholder="Your name">
<br><br>
<input id="email" type="text" name="email" width="250" size="35" placeholder="Your mail">
<br><br>
<textarea id="message" name="message" rows="6" cols="40" placeholder="Your message"></textarea>
<br><br>
<input type="button" value=" SEND " id="submit" />
<input type="reset" value="Reset" name="reset">
</form>
js inside contact.php
$('#submit').click(function(){
$.post("mail.php", $("#contact").serialize(), function(response) {
$('#success').html(response);
});
return false;
});
mail.php
print_r( $_POST );
if((empty($_POST['name'])) || (empty($_POST['email'])) || (empty($_POST['message']))){
die("All fields must be filled !");
}
result:
Array ( ) All fields must be filled !
Working Example:
<html>
<head>
<title>Example</title>
<style type="text/css">
div { color:blue; margin:3px; cursor:pointer; }
</style>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('#submit').click(function(e){
$.post("mail.php", $("#contact").serialize(), function(response) {
$('#success').html(response);
});
return false;
});
});
</script>
</head>
<body>
<div id="success"></div>
<form name="contact" id="contact" method="post">
<?php
for($i=1;$i<=10;$i++)
{?>
Text Box <?php echo $i; ?> <input type="text" name="in<?php echo $i; ?>"/><br/><br/>
<?php
}
?>
<input type="submit" name="submit" id="submit"/>
</form>
</body>
</html>
mail.php
<?php
print_r( $_POST );
if((empty($_POST['name'])) || (empty($_POST['email'])) || (empty($_POST['message']))){
die("All fields must be filled !");
}
?>
It's work for me.
This is a.html file
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<script type="text/javascript" src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
<script type="text/javascript">
$(function(){
$('#submit').click(function(){
$.post("x.php", $("#contact").serialize(), function(response) {
$('#success').html(response);
});
});
});
</script>
</head>
<body>
<form id="contact" action="" method="post">
<input id="name" type="text" name="name" width="250" size="35" placeholder="Your name">
<br><br>
<input id="email" type="text" name="email" width="250" size="35" placeholder="Your mail">
<br><br>
<textarea id="message" name="message" rows="6" cols="40" placeholder="Your message"></textarea>
<br><br>
<input type="button" value=" SEND " id="submit" />
<input type="reset" value="Reset" name="reset">
</form>
</body>
</html>
This is x.php file
<?php
print_r( $_POST );
if((empty($_POST['name'])) || (empty($_POST['email'])) || (empty($_POST['message']))){
die("All fields must be filled !");
}
?>
Try it, will prevent your form to submit naturally:
$('#submit').click(function(e){
e.preventDefault();
});
One other change you may try is:
$("#contact").serializeArray()
Related
before submit the form text filed will be editable after submit the form it will be non-editable?
<div class="container">
<form method="POST" name="requests" id="signup">
<input type="text" id="txtTitle" name="txtTitle" placeholder="Enter Your Description" required="" value="<?php if (isset($_POST['txtTitle'])) { echo $_POST['txtTitle'];}?>" >
<button type="submit" value='Submit' class="sendButton" name="submit" id='submitme'>Submit</button>
</form>
</div>
Just use readonly.
<div class="container">
<form method="POST" name="requests" id="signup">
<input type="text" id="txtTitle" name="txtTitle" placeholder="Enter Your Description" required="" value="<?php if (isset($_POST['txtTitle'])) { echo $_POST['txtTitle'];}?>" <?php echo isset($_POST['txtTitle']) ? "readonly" : "" ?> >
<button type="submit" value='Submit' class="sendButton" name="submit" id='submitme'>Submit</button>
</form>
</div>
Try this:
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<form method="POST" name="requests" id="signup">
<input type="hidden" value="yes" name="send">
<input type="text" id="txtTitle" name="txtTitle" placeholder="Enter Your Description" required="" value="<?php if (isset($_POST['txtTitle'])) { echo $_POST['txtTitle'];}?>" <?php echo isset($_POST['txtTitle']) ? "readonly" : "" ?> >
<button type="submit" value='Submit' class="sendButton" name="submit" id='submitme'>Submit</button>
</form>
</div>
<script type="application/javascript">
$(document).ready(function(){
<?
//
echo "var send='". $_POST['send']."';";
?>
if(send=="yes"){
$('#txtTitle').attr('disabled','disabled');
};
});
</script>
I am trying to check if user change field while it is still empty.And I'm adding event listener on the username field so when the user move from one field to other then he get either a check sign or an error.
My HTML File:
<!DOCTYPE html>
<html>
<head>
<title>Registeration form</title>
<link type="text/css" rel="stylesheet" href="css/fontawesome.css"/>
</head>
<body>
<form method="post">
<fieldset>
<input type="text" name="user_name" id="user_name" style="display:inline;float:left;" placeholder="User Name">
<li id="name_status" style="list-style-type:none;"></li>
</fieldset>
<fieldset>
<input type="text" name="email" id="email" style="display:inline;float:left;" placeholder="Email Address">
<li id="email_status" style="list-style-type:none;"></li>
</fieldset>
<fieldset>
<input type="button" name="submit" id="submit" value="submit">
</fieldset>
</form>
<script type="text/javascript" src="js/test.js"></script>
</body>
</html>
My Javascript file:
var user_name=document.getElementById("user_name");
var user_name_status=document.getElementById("name_status");
user_name.addEventListener("blur",check_empty(user_name.value,user_name_status),false);
function check_empty(value,status){
if(value.length===0){
status.innerHTML="<sup>*</sup>This feild cannot be empty";
} else {
status.innerHTML="<i class='icon-check'></i>";
}
}
You are calling check_empty immediately. You can pass function reference check_empty to .addEventListener(). Within event handler, this references user_name. Instead of passing variable status, utilize the defined varibale user_name_status within event handler.
var user_name = document.getElementById("user_name");
var user_name_status = document.getElementById("name_status");
user_name.addEventListener("blur", check_empty, false);
function check_empty(e) {
if (this.value.length === 0) {
user_name_status.innerHTML = "<sup>*</sup>This feild cannot be empty";
} else {
user_name_status.innerHTML = "<i class='icon-check'>check</i>";
}
}
<!DOCTYPE html>
<html>
<head>
<title>Registeration form</title>
</head>
<body>
<form method="post">
<fieldset>
<input type="text" name="user_name" id="user_name" style="display:inline;float:left;" placeholder="User Name">
<li id="name_status" style="list-style-type:none;"></li>
</fieldset>
<fieldset>
<input type="text" name="email" id="email" style="display:inline;float:left;" placeholder="Email Address">
<li id="email_status" style="list-style-type:none;"></li>
</fieldset>
<fieldset>
<input type="button" name="submit" id="submit" value="submit">
</fieldset>
</form>
</body>
</html>
I think the best option for you is to pass the function with argument inside an anonymous function like the code below shows.
var user_name = document.getElementById("user_name");
var user_name_status = document.getElementById("name_status");
user_name.addEventListener("blur",function(){check_empty(user_name.value,user_name_status);},false);
function check_empty(name,status) {
if (name.length === 0) {
status.innerHTML = "<sup>*</sup>This feild cannot be empty";
} else {
status.innerHTML = "<i class='icon-check'>check</i>";
}
}
<!DOCTYPE html>
<html>
<head>
<title>Registeration form</title>
</head>
<body>
<form method="post">
<fieldset>
<input type="text" name="user_name" id="user_name" style="display:inline;float:left;" placeholder="User Name">
<li id="name_status" style="list-style-type:none;"></li>
</fieldset>
<fieldset>
<input type="text" name="email" id="email" style="display:inline;float:left;" placeholder="Email Address">
<li id="email_status" style="list-style-type:none;"></li>
</fieldset>
<fieldset>
<input type="button" name="submit" id="submit" value="submit">
</fieldset>
</form>
</body>
</html>
I have a form. I want to alert when the user click on save button. Then if the user clicked yes, some php code should be executed. So how can I do it. can I use onclick in input tag???
<?php if (isset($_POST['save'])){ ?>
<script language="javascript">
if (confirm('It should be reloaded, Are you sure you want to save changes?')) {
<?php $x=$_POST['myName']; ?>
}
else{
<?php $x='nothing' ?>
}
</script>
<?php }
echo $x;
?>
<form method="post" action="">
name:<input type="text" name="myName" />
city:<input type="text" name="city" />
email:<input type="email" name="email" />
<br/>
<input type="submit" name="save" value="save"/>
</form>
Change your code to
<?php
// connection
if ($_POST['t'] == 'execute'){
<?php $x=$_POST['myName']; ?>
}else{
<?php $x='nothing' ?>
}
?>
<form method="post" action="">
name:<input type="text" name="myName" />
city:<input type="text" name="city" />
email:<input type="email" name="email" />
<br/>
<input type="hidden" name="t" value="execute"/>
<input type="submit" name="save" onclick="return confirm('you message')" value="save"/>
</form>
I have a VERY simple email form (for a members-only page for a private club) to send email blasts. The code is simply:
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="../../../tinymce/jscripts/tiny_mce/tiny_mce.js"></script>
</head>
<body>
<h1>Email Blast</h1>
<form method="post">
<input type="hidden" name="from" value="blast#club.com" />
<input type="hidden" name="to" value="blast#club.com" />
<input type="hidden" name="reply" value="from#club.com" />
<input type="hidden" name="bcc" value="Tester <test#club.com>" />
<label for="subject">Subject</label><br/>
<input type="text" name="subject" id="subject" style="width: 600px" /><br/>
<label for="message">Message</label><br/>
<textarea id="message" name="message" rows="15" cols="100" class="tinymce"></textarea><br/>
<br/><input type="submit" value="Send Email" name="submit">
</form>
</body>
<script type="text/javascript">
jQuery(document).ready(function() {
tinymce.init({selector:"textarea.tinymce"});
});
</script>
For some reason the page simply isn't rendering the textarea.tinymce as I would expect, but there are no error messages in the JS Console and all the breakpoints are hit as I would expect.
What am I missing?
You should place your script tag inside the body tag, just before closing it.
If you put anything after closing your body tag, the browser will ignore it.
Look at the example below - if you place the script tag inside the body tag, it works like a charm:
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tinymce/4.2.5/tinymce.jquery.min.js"></script>
</head>
<body>
<h1>Email Blast</h1>
<form method="post">
<input type="hidden" name="from" value="blast#club.com" />
<input type="hidden" name="to" value="blast#club.com" />
<input type="hidden" name="reply" value="from#club.com" />
<input type="hidden" name="bcc" value="Tester <test#club.com>" />
<label for="subject">Subject</label><br/>
<input type="text" name="subject" id="subject" style="width: 600px" /><br/>
<label for="message">Message</label><br/>
<textarea id="message" name="message" rows="15" cols="100" class="tinymce"></textarea><br/>
<br/><input type="submit" value="Send Email" name="submit">
</form>
<script type="text/javascript">
jQuery(document).ready(function() {
tinymce.init({selector:"textarea.tinymce"});
});
</script>
</body>
</html>
I have two forms namely form1 and form2 .
First I submit form1. It goes to the form2 page. Here I need form1 details. How do I do this?
try this code
the first way with php
form1:
<html>
<head>
<title>form1</title>
</head>
<body>
<form action="form2.php" method="post">
<input type="text" name="input1">
<input type="submit">
</form>
</body>
</html>
here this form now submit to form2.php:
<?php
if(isset($_POST)){
?>
<html>
<head>
<title>form2</title>
</head>
<body>
<form action="" method="post">
<input type="text" name="input2" value="<?php echo $_POST['input1'];?>">
<input type="submit">
</form>
</body>
</html>
<?php
}
?>
so now the value of input in the form1
will be in the input value of form2
and if form1 is not submitted form2 wouldn't appear
the second way with jquery
$('#submit').click(function() {
var input1 = $('#input1').val();
$("#form1").hide();
$("#input2").val(input1);
$("#form2").show();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<html>
<head>
<title>title</title>
</head>
<body>
<form id='form1' action="form2.php" method="post">
<div>form1</div>
<input id='input1' type="text" name="input1">
<input id='submit' type="button" value="submit">
</form>
<form id='form2' action="" method="post" style='display:none'>
<div>form2</div>
<input id='input2' type="text" name="input2" value="">
<input type="submit">
</form>
</body>
</html>