I have a form which requires 3 steps, 1 is a few details then when the user presses the "Next" button it moves on to the next step without using ajax and without checking if everything is correct.
I moved to angularJS today and would really like to get this to work.
Here is what i have.
<form id="mccheckout" method="post" action="{$smarty.server.PHP_SELF}?a=confproduct&i={$i}">
<input type="text" name="namefiled" id="namefiled" value="" required="" ng-maxlength="30" placeholder="Enter the name" ng-model="name" class="ng-valid ng-dirty">
<input type="submit">
</form>
When i press next i want to load the next step of the form if the name field is correct.
The next step should be:
<input type="text" name="namefiled" id="namefiled" value="" required="" ng-maxlength="30" placeholder="Enter the password" ng-model="password" class="ng-valid ng-dirty">
This should be in the same <form> I dont want it to be outside the form, the submit button should only check if everything is correct and then call for the next piece of the form.
Im not sure how to go about doing this and im fairly new to ajax. Should i load the form contents from the same page or an external file via ajax request?
Could you guys provide some example code on how you would do this.
Thank you for your time,
Here is one potential way of doing it:
<html lang="en">
<head>
<meta charset="utf-8">
<title>IrishGeek82 SO Help File</title>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/jquery-ui.min.js"></script>
<link href='http://fonts.googleapis.com/css?family=Roboto:400,700,300,400italic,700italic' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/themes/smoothness/jquery-ui.css" />
<script>
$(document).ready(function()
{
}
);
</script>
<style type="text/css">
.invalid
{
border:1px solid red;
}
</style>
<script type="text/javascript">
function validateStep1()
{
return true;
}
function validateStep2()
{
return true;
}
function validateStep3()
{
return true;
}
function validateStep4()
{
return false;
}
//Start at step 0
var currStep = 0;
//Each "step" refers to an element in your form that has an ID.
//We include a reference to a validation function in the JSON String
//So we can validate the field.
var steps = [{"stepName":"step1","validationMethod":validateStep1},
{"stepName":"step2","validationMethod":validateStep2},
{"stepName":"step3","validationMethod":validateStep3},
{"stepName":"step4","validationMethod":validateStep4}];
//This function runs the validation routine on the current
//step and advances to the next step on TRUE.
function validateForm(formObj)
{
console.log("Curr Step:"+currStep);
//You can perform your validation in here and only advance to the next step if you can.
//You could just as easily use anonymous functions in the JSON Object above.
if (steps[currStep].validationMethod())
{
currStep++;
if (currStep <= steps.length)
{
$("#"+steps[currStep].stepName).css("display","block");
console.log("Curr Step:"+currStep);
}
else
{
currStep--;
}
}
else
{
$("#"+steps[currStep].stepName).addClass("invalid");
}
}
</script>
</head>
<body>
<form id="someForm" name="someForm" action="#" method="get">
<input type="text" id="step1" name="step1" style="display:block;" value=""/>
<input type="text" id="step2" name="step2" style="display:none;" value=""/>
<input type="text" id="step3" name="step3" style="display:none;" value=""/>
<input type="text" id="step4" name="step4" style="display:none;" value=""/>
<hr>
<button id="navButton" onclick="validateForm('someForm');return false;">Next</button>
</form>
</body>
</html>
I created an array of ids that are elements in your form along with a function to validate each step.
The main function validateForm() looks up the validation function for the current step, runs it, and if the result is True, advances to the next step and shows the field.
Please let me know if that helps :)
action of submit: server side script.
content of form changeable with style.visibility or style.display
content of sUBMIT button changeable witout reload of document ?
it means:
document.getElementById("mccheckout").action this porperty changeable without reload of document ?
make more than 1 FORM (1 FORM per step)
if step1-form okay make step2-form visible und step1-form hidden (step3-form is hidden).
....
Related
I'm training on developing a personal web site and I'm at its very beginning.
I need to load a new web page when clicking on a button after some verification on the information entered by the user in the forms' fields.
For that, I made a JavaScript script with an auth() function (which is an easy prototype not secure at all, by the way if you know a great tutorial to make a secure web site connection using a database, I'll be grateful if you shared your knowledge with me).
The problem is: When I click on the button nothing is happening, why ?
When I tried to put the function in the html file, it's not working too, but when I take the windows.location.assign(link) out of the function it's working but it's directly redirecting and it's not what I wanted.
Here is my code
<!DOCTYPE html><html>
<link rel="stylesheet" href="style.css">
<body>
<center>
<form>
User name : <br>
<input name="user" type="text" id="user"></br>
Password : <br>
<input name="password" type="password" id="pswd"></br>
<br>
<input name="Ok" type="submit" value="Ok" onclick="auth()"><br>
</form>
</center>
<script type="text/javascript" src="id.js"></script>
</body>
</html>
and my js
function auth(){
var user = document.getElementById("user");
var pswd = document.getElementById("pswd");
var link = 'http://192.168.1.17/index.html';
if(pswd == "osef"){
window.location.assign(link);
}
return false;
}
You have two issues in your code.
You are submitting the form when you click on the button
you are not getting the values of the input.
For the first issue, use event parameter in click function like onclick="auth(event)" and then in the auth function use
event.preventDefault() to prevent the form from submit.
For the second issue you need to get the values of the input like this document.getElementById("user").value.
HTML:
<center>
<form>
User name : <br>
<input name="user" type="text" id="user"></br>
Password : <br>
<input name="password" type="password" id="pswd"></br>
<br>
<input name="Ok" type="submit" value="Ok" onclick="auth(event)"><br>
</form>
</center>
JAVASCRIPT:
function auth(){
event.preventDefault();
var user = document.getElementById("user").value;
var pswd = document.getElementById("pswd").value;
var link = 'http://192.168.1.17/index.html';
if(pswd == "osef"){
window.location.assign(link);
}
return false;
}
Hope this will solve the problem
I am trying to create something that when the script is run it reads the parameters that have been set in there.
For example loading a custom sidebar where the user can enter details or parameters to the run the script with. These parameters will remain until they are changed but shouldn't be required every time you run a script that uses these parameters.
A sort of like settings menu.
I have seen something similar in some addons that have been made can someone please point in right direction on how to go abouts doing this.
I already have the scripts running succesfully just need a UI where the parameters can be entered and set. I would like to avoid reading it from a sheet in the spreadsheet if possible.
Edit:
I see that there is a getscriptproperty available that is available to all users:
so far I have got update (2):
HTML:
function showside(){
SpreadsheetApp.getUi().showSidebar(HtmlService.createHtmlOutputFromFile('body'))
}
function setProperty(objectForm){
PropertiesService.getScriptProperties().setProperties(
{a1: objectForm.a1 ,
a2: objectForm.a2,
p1: objectForm.p1,
p2: objectForm.p3})
return 'Updated'
}
<!DOCTYPE html>
<html>
<head>
<script>
function readProperty(){
var settings = PropertiesService.getScriptProperties(), keys = settings.getKeys()
Logger.log('running')
for (var i =0;i<keys.length;i++){
document.getElementbyID(keys[i].toUpperCase()).value = settings.getProperty(keys[i])
}
}
function handleFormSubmit(objectForm){
google.script.run.setProperty(update).setProperty(objectForm)
}
function update(update){
var div = document.getElementById('output');
div.innerHTML = 'Updated!';
}
</script>
<base target="_top">
</head>
<body onload="readProperty()">
<form id="myForm" onsubmit="handleFormSubmit(this)">
a1<input type="url" id="a1" value="" />
a2<input type="url" id="a2" value="" />
a3<input type="url" id="a3" value="" />
P1<input type="text" id="P1" value="" />
P2<input type="text" id="P2" value="" />
<input type="submit" value="Submit" />
</form>
<div id="output"></div>
</body>
</html>
A rough approach; Improvise from here;
Read comments inside the loadScript();
document.getElementById("formWithData").onsubmit = loadScript();
function loadScript() {
// get data from submitted form
// this way script will re-run with data based on what u give in the form
}
<form id="formWithData">
<input type="text" placeholder ="enter condition 1">
<input type="text" placeholder ="enter condition 2">
<input type="text" placeholder ="enter condition 3">
</form>
I would like to have my code check if one or more check boxes have been selected in a list of check boxes. If no check boxes have been selected then I would like a window.alert to pop up saying "please select at least one interest". Currently all it does is alert that nothing has been checked even if you check a box.
My code is as follows:
<!DOCTYPE HTML>
<html>
<head>
<title>Web Site Registration Form</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type="text/javascript">
function confirmSubmit(){
if(document.forms[0].interests.checked) {
{window.alert("Thank you");}
} else {
{window.alert("Select at least one preference");
}
return false;}
return true;
}
</script>
</head>
<body>
<h1>Web Site Registration Form</h1>
<h2>Personal Information</h2>
<form action="FormProcessor.html" method="get"
enctype="application/x-www-form-urlencoded" onsubmit="return confirmSubmit()">
<p>Select areas of interest (select at least one)</p>
<p><input type="checkbox" name="interests"
value="entertainment">Entertainment<br />
<input type="checkbox" name="interests"
value="business">Business<br />
<input type="checkbox" name="interests"
value="music">Music<br />
<input type="checkbox" name="interests"
value="shopping">Shopping<br />
<input type="checkbox" name="interests"
value="travel">Travel</p>
<p><input type="submit"></p>
</form>
</body>
</html>
Note: The extra code in the header is there to submit all data entered to a page which shows what has been submitted. This is my first post so feel free to let me know what other information may help. Thanks!
Add your script tag below the form, you can use this to pass the form to your call back. Use querySelector for :checked to search inside the form for a checked input.
<script type="text/javascript">
function confirmSubmit(form){
if(form.querySelector(":checked")) {
window.alert("Thank you");
return true;
} else {
window.alert("Select at least one preference");
return false;
}
}
</script>
You can pass the form to your call back by updating your onclick listener;
<form action="FormProcessor.html" method="get"
enctype="application/x-www-form-urlencoded"
onsubmit="return confirmSubmit(this)">
Here is the fiddle.
With jQuery you can do this:
function confirmSubmit(){
$('input').each(function(index, item) {
if(item.checked){
return true;
}
});
}
So, I have written this form and this simple javascript to validate the user input.
The thing is, it works perfectly until I add a third function, validateHash, that takes the hashtag inputed into the textbox and checks if it has an hashtag at the beginning.
I sent the code to a friend, and he said that on his PC it works fine (Checks if the fields are filled, and then checks if the hashtag is correct), while on mine it just skips every function and submits the data to the php page without checking anything.
I am using Firefox, and he's using Chrome, but I tried even with the latter with the same results.
Is there something wrong in the code itself?
<!doctype html>
<meta charset="utf-8">
<link rel="stylesheet" href="style.css" />
<script language="JavaScript" type="text/javascript">
function validateForm() {
if(validate(document.form.song.value) && validate(document.form.hashtag.value))
if(validateHash(document.form.hashtag.value))
return true;
else
{
alert("Please fill all the fields");
return false;
}
}
function validate(text) {
if(text==null || text=="")
return false;
else
return true;
}
function validateHash(text) {
if(text.charAt(0) != "#") {
alert("Insert hashtag correctly");
return false;
}
else
return true;
}
</script>
<form action="format.php" name="form" method="post" class="basic-grey" onsubmit="return validateForm()">
<h1>Anisongs Form
<span>Fill all the text in the fields</span>
</h1>
<label>
<span>Song lyrics :</span>
<textarea id="song" name="song" placeholder="Max 120 characters" maxlength="120"></textarea>
</label>
<label>
<span>Anime hashtag :</span>
<input id="hashtag" type="text" name="hashtag" placeholder="#loghorizon" maxlength="20"/>
</label>
<span> </span>
<input type="submit" class="button" value="Submit" />
<input type="reset" class="button" value="Cancel" />
</form>
Well, the issues were the brackets. JS really fancies them, and without them even on single lines ifs it wouldn't start to work.
I am looking to create a button at the bottom of a form that will create an alert box that will show the form data entered. Form includes:
First Name
Last Name
Address 1
Address 2
City
State
Zip
Phone
Fax
Once the form is completed, the button is clicked and an alert box pops up showing the form data entered.
Does anyone know how to accomplish without the form actually being submitted or validated? There is no database for the form data to be submitted to, so there is no database to pull the information from.
Any help would be greatly appreciated.
I have not included the form code due to its length, but the current code I am working with for the Alert Box looks like this:
<script>
function display_alert()
{
alert("");
}
</script>
<body>
<input type="button" onclick="display_alert()" value="Display alert box">
</body>
If I get it right you need something like this:
<html>
<head>
<script type="text/javascript">
window.onload = function(){
document.getElementById('send').onclick = function(e){
alert(document.getElementById("name").value);
return false;
}
}
</script>
</head>
<body>
<form method="post">
<input type="text" name="name" id="name" />
<input type="submit" name="send" id="send" value="send" />
</form>
</body>
</html>
I don't really get what you mean with a database to pull the information from, but the example uses a click event to get the data from the form field and shows it in an alert without a submit.
html code:
<html>
<SCRIPT SRC="PR8_4.JS"></SCRIPT>
<body>
<form name=details>
<table>
<tr><td>ENTER FRIST NAME:<input type=text name=fname></td></tr>
<tr><td>ENTER LAST NAME:<input type=text name=lname></td></tr>
<tr><td>ENTER PHONE NUM :<input type=text name=phnum></td></tr>
</table>
<input type="button" value="Click Me" onclick="display();">
</form>
</body>
</html>
javascript code:
function display()
{
var x=document.details.fname.value;
var y=document.details.lname.value;
var z=document.details.phnum.value;
alert("FIRST NAME:"+x+" "+"LAST NAME:"+y+" "+"PHONE NUMBER:"+z);
}
To stop a form submitting you can create an onsubmit event within the tag and return false - e.g. ...form elements.... This has the benefit of working when someone submits the form by pressing the enter key as well as pressing the submit button.
Thus, to achieve what you desire you could create a function (lets call it formAlert) and call it from the onsubmit event e.g. ...form elements...
The formAlert function would look something like:
function formAlert() {
alert_string = '';
alert_string = alert_string + document.getElementById('first_name').value;
alert_string = alert_string + ' ';
alert_string = alert_string + document.getElementById('last_name').value;
alert(alert_string);
}
and this would correspond to a form looking like:
<form id="foo" onsubmit="formAlert(); return false;">
<p><label for="first_name">First Name<label><input type="text" id="first_name" value="fred" /></p>
<p><label for="last_name">Last Name<label><input type="text" id="last_name" value="blogs" /></p>
<p><input type="submit" value="click me" /></p>
</form>
Note1, this won't be a pretty modal box - it'll simply display "fred blogs" in a Javascript alert box.
Note2, if there is a Javascript error your form will still submit (although in the example here it'll submit to itself).
Here is a JS Fiddle demonstrating the above code: http://jsfiddle.net/D59su/
I think this might be what you're looking for:
<!DOCTYPE html>
<html>
<head>
<title></title>
<link rel="stylesheet" type="text/css" href="javascriptform.css">
</head>
<body>
<form name= "details"><div class="box1"><div id="a"><input type="text" name="lastname" placeholder="LAST NAME"></div><br>
<div id="b"><input type="text" name="firstname" placeholder="FIRST NAME"></div><br>
<div id="c"><input type="e-mail" name="email" placeholder="E-MAIL"></div><br>
<div id="d"><input type="password" name="password" placeholder="PASSWORD"></div><br>
<div id="sub-button"><button onclick="getdetails();">submit</button></div></form>
</div>
<script>
function getdetails()
{
var a = document.forms["details"]["lastname"].value;
var b = document.forms["details"]["firstname"].value;
var c= document.forms["details"]["email"].value;
alert("Your name is "+a+" "+b+". Your e-mail is "+c);
}
</script>
</body>
</html>
It Is Very Simple
Using .value will help.
HTML:
<form onsubmit="return myFunction()>
<input type="text" id="name>
<input type="submit" value="SEND">
Use return before your function
Javascript:
function myFunction () {var name = document.getElementById("name").value; alert("Hi " + name)}
After Submitting It Will Show As (If I Write Alex and Submit It)
Hi Alex
Hope it will work