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>
Related
I made a short and basic website and the title is showing in the page. I put the title inside head when i wrote it but it is inside body when i use the inspect tool on it. Screenshot of code editor and inspect tool on chrome
Code is below:
<head>
<tittle>Race registration form</tittle>
</head>
<body>
<h1>Race registration!</h1>
<form action="/Registration_form">
<p>
<label for="first_name">First Name</label>
<input type="text" name="first_name" id="first_name">
<label for="last_name">Last Name</label>
<input type="text" name="last_name" id="last_name">
</p>
<p>
Select a race:
</p>
<p>
<input type="radio" id="Fun Run 5K" name="Race" value="Fun Run 5K">
<label for="Fun Run 5K">Fun Run 5K</label>
</p>
<p>
<input type="radio" id="Half Marathon" name="Race" value="Half Marathon">
<label for="Half Marathon">Half Marathon</label>
</p>
<p>
<input type="radio" id="Full Marathon" name="Race" value="Full Marathon">
<label for="Full Marathon">Full Marathon</label>
</p>
<label for="email">Email</label>
<input type="email" id="email" name="email">
<label for="password">Password</label>
<input tupe="password" id="password" name="password"> <br>
<p>
<button type="submit">Register!</button>
</p>
</form>
</body>
</html>```
You have a typo: tittle has an extra t there, and needs to be title.
Because <tittle /> is not a valid tag that belongs to head area, it's bleeding into body. Fix the typo, and it'd go away.
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");
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.
I'm working on a basic scoring unit. I have text boxes and want the user to only instert numbers in a certain set, and if a number that is outside the set gets entered an error comes up saying 'only these numbers can be entered'. There are multiple sets of numbers though. Is it possible to have more than one? here is my code:
<!DOCTYPE html>
<html>
<body>
<p align="right"> Dance Number: <input type="text"size="3"></p>
<h1><ins>Judge 1</ins></h1>
<p> Comments</p>
<textarea name="myTextBox" cols="50" rows="5">
</textarea>
<br />
<form>
<p> Technique: <input type="text"size="3"> /35</p>
<p> Choreography: <input type="text"size="3"> /15</p>
<p> Performance: <input type="text"size="3"> /25</p>
<p> Precision: <input type="text"size="3"> /15</p>
<p> Total Points: <input type="text"size="3"> /90</p>
<h1><ins>Judge 2</ins></h1>
<p> Comments</p>
<textarea name="myTextBox" cols="50" rows="5">
</textarea>
<br />
</form>
<form>
<p> Technique: <input type="text"size="3"> /35</p>
<p> Choreography: <input type="text"size="3"> /15</p>
<p> Performance: <input type="text"size="3"> /25</p>
<p> Precision: <input type="text"size="3"> /15</p>
<p> Total Points: <input type="text"size="3"> /90</p>
<h1><ins>Judge 3</ins></h1>
<p> Comments</p>
<textarea name="myTextBox" cols="50" rows="5">
</textarea>
<br />
</form>
<form>
<p> Technique: <input type="text"size="3"> /35</p>
<p> Choreography: <input type="text"size="3"> /15</p>
<p> Performance: <input type="text"size="3"> /25</p>
<p> Precision: <input type="text"size="3"> /15</p>
<p> Total Points: <input type="text"size="3"> /90</p>
<p> Over All Score:<input type="text"size="3"> /90</p>
<p> Award Assigned:</p>
<input type="submit" />
</form>
<script>
</script>
</body>
</html>
Technique: /35
Choreography: /15
Performance: /25
Precision: /15
There are text boxes next to the slash and number
I would use the input type number (as these are scores) and set a maximum and minimum value that will be enforced by the browser.
html
<!DOCTYPE html>
<html>
<body>
<p align="right"> Dance Number: <input type="number"size="3"></p>
<h1><ins>Judge 1</ins></h1>
<p> Comments</p>
<textarea name="myTextBox" cols="50" rows="5">
</textarea>
<br />
<form>
<p> Technique: <input type="number" min="0" max="35"> /35</p>
<p> Choreography: <input type="number" min="0" max="15"> /15</p>
<p> Performance: <input type="number" min="0" max="25"> /25</p>
<p> Precision: <input type="number" min="0" max="15"> /15</p>
<p> Total Points: <input type="number" min="0" max="90"> /90</p>
<h1><ins>Judge 2</ins></h1>
<p> Comments</p>
<textarea name="myTextBox" cols="50" rows="5">
</textarea>
<br />
</form>
<form>
<p> Technique: <input type="number" min="0" max="35"> /35</p>
<p> Choreography: <input type="number" min="0" max="15"> /15</p>
<p> Performance: <input type="number" min="0" max="25"> /25</p>
<p> Precision: <input type="number" min="0" max="15"> /15</p>
<p> Total Points: <input type="number" min="0" max="90"> /90</p>
<h1><ins>Judge 3</ins></h1>
<p> Comments</p>
<textarea name="myTextBox" cols="50" rows="5">
</textarea>
<br />
</form>
<form>
<p> Technique: <input type="number" min="0" max="35"> /35</p>
<p> Choreography: <input type="number" min="0" max="15"> /15</p>
<p> Performance: <input type="number" min="0" max="25"> /25</p>
<p> Precision: <input type="number" min="0" max="15"> /15</p>
<p> Total Points: <input type="number" min="0" max="90"> /90</p>
<p> Over All Score: <input type="number" min="0" max="90"> /90</p>
<p> Award Assigned:</p>
<input type="submit" />
</form>
<script>
</script>
</body>
</html>
Simply you can, I do not know if you can using css but using javascript you can, using on key pressed. Like following:
<!DOCTYPE html >
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>insert page</title></head>
<body onkeypress="alert("HELL")">
<textarea id='textbox1' onkeypress="countLetters(this, 15)">
</textarea>
<textarea id='textbox2' onkeypress="countLetters(this, 25)"></textarea>
<script type='text/javascript'>
var textbox1 = textbox2 = textbox3 = textbox4 = 0;
function countLetters(element, limit) {
if(element.id == 'textbox1') {
if(element.value.length > limit) {
element.disabled=true;
} else {
textbox1++;
}
} else if (element.id == 'textbox2') {
if(element.value.length > limit) {
element.disabled=true;
} else {
textbox2++;
}
}
}
</script>
</body>
</html>
I have this code:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title> </title>
<style>
.name {
width: 130px;
}
</style>
</head>
<body>
<h1> Test </h1>
<form>
<fieldset class="name">
<label for="firstName">Name</label> <input type="text" name="firstName" id="firstName" required> <br /> <br/>
<label for="last_name">Surname</label> <input type="text" name="last_name" id="last_name" required> <br /> <br/>
</fieldset>
<br />
<p>
<label for="textarea"> Free text </label> <textarea name="box_with_sizecss_and_placeholder" placeholder="Please type" id="textarea"></textarea>
</p>
<p class="range">
<label for="ran">Rank</label><br />
Easy <input type="range" id="ran" name="ran" min="1" max="8" step="1" /> Hard
</p>
<p>
<input type="submit">
</p>
</form>
</body>
</html>
I want to make the the Free text and rank go next to the fieldset name (with some space) and the button to be in the middle of the page.
How can I make it work?
For the previous code I want to make this part to be next to the fieldset:
<p>
<label for="textarea"> Free text </label> <textarea name="box_with_sizecss_and_placeholder" placeholder="Please type" id="textarea"></textarea>
</p>
<p class="range">
<label for="ran">Rank</label><br />
Easy <input type="range" id="ran" name="ran" min="1" max="8" step="1" /> Hard
</p>
And the submit button be and the middle of the page.
Thank you in advance.
I did this really easily with some searches like "Put two divs next to each other" and "Center a div".
http://pastebin.com/SLQfGpQC