I'm creating a "Event Form" where people should be able to sign-up for comming events.
I added two fields for email. One for them to write their email in and the second one to confirm the email.
I want them to write it twice to ensure that we are getting the right email.
When the email in field 2 (Bekräfta Email) is wrong they should get an error message.
But it seems like I'm doing something wrong with the code.
This is the HTML-Code:
<script type="text/javascript">
function openTerms(id) {
var terms = {"1":"Med detta villkor godkännes att Svenska Bostadsfonden Management AB får använda min personliga information så som,namn, telefonnummer, mail, arbetstitel, arbetsplats, postadress och besöksadress i syfte att...... I enlighet med GDPR och lagen och samtycke.......","2":"Terms of conditions bla bla bla","3":null,"4":null,"5":null,"6":null,"7":null};
var preview = window.open("", "", "height=700,width=800,scrollbars=yes,resizable=yes,toolbar=no,status=no,menu=no,titlebar=no,location=no,addressbar=no");
var html="<head><meta charset=\"UTF-8\"><style>body {margin: 0; padding: 20px;color: #333;font-family: Helvetica;font-size: 14px;}</style></head><body>" + terms[id] + "</body>";
preview.document.write(html);
}
</script>
<form id="up-form" name="form_8311ud1507fd3ad2e43278424bca0e4adc3bd" action="https://power.upsales.com/api/external/formSubmit" method="POST">
<div>
<label>Jag vill beställa</label>
<br>
<label><input type="checkbox" value="Aktuellt faktablad" name="Extra.1547544176421"> Aktuellt faktablad </label>
<label><input type="checkbox" value="Aktuell broschyr" name="Extra.1547544176421"> Aktuell broschyr </label>
</div>
<div>
<label>Jag vill beställa i egenskap av</label>
<br>
<select name="Extra.1547544378077">
<option></option>
<option value="Befintlig kund">Befintlig kund</option>
<option value="Intresserad investerare">Intresserad investerare</option>
<option value="Finansiell rådgivare">Finansiell rådgivare</option>
<option value="Media/analytiker">Media/analytiker</option>
<option value="Annat">Annat</option>
</select>
</div>
<div>
<label>Namn *</label>
<br>
<input maxlength="512" type="text" name="Contact.name" required="required">
</div>
<div class="email">
<label>Email *</label>
<br>
<input maxlength="512" type="email" id="up-email-input" autocomplete="off" name="Contact.email" required="required">
</div>
<div>
<label>Bekräfta Email *</label>
<br>
<input maxlength="512" type="text" name="Extra.1547643200666" required="required">
</div>
<div>
<label>Telefon *</label>
<br>
<input maxlength="512" type="text" id="up-client-name-input" name="Client.name" required="required">
</div>
<div>
<label>Postadress *</label>
<br>
<input maxlength="512" type="text" name="Extra.1547544152076" required="required">
</div>
<!-- REQUIRED FIELDS -->
<input type="hidden" name="formCid" value="8311">
<input type="hidden" name="formId" value="8311ud1507fd3ad2e43278424bca0e4adc3bd">
<input type="hidden" name="isFrame" value="false">
<input type="text" value="" name="validation" style="display: none;">
<!-- END OF REQUIRED FIELDS -->
<button type="submit">Skicka</button>
</form>
<script src="https://img.upsales.com/2XybO6NW9Y+uyQU9cm4CLw==/be.js"></script>
I added the following to the code:
<div class="email">
<label>Email *</label>
<br>
<input maxlength="512" type="email" id="up-email-input" autocomplete="off" name="Contact.email" required="required">
</div>
<div>
<label>Bekräfta Email *</label>
<br>
<input maxlength="512" type="text" name="Extra.1547643200666" required="required">
</div>
if (trim($fv->txt_Bekräfta Email) != $fv->txt_Email) {
$e->defineError("invalid_email", "Your Email address do not match", "txt_Bekräfta Email");
Seems like the following sequence does not work:
if (trim($fv->txt_Bekräfta Email) != $fv->txt_Email) {
$e->defineError("invalid_email", "Your Email address do not match", "txt_Bekräfta Email");
Related
hello after the form is completed a blankpage with php insertion are shown but instead id like to be redirect to another page
<body>
<div class="main-block">
<form action="insertion.php" method="GET">
<div class="title">
<i class="fas fa-pencil-alt"></i>
<h2>Vos informations</h2>
</div>
<div class="info">
<input class="fname" type="text" required value="" name="prenom" placeholder="Prenom" />
<input class="lname" type="text" required value="" name="nom" placeholder="Nom" />
<input type="text" name="email" required value="" placeholder="Email" />
<input type="text" name="telephone" required value="" placeholder="Numéro de téléphone" />
<input type="password" name="mot_de_passe" required value="" placeholder="Mot de passe" />
</div>
<div class="checkbox"><input type="checkbox" name="checkbox" onclick="reset_msg();" /><span>Les informations sont exactes</span></div>
<div id="msg"></div>
<button type="submit" value="send" id="bouton" onclick="return send();" href="/">Envoyez</button>
</form>
</div>
</body>
Since the action is sent to insertion.php, you should do redirection in that file. You can accomplish that by setting header location after your insertion process. For example:
<?php
// YOUR INSERTION CODE HERE
// ...
// ...
header('Location: ' . $redirectURL);
exit();
?>
I have to do some operations if I select the specific input in the form f1...
So I need to compare and check which input is clicked and use ajax to display the typed text into the second form with the help of name in jquery. But I don't know how .
Please help me how to select an element inside a form using its respective name...
I have attached the code for further clarification.
<!DOCTYPE html>
<head>
<title>Ajax Revision</title>
<link rel="stylesheet" href="CSS1.css">
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script type="text/javascript" src="JS1.js">
</script>
</head>
<body>
<h1>
Enter Your details :
</h1>
<form name="f1" action="Servlet2" on>
<p>
<label>First name : </label>
<input type="text" name="fname2">
</p>
<p>
<label>Last name : </label>
<input type="password" name="lname2">
</p>
<p>
<label>Date of birth : </label>
<input type="date" name="dob2">
</p>
<p>
<label>Blood group : </label>
<input type="text" name="blood2">
</p>
<p>
<label>Email : </label>
<input type="text" name="email2">
</p>
<p>
<label>City : </label>
<input type="text" name="city2">
</p>
<p>
<label>State : </label>
<input type="text" name="state2">
</p>
<p>
<label></label>
<input style="width: 100px" type="submit" value="signup">
</p>
</form>
<h1>Entered details : </h1>
<form name="f2">
<p>
<label>First name : </label>
<input type="text" name="fname1" readonly>
</p>
<p>
<label>Last name : </label>
<input type="password" name="lname1" readonly>
</p>
<p>
<label>Date of birth : </label>
<input type="text" name="dob1" readonly>
</p>
<p>
<label>Blood group : </label>
<input type="text" name="blood1" readonly>
</p>
<p>
<label>Email : </label>
<input type="text" name="email1" readonly>
</p>
<p>
<label>City : </label>
<input type="text" name="city1" readonly>
</p>
<p>
<label>State : </label>
<input type="text" name="state1" readonly>
</p>
</form>
</body>
Try this script, I think that is what you are asking.
Using the keyup event I identify in which element you are writing from form one and I copy it to form element two replacing the last character of the attribute name of theinput(for example fname2 by fname1) to get form element two.
<script>
$(document).on('keyup',function(e) {
var inputF2 = e.target.name;
inputF2=inputF2.replace(/2$/,"1")
$('input[name="'+inputF2+'"]')[0].value = $('input[name="'+e.target.name+'"]')[0].value;
});
</script>
<!DOCTYPE html>
<head>
<title>Ajax Revision</title>
<link rel="stylesheet" href="CSS1.css">
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
$(document).on('keyup',function(e) {
var inputF2 = e.target.name;
inputF2=inputF2.replace(/2$/,"1")
$('input[name="'+inputF2+'"]')[0].value = $('input[name="'+e.target.name+'"]')[0].value;
});
</script>
<script type="text/javascript" src="JS1.js">
</script>
</head>
<body>
<h1>
Enter Your details :
</h1>
<form name="f1" action="Servlet2" on>
<p>
<label>First name : </label>
<input type="text" name="fname2">
</p>
<p>
<label>Last name : </label>
<input type="password" name="lname2">
</p>
<p>
<label>Date of birth : </label>
<input type="date" name="dob2">
</p>
<p>
<label>Blood group : </label>
<input type="text" name="blood2">
</p>
<p>
<label>Email : </label>
<input type="text" name="email2">
</p>
<p>
<label>City : </label>
<input type="text" name="city2">
</p>
<p>
<label>State : </label>
<input type="text" name="state2">
</p>
<p>
<label></label>
<input style="width: 100px" type="submit" value="signup">
</p>
</form>
<h1>Entered details : </h1>
<form name="f2">
<p>
<label>First name : </label>
<input type="text" name="fname1" readonly>
</p>
<p>
<label>Last name : </label>
<input type="password" name="lname1" readonly>
</p>
<p>
<label>Date of birth : </label>
<input type="text" name="dob1" readonly>
</p>
<p>
<label>Blood group : </label>
<input type="text" name="blood1" readonly>
</p>
<p>
<label>Email : </label>
<input type="text" name="email1" readonly>
</p>
<p>
<label>City : </label>
<input type="text" name="city1" readonly>
</p>
<p>
<label>State : </label>
<input type="text" name="state1" readonly>
</p>
</form>
</body>
I have one html page (index.html) I am trying to link to another page (createprofile.html) using a button on the index page. I've tried onclick and using href, but when I click the button, and error appears on a blank white page that says Cannot GET /action_page.php?.
I've tried several ways to link these but it's simply not working...
Here is the index.html with the button I am trying to link (signupbtn).
<!DOCTYPE html>
<html>
<head>
<link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">
`enter code here`<link rel="stylesheet" href="page.css">
</head>
<body>
<form action="action_page.php" style="border:1px solid #ccc">
<div class="container">
<h1>Welcome to Mission Connect!</h1>
<p>Please create an account.</p>
<hr>
<label for="email"><b>Email</b></label> <br>
<input type="text" placeholder="Email Address" name="email" required>
<br>
<br>
<label for="password"><b>Password</b></label> <br>
<input type="password" placeholder="New Password" name="password" required>
<br>
<br>
<label for="password"><b>Repeat Password</b></label>
<input type="password" placeholder="Re-enter New Password" name="password-repeat" required>
<p>By creating an account you agree to our Terms & Privacy. </p>
<div class="clearfix">
<button type="button" class="cancelbtn">Cancel</button>
<a href="createprofile.html"><button type="submit" class="signupbtn">Create My Account</button>
</a>
</div>
</div>
</form>
</body></html>
And this is the html page (createprofile.html) I'm trying to link it to.
<!DOCTYPE html>
<html>
<head>
<link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">
<link rel="stylesheet" href="page.css">
<h1>Welcome to Your Mission Connect Profile. </h1>
<br>
Select Profile Picture:
<br>
<br>
<form action="/action_page.php">
<input type="file" name="pic" accept="image/*">
<input type="submit">
</form>
<br>
<br>
<form>
First Name:<br>
<input type="text" name="firstname">
<br>
<br>
Last Name:<br>
<input type="text" name="lastname">
<br>
<br>
Gender:
<br>
<input type="radio" name="gender" value="male" checked> Male<br>
<input type="radio" name="gender" value="female"> Female<br>
<br>
Location:<br>
<input type="text" name="location">
<br>
<br>
Home Congregation:<br>
<input type="text" name="homecongregation">
<br>
<br>
Status:
<br>
<input type="radio" name="status" value="Preparing" checked> Preparing (Pre-Missionary)<br>
<input type="radio" name="status" value="InTheField"> In the Field ( (Current Missionary)<br>
<input type="radio" name="status" value="Supporting"> Supporting (Missionary Supporter)<br>
<br>
<br>
Language(s):<br>
<textarea name="message" rows="10" cols="70">
</textarea>
<br>
<br>
Location(s) of Interest:<br>
<textarea name="message" rows="10" cols="70">
</textarea>
<br>
<br>
Duration:
<br>
<input type="radio" name="duration" value="shortterm" checked>
Short- Term<br>
<input type="radio" name="duration" value="longterm"> Long-Term<br>
<input type="radio" name="duration" value="undecided"> Undecided<br>
<br>
<br>
Why are you interested in missions?:<br>
<textarea name="message" rows="10" cols="70">
</textarea>
<br>
<br>
Describe your past missions experience(s):<br>
<textarea name="message" rows="10" cols="70">
</textarea>
</form>
How can I make these two pages link?
your form action is /action_page.php where is your action_page.php ? just remove to form action action_page.php if you don't have any form action.
If you're using HTML:
<form action="action_page.php"
The same thing would go with JSON but I wouldn't recommend.
If you want a button with a hyperlink for <form action:
Stack Overflow
Preview:
Stack Overflow
Try using these methods.
Folks:
I am trying the HTML exercises to build a dating website as
https://www.coursera.org/learn/html-css-javascript/peer/biy2Z/dating-web-site-assessment
1) the labels "Email", "Mobile", and "Address" in the "Your contact information" are not in the same line as their corresponding input element. What may be the problem in the code that caused this?
2) The same issue for in the "Method to contact you: Email Whatsapp In-app chat", the "In-app chat" is put in the second line.
below is the code:
fieldset {
background:lightyellow;
border:10px solid yellow;
margin-bottom:10px;
width:720px;
}
label {
width:180px;
display:inline-block;
text-align:right;
vertical-align:top;
}
.widthclass{ width:auto; }
.rangeLow, .rangeHigh{
text-align:center;
width:40px;
display:inline-block;
vertical-align:top;
color:white;
}
.rangeLow{ background-color:red;}
.rangeHigh{background-color:blue;}
.textareaFormat{width:360px; height:50px;}
label:hover{font-size:20px}
input: hover{font-size:20px}
<FORM action="http://ihome.ust.hk/~rossiter/cgi-
bin/show_everything.php " method="post"
enctype="multipart/form-data" >
<h1>
Please Enter Your Details For Our Dating Websites!
</h1>
<fieldset>
<legend> Your face </legend>
<label for="yourimage"> Your image </label>
<input type="file" id="yourimage" name="avatar"
required>
<br>
<label for="imagePreview" > Image preview:</label><img
src="" id="preview">
</fieldset>
<fieldset>
<legend> Your General Details </legend>
<label for="tname"> Name: </label>
<input type="text" id="tname" name="tname"
placeholder="Your Full Name" required>
<br>
<label for="gender" > Gender: </label>
<input type="radio" name="malegender" id="male" required
>
<label for="male" class=widthclass> Male </label>
<input type="radio" name="femalegender" id="female"
required>
<label for="female" class=widthclass > Female </label>
<br>
<label for="age" >Age: </label>
<input type="number" id="age" name="age" required>
<br>
<label for="birthday"> Date of birth: </label> <input
type="date" name="birthday" id="birthday" required>
<br>
<label for="favoriteColor"> Favorite color: </label>
<input type="color" name="color" id="color">
<br>
<label for="whichCountry"> Which country: </label>
<select name="country">
<option></option>
<option value="noSelection"> no selection </option>
<option value="u.s." > United States </option>
<option value="france"> France </option>
<option value="germany"> Germany </option>
<option value="england"> England </option>
<option value="china"> China </option>
<option value="japan"> Japan </option>
</select>
</fieldset>
<fieldset>
<lengend>Your indicators</lengend>
<br>
<label for="height" > Height:</label>
<div class="rangeLow"> Short </div>
<input type="range" min="0" max="100" step="5"
name="height id=height" >
<div class="rangeHigh"> Tall </div>
<br>
<label for="salary" > Salary:</label>
<div class="rangeLow"> Poor </div>
<input type="range" min="0" max="100" step="5"
name="height" id=salary" >
<div class="rangeHigh"> Rich </div>
</fieldset>
<fieldset>
<lengend>Your contact information</lengend>
<br>
<label for="email" > Email: <label> <input type="email"
id="email" name="email" required>
<br>
<label for="mobile"> Mobile: </label>
<input type="tel" id="mobile" name="mobile" >
<br>
<label for="address" > Address </label>
<textarea rows="3" cols="60" id="address"
name="address"class="textareaFormat">
</textarea>
<br>
<label for="contact_method"> Method to contact you:
</label>
<input type="checkbox" name="contactmethod"
value="email" id="checkboxemail">
<label for="checkboxemail" class="widthclass"> Email
</label>
<input type="checkbox" name="contactmethod"
value="Whatsapp" >
<label for="checkboxwhatsapp" class="widthclass" >
Whatsapp </label>
<input type="checkbox" name="contactmethod"
value="inappchat" >
<label for="checkboxinappchat" class="widthclass" >
In-app chat </label>
</fieldset>
<input type="submit" value=Submit" >
</FORM>
<script
src="https://www.cse.ust.hk/~rossiter/dating_web_site.js
"></script>
You did not close label tag for email by mistake so it is open to the end of document as an inline block:
Wrong:
<label for="email" > Email: <label>
correct:
<label for="email" > Email: </label>
Your code is full of errors.
For example you have this multiple label openings...
<label for="email" > Email: <label> <input type="email"
id="email" name="email" required>
<br>
<label for="mobile"> Mobile: </label>
...and you don't close it anywhere.
Also you have something like this:
<input type="range" min="0" max="100" step="5"
name="height id=height" > <!-- it should be name="height" id="height" -->
Here is fixed code https://jsfiddle.net/3cxgb00g/
Try to use markup validators and advanced text editors which will show errors in your code.
I am using Cimy User Extra Fields plugin for extra fields in Wordpress registration but I would like to make it in two columns so users would not scroll since now I have to many fields. I have problem in how to implement it in code. When I am editing via Inspect element it looks like this
<form name="registerform" id="registerform" action="http://test.com/wp-login.php?action=register" method="post" style="
position: absolute;
margin-left: -200px;
">
<div style="float:left;width: 350px;" ;=""><p>
<label for="user_login">Username<br>
<input type="text" name="user_login" id="user_login" class="input" value="" size="20"></label>
</p>
<p>
<label for="user_email">E-mail<br>
<input type="text" name="user_email" id="user_email" class="input" value="" size="25"></label>
</p>
<!--
Start code from Cimy User Extra Fields 2.5.1
Copyright (c) 2006-2013 Marco Cimmino
http://www.marcocimmino.net/cimy-wordpress-plugins/cimy-user-extra-fields/
-->
<input type="hidden" name="cimy_post" value="1">
<p id="cimy_uef_wp_p_field_1">
<label for="cimy_uef_wp_1">Password</label><input type="password" name="cimy_uef_wp_PASSWORD" id="cimy_uef_wp_1" class="cimy_uef_input_27" value="" maxlength="100">
</p>
<p id="cimy_uef_wp_p_field_2">
<label for="cimy_uef_wp_2">Password confirmation</label><input type="password" name="cimy_uef_wp_PASSWORD2" id="cimy_uef_wp_2" class="cimy_uef_input_27" value="" maxlength="100">
</p></div>
<div style="float:right;width: 350px;padding-left: 30px;" ;="">
<p id="cimy_uef_wp_p_field_3">
<label for="cimy_uef_wp_3">First name</label><input type="text" name="cimy_uef_wp_FIRSTNAME" id="cimy_uef_wp_3" class="cimy_uef_input_27" value="" maxlength="100">
</p>
<p id="cimy_uef_wp_p_field_4">
<label for="cimy_uef_wp_4">Last name</label><input type="text" name="cimy_uef_wp_LASTNAME" id="cimy_uef_wp_4" class="cimy_uef_input_27" value="" maxlength="100">
</p>
<p id="cimy_uef_p_field_1">
<label for="cimy_uef_1">Company</label><input type="text" name="cimy_uef_COMPANY" id="cimy_uef_1" class="cimy_uef_input_27" value="" maxlength="100">
</p>
<p id="cimy_uef_p_field_2">
<label for="cimy_uef_2">Industry </label><select name="cimy_uef_INDUSTRY" id="cimy_uef_2" class="cimy_uef_input_27">
<option value="Consulting">Consulting</option>
<option value="Events and PR">Events and PR</option>
<option value="Other industries">Other industries</option></select>
</p>
<br>
<!--
End of code from Cimy User Extra Fields
-->
</div>
<p id="reg_passmail">A password will be e-mailed to you.</p>
<br class="clear">
<input type="hidden" name="redirect_to" value="">
<p class="submit"><input type="submit" name="wp-submit" id="wp-submit" class="button button-primary button-large" value="Register"></p>
</form>
NOTE: I would like first div to open before user_login to close after cimy_uef_wp_p_field_2
Is there any way to make something like this since user_login is default wp-login.php field and cimy_uef_wp_p_field_2 is Cimy User Extra Fields plugin field