Is it compulsory to make templates of my form and then apply it in my page
or can I simply make form action to go and validate data from another php file in wordpress directory?... although it does function completely without any errors... but a friend told me that wordpress requires templates for forms and any php???
<form action="mypageform.php" method="post" name="myForm" onSubmit="validateForm()">
Name
<input name="fullname" type="text" value="" />
Age
<input name="age" type="text" value="" />
Email-ID
<input name="email" type="text" value="" />
<input name="submit" type="submit" value="Submit" />
</form>
<script type="text/javascript">// <![CDATA[
function validateForm()
{
var x=document.forms["myForm"]["fullname"].value;
if (x==null || x=="")
{
alert("Name must be filled out");
return false;
}
var x=document.forms["myForm"]["age"].value;
if (x==null || x=="")
{
alert("Age must be filled out");
return false;
}
var x=document.forms["myForm"]["email"].value;
var atpos=x.indexOf("#");
var dotpos=x.lastIndexOf(".");
if (atpos<1 || dotpos<atpos+2 || dotpos+2>=x.length)
{
alert("Not a valid e-mail address");
return false;
}
}
// ]]></script>
To use code(HTML/javascript) within word press visual/text editor is not suggestable as it might strip code.Go through given URL,
http://codex.wordpress.org/Writing_Code_in_Your_Posts
https://codex.wordpress.org/Using_Javascript
It is better to create word press separate template where you can build your own form include validation javascript in seperate template's PHP file within wordpress directory.
Related
I have a multiple field input and I want to remember the input values after submitting it , how can I do that using php or maybe another language if it is possible?
I have this input:
<input type="text" name="passport[]" class="form-control" aria-describedby="basic-addon1"required/>
I have tried something like this :
value="<?php if(isset($_POST['passport'])) { echo $_POST['passport'][$i]; } ?>"
but nothing works.
You can use browser local storage to keep the value after form submission.
<form method="post" action="" onSubmit="return saveElement();">
<input type="text" name="passport[]" id="password"/>
<input type="submit" name="submit" value="save"/>
</form>
<script type="text/javascript">
document.getElementById("password").value = localStorage.getItem("password");
function saveElement() {
var passValue = document.getElementById("password").value;
if (passValue == "") {
alert("Please enter a password first!");
return false;
}
localStorage.setItem("password", passValue);
location.reload();
return false;
}
</script>
I am using a form to submit email and name to the user. After submitting the form email triggered and success message displaying. Success message fade-out after 10 seconds i.e. fine. Now I want to download a pdf also after fadeout success message.
I am achieving this via action.
I am using below code:
<form class="brochure brochure_1" method="post" id="custom_contact_form" action="http://example.com/contact/index/contact" onsubmit="return validateForm();" name="myForm">
<div class="input-box">
<input type="hidden" readonly="readonly" class="input-text required-entry toname" value="" name="toname"/>
<input type="hidden" value="<?php echo $this->getFromUrl(); ?>" name="submiturl" class="submiturl" />
</div>
<input type="text" class="input-text required-entry" value="" name="name" placeholder="Name"/>
<input type="text" class="input-text required-entry" value="" name="email" placeholder="Email"/>
<span><input type="submit" value="Download" /></span>
</form>
<script>
function validateForm() {
var name = document.forms["myForm"]["name"].value;
if (name == "") {
alert("Name must be filled out");
return false;
}
var email = document.forms["myForm"]["email"].value;
var atpos = email.indexOf("#");
var dotpos = email.lastIndexOf(".");
if (email == "") {
alert("Email must be filled out");
return false;
}
else if (atpos<1 || dotpos<atpos+2 || dotpos+2>=x.length) {
alert("Not a valid e-mail address");
return false;
}
}
jQuery('.success-msg').insertBefore(jQuery( ".breadcrumbs" ));
jQuery(document).ready(function(){
setTimeout(function() {
jQuery('.success-msg').fadeOut('fast');
}, 10000); // <-- time in milliseconds
});
</script>
Replace the document ready like this,
jQuery(document).ready(function(){
setTimeout(function() {
jQuery('.success-msg').fadeOut('fast');
}, 10000); // <-- time in milliseconds
window.location.href = href; //causes the browser to refresh and load the requested url, Put the url to download pdf here.
});
i have this small javascript to check if the email is valid, i check client side, couse its not 100% important that the mail is valid, and i dont want to re-direct the user just to check.
The issue is that the popup does apear, but the users values are still inserted
<script>
function popup()
{
var email = document.getElementById("email").value;
var atpos=email.indexOf("#");
var dotpos=email.lastIndexOf(".");
if (document.getElementById("email").value == "") {
alert("Enter an email");
return false;
}
else if (atpos<1 || dotpos<atpos+2 || dotpos+2>=email.length) {
alert("The email is not valid");
return false;
}
else
window.location = "email.php";
return true;
}
</script>
and here is the HTML form
<form action="email.php" accept-charset="UTF-8" class="signup_form" id="signup_form" method="post">
<input class="txt accent-color colorize_border-color required" id="email" name="email" placeholder="Indtast E-mail her" data-label-text="Email" type="email">
<input class="submit button big btn" id="submit_button" name="submit" value="Deltag nu!" onclick="return popup()" type="submit">
</form>
if i remove "type submit" it works, but i dont get the values with $_POST on the next page, they are null.
Any way to get around this?
Canonical
window.onload=function() {
document.getElementById(("signup_form").onsubmit=function() {
var email = document.getElementById("email").value;
var atpos=email.indexOf("#");
var dotpos=email.lastIndexOf(".");
if (document.getElementById("email").value == "") {
alert("Enter an email");
return false;
}
if (atpos<1 || dotpos<atpos+2 || dotpos+2>=email.length) {
alert("The email is not valid");
return false;
}
return true;
}
}
using
<form action="email.php" accept-charset="UTF-8" class="signup_form" id="signup_form" method="post">
<input class="txt accent-color colorize_border-color required" id="email" name="email" placeholder="Indtast E-mail her" data-label-text="Email" type="email">
<input class="submit button big btn" id="submit_button" name="submit" value="Deltag nu!" type="submit">
</form>
i want to validate my form.I have a form validation javascript code in my code igniter view but it is not working and still sending values to next page without any validation.Could you tell me where I am making mistake and why this is happening?
Code:
<form method="get" action="/calculator/stage_two" name="calculate" id="calculate" onsubmit="return validateForm();">
<div class="calc_instruction">
<input type="text" name="property_number" placeholder="No/Name" id = "property_number" class="stage_one_box" />
<input type="text" name="postcode" placeholder="Postcode" id = "postcode" class="stage_one_box" />
</div>
<input type = "image" name = "submit_calculator" id = "submit_calculator" value="Go" src = "/images/next_button.png" />
</form>
Javascript function:
<script type="text/javascript">
function validateForm() {
var postcode=document.forms["calculate"]["postcode"].value;
if (postcode==null || postcode=="") {
alert("Please enter the postcode to give you more accurate results");
document.forms["calculate"]["postcode"].focus();
return false;
}
</script>
You are missing an end bracket. Any error in the validation code will return a non-false value and allow the submission
Here is a canonical way using forms access:
<form method="get" action="/calculator/stage_two" name="calculate"
id="calculate" onsubmit="return validateForm(this);">
<div class="calc_instruction">
<input type="text" name="property_number" placeholder="No/Name" id = "property_number" class="stage_one_box" />
<input type="text" name="postcode" placeholder="Postcode"
id = "postcode" class="stage_one_box" />
</div>
<input type = "image" name = "submit_calculator" id="submit_calculator" src="/images/next_button.png" />
</form>
<script type="text/javascript">
function validateForm(theForm) {
var postcode=theForm.postcode;
if (postcode.value=="") { // cannot be null or undefined if value="" on field
alert("Please enter the postcode to give you more accurate results");
postcode.focus();
return false;
}
return true; // allow submit
}
</script>
It seems like you are missing the closing braces "}" at the end of the function.
<script type="text/javascript">
function validateForm() {
var postcode=document.forms["calculate"]["postcode"].value;
if (postcode==null || postcode=="")
{
alert("Please enter the postcode to give you more accurate results");
document.forms["calculate"]["postcode"].focus();
return false;
}
} // <-- here
</script>
Please Add end braces for function
<script type="text/javascript">
function validateForm()
{
var postcode=document.forms["calculate"]["postcode"].value;
if (postcode==null || postcode=="")
{
alert("Please enter the postcode to give you more accurate results");
document.forms["calculate"]["postcode"].focus();
return false;
}
}
</script>
in your javascript function closing brace is missing
Please use this
in your javascript closing brace is missing
<script type="text/javascript">
function validateForm()
{
var postcode=document.forms["calculate"]["postcode"].value;
if (postcode==null || postcode=="")
{
alert("Please enter the postcode to give you more accurate results");
document.forms["calculate"]["postcode"].focus();
return false;
}
}
</script>
Try simply this line
var postcode=document.getElementById("postcode").value;
instead of
var postcode=document.forms["calculate"]["postcode"].value;
and
postcode==undefined
instead of
postcode==null
and for function validateForm() { you are missing the closing }
Try insert debugger here and try go throw method
<script type="text/javascript">
function validateForm() {
debugger;
var postcode=document.forms["calculate"]["postcode"].value;
if (postcode==null || postcode=="")
{
alert("Please enter the postcode to give you more accurate results");
document.forms["calculate"]["postcode"].focus();
return false;
}
In the code you posted, you are missing a closing brace for your validateForm() function, so assuming that's your actual code, what's happening is that you get a JavaScript error on submit, which causes the browser to just post the form.
I am trying to pass a value from javascript to php using POST method but it is not working .Here is the code:
<head>
<script type="text/javascript">
function Email()
{
var e=prompt("Your Email","");
if(e==null||e=="")
{
alert("You need to enter an email..Try again");
Email();
}
return e;
}
function Code()
{
var f=prompt("Activation code","");
if(f==null||f=="")
{
alert("You need to enter the code..Try again");
Code();
}
return f;
}
</script>
</head>
<body>
<form method="post">
<input type="hidden" id="Email" name="Email" />
<input type="hidden" id="Code" name="Code" />
</form>
<script>
var email=Email();
var code=Code();
document.getElementByID("Email").value=email;
document.getElementByID("Code").value=code;
</script>
<?php
$email=$_POST["Email"];
$code=$_POST["Code"];
echo $email.$code;
?>
</body>
I get these errors :
Notice: Undefined index: Email
Notice: Undefined index: Code
Anybody please help me out...
Okey if you want to print those values you need to create a form form them, a proper one. If you just want to submit form no need for JS there because if you just want to submit some values there is no need for form, you want to use jQuery Post for that.
<form method="post" action="">
<label for="email">Email</label>
<input type="text" name="email" />
<label for="code">Code</label>
<input type="text" name="code" />
<input type="submit" value="Submit" />
</form>
Fiddle: here
Edit
Then this is what you want. (Note that this code is using jQuery library)
$(function(){
// Create both variables
var code, email;
// Ask for code and check if it's not null or empty
do{
code = prompt('Activation code', null);
}
while(code == null || code == '');
// Ask for email and check if it's not null or empty
do{
email = prompt('Your email', null);
}
while(email == null || email == '');
// Make POST request via AJAX to your script
$.post('yourscript.php', { code: code, email: email }, function(data) {
// If success alert response (in your case should be "email.data" values)
alert(data);
});
});