I would like to combine multiple get variable into single variable when the user submits data in form.
For an example, if the user gives input values like "First Name : Dave, Last Name : Smith, Family Name : Dave+Villa"
then the form gives get variable as "?fName=Dave&lName=Smith&famName=Dave+Villa"
But i need output as "?family=Dave-Smith-Dave+Villa" in a single variable.
is that possible?
Also You can use javascript.
Here it is my code,
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
</head>
<body>
<h4>Family Category</h4>
<form name="userForm" action="" method="get">
<table>
<tr><td>First Name :</td><td><input type="text" name="fName"/></td><tr>
<tr><td>Last Name :</td><td><input type="text" name="lName"/></td><tr>
<tr><td>Family Name:</td><td><input type="text" name="famName"/></td><tr>
<tr><td></td><td><input type="submit" value="Add Category"/></td><tr>
</table>
</form>
</body>
</html>
Use a hidden field input and name it name="family" and remove name from all other inputs., then we can set the value of family before we submit the form using Javascript.
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
</head>
<body>
<h4>Family Category</h4>
<form name="userForm" action="" method="get" onsubmit="setGetUrl()">
<table>
<tr><td>First Name :</td><td><input id="name" type="text" />
<input type="text" name="family" id="family" hidden></td><tr>
<tr><td>Last Name :</td><td><input id="lname" type="text" ></td><tr>
<tr><td>Family Name:</td><td><input id="famName" type="text"/></td><tr>
<tr><td></td><td><input type="submit" value="Add Category"/></td><tr>
</table>
</form>
</body>
<script>
function getValue(id) {
return document.getElementById(id).value;
}
function setGetUrl() {
var name = getValue('name');
var lname = getValue('lname');
var famName = getValue('famName');
document.getElementById('family').value = name + '-' + lname + '-' + famName;
}
</script>
</body>
</html>
We can use JavaScript to change a hidden variable in the form with name=family with the concatenated FirstName, LastName and Family.
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
</head>
<body>
<script>
function X()
{
x = document.getElementById("a").value + "-" + document.getElementById("b").value + "-" + document.getElementById("c").value;
document.getElementById("d").value = x;
}
</script>
<h4>Family Category</h4>
<form name="userForm" action="dd.php" method="get" onsubmit="return X()">
<table>
<tr><td>First Name :</td><td><input type="text" id="a"/></td><tr>
<tr><td>Last Name :</td><td><input type="text" id="b"/></td><tr>
<tr><td>Family Name:</td><td><input type="text" id="c"/></td><tr>
<tr><td></td><td><input type="hidden" id="d" name="family"/></td><tr>
<tr><td></td><td><input type="submit" value="Add Category"/></td><tr>
</table>
</form>
</body>
</html>
Then we can submit it.
Note: Here you'll find the URL as family=Dave-Smith-Dave%2BVilla
Don't worry! Use
<?php
echo $_GET["family"];
?>
and you'll see nice Dave-Smith-Dave+Villa there.
The reason of this %2B is Character + is converted to %2B in HTTP Post
Also you can find a list of URL encodings in https://www.w3schools.com/tags/ref_urlencode.asp
Related
My code is below. Trying to create a simple form for an assignment.
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Adoption Form</title>
<script>
function getInfo(){
var first =
document.forms["formInfo"]["first"].value;
var last =
document.forms["formInfo"]["last"].value;
var applicantInfo = "My first name is " + first + " My last name is " + last ".";
document.getElementById("info").innerHTML = applicantInfo;
}
</script>
</head>
<body>
<div>
<form id="formInfo" name="formInfo">
<p>My first name is <input name="first" type="text" id="first" title="first"></p>
<p> My last name is <input name="last" type="text" id="last" title="last"></p>
<p><input type="button" value="Send Information" onClick="getInfo()"></p>
</form>
</div>
<div id="info">
</div>
</body>
</html>
Whenever I press the button in the browser, nothing happens. Where am I going wrong?
There are two mistakes first it's onclick with a small c not onClick.
Second you are missing a + after last
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Adoption Form</title>
<script>
function getInfo() {
var first = document.forms["formInfo"]["first"].value;
var last = document.forms["formInfo"]["last"].value;
var applicantInfo =
"My first name is " + first + " My last name is " + last + ".";
document.getElementById("info").innerHTML = applicantInfo;
}
</script>
</head>
<body>
<div>
<form id="formInfo" name="formInfo">
<p>
My first name is
<input name="first" type="text" id="first" title="first" />
</p>
<p>
My last name is
<input name="last" type="text" id="last" title="last" />
</p>
<p>
<input type="button" value="Send Information" onclick="getInfo();" />
</p>
</form>
</div>
<div id="info"></div>
</body>
</html>
This code works, here is the JSFIDDLE
You were simply missing a concatenation operator(+) toward the end of your variable assignment.
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Adoption Form</title>
<script>
function getInfo(){
var first =
document.forms["formInfo"]["first"].value;
var last =
document.forms["formInfo"]["last"].value;
var applicantInfo = "My first name is " + first + " My last name is " + last + ".";
document.getElementById("info").innerHTML = applicantInfo;
};
</script>
</head>
<body>
<div>
<form id="formInfo" name="formInfo">
<p>My first name is <input name="first" type="text" id="first" title="first"></p>
<p> My last name is <input name="last" type="text" id="last" title="last"></p>
<p><input type="button" value="Send Information" onClick="getInfo()"></p>
</form>
</div>
<div id="info">
</div>
</body>
</html>
I need to do a simple homework where you enter two integers in two text fields of a form and then you compute the sum and you print it in a "text field (not editable)". My program seems to work but it prints the right output and immediately reload the page. I want the page to remain with the printed output if the user does not click again on "submit" button
Here is my code HTML & JS :
function updateExpr() {
var x1 = document.getElementById("n1").value;
var x2 = document.getElementById("n2").value;
var sum = +x1 + +x2;
document.getElementById("sum").innerHTML = +x1 + +x2;
}
<!DOCTYPE html>
<html>
<head>
<title>Number in a form</title>
<link href="mystyle.css" rel="stylesheet" type="text/css"/>
<script type="text/javascript" src="function.js">
</script>
</head>
<body>
<div id="mainDiv">
<H3>Insert two positive numbers</H3>
<form>
First number:<br>
<input id="n1" type="text" name="firstname"><br>
Second number:<br>
<input id="n2" type="text" name="lastname">
<BR>
<input type="submit" value="Submit" onClick="updateExpr()"/><BR><BR>
</form>
The sum is:<br>
<output id="sum" name="x" for="a b"></output>
</div>
<noscript>
Sorry: Your browser does not support or has disabled javascript
</noscript>
</body>
</html>
When form is submited, the page will be reloaded. To prevent this you should change input type attribute from submit to button.
<input type="submit" value="Submit" onClick="updateExpr()"/>
to
<input type="button" value="Submit" onClick="updateExpr()"/>
You can simply avoid server call by changing your form tag
<form onSubmit="return false">
You dont really need a form to do something like this.
Forms send values to the backend, e.g. a server.
You only want to manipulate some front-end elements like a container to have some new text inside it.
a <form> tag typically sends you to some URI with some aprameters,
this is done by the actions attribute.
<form action="addnames.php">
for example would call the addnames.php script on your server...
You dont need a server tho..look below:
function updateExpr() {
var x1 = document.getElementById("n1").value;
var x2 = document.getElementById("n2").value;
var sum =x1 +x2;
document.getElementById("sum").innerHTML = sum;
}
<h2>HTML Forms</h2>
First name:<br>
<input id="n1" type="text" name="firstname" value="Mickey">
<br>
Last name:<br>
<input id="n2" type="text" name="lastname" value="Mouse">
<br><br>
<button type="submit" onclick="updateExpr()">Submit</button>
<div id="sum">
</div>
<script>
</script>
I would recommand you to add onSubmit method to the form instead of onclick to the input.
Also you better add a return : false to your function and add onsubmit="return updateExpr()".
function updateExpr() {
var x1 = document.getElementById("n1").value;
var x2 = document.getElementById("n2").value;
var sum = +x1 + +x2;
document.getElementById("sum").innerHTML = +x1 + +x2;
return false;
}
<!DOCTYPE html>
<html>
<head>
<title>Number in a form</title>
<link href="mystyle.css" rel="stylesheet" type="text/css"/>
<script type="text/javascript" src="function.js">
</script>
</head>
<body>
<div id="mainDiv">
<H3>Insert two positive numbers</H3>
<form onsubmit="return updateExpr()">
First number:<br>
<input id="n1" type="text" name="firstname"><br>
Second number:<br>
<input id="n2" type="text" name="lastname">
<BR>
<input type="submit" value="Submit" onClick="updateExpr()"/><BR><BR>
</form>
The sum is:<br>
<output id="sum" name="x" for="a b"></output>
</div>
<noscript>
Sorry: Your browser does not support or has disabled javascript
</noscript>
</body>
Another way of doing this would have been to add a button outside of the form linked to the function by onclick event
juste add preventDefault(), like this
function updateExpr(e) {
e.preventDefault();
var x1 = document.getElementById("n1").value;
var x2 = document.getElementById("n2").value;
var sum = +x1 + +x2;
document.getElementById("sum").innerHTML = +x1 + +x2;
}
Does anyone know how can I resolve the following: I want the form input by the user, to be alerted in a different HTML file.
This is what I wrote so far. It works for the id called 'name', but I dont know why it does not for the 'position'.
"index.html" file:
<script>
function myFunction() {
name = document.getElementById("name").value;
position = document.getElementById("position").value;
window.location.replace("signature.html");
return false;
}
</script>
<form class="formulario" onsubmit="return myFunction()">
Name: <input type="text" name="name" id="name"><br>
Position: <input type="text" name="position" id="position"><br>
<br>
<input type="submit" value="Generate Signature">
</form>
"signature.html" file - notice the alert(name) and the alert(position) => the alert(name) works, but not the alert(position). I want to understand how to fix that please.
<html>
<head>
</head>
<body>
<div class="signature_general">
<div class = "signature_middle">
<div id = "signature_details">
<font size="2px">Regards,</font><br>
<b><font color="#808080" size="3px" id="nameInput">Francisco Jurado</font></b><br>
<font size="2px" id="posInput">Accounting Systems Team Leader</font>
</div>
</div>
</div>
<script>
alert(name);
alert(position);
</script>
</body>
</html>
Thanks very much
Edit: I have noticed that I am getting an error, in which "position" is "undefined". Does anyone knows?
You can change your html file as:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<form class="formulario" action="signature.html" method="get">
Name: <input type="text" name="name" id="name"><br>
Position: <input type="text" name="position" id="position"><br>
<br>
<input type="submit" value="Generate Signature">
</form>
</body>
</html>
And your signature.html file as :
<html>
<head>
</head>
<body>
<div class="signature_general">
<div class = "signature_middle">
<div id = "signature_details">
<font size="2px">Regards,</font><br>
<b><font color="#808080" size="3px" id="nameInput">Francisco Jurado</font></b><br>
<font size="2px" id="posInput">Accounting Systems Team Leader</font>
</div>
</div>
</div>
<script>
var values = window.location.search.substring(1).split('&')
var name = values[0].split('=')[1]
var position = values[1].split('=')[1]
alert(name)
alert(position)
</script>
</body>
</html>
That name you are setting in index.html is not the same name you are printing in the alert of signature.html.
You can see this by renaming name to name2 in both places.
If you want to pass those variables from one page to another, I suggest using query strings how to exchange variables between two HTML pages?
Quick question. I am starting learn on local storage HTML5. How can I get value from a form and display that value on another HTML form page?
For example, I have two forms here.
If I fill on form 1 and click submit button, and the value will display on form 2 in readable only.
I tried below:
HTML Form 1:
<html>
<head>
<title>Save Value</title>
<script type="text/javascript">
function saveVal() {
var inputFirst = document.getElementById("name").value;
localStorage.setItem("name", inputFirst);
inputFirst = localStorage.getItem("name");
}
</script>
</head>
<body>
<form action="display.html" method="get">
<label>
First Name:
<input name="name" size="20" maxlength="25" type="text" id="name" />
</label>
<input type="submit" value="submit" onclick="saveVal()"/>
</form>
</body>
</html>
HTML Form 2:
<html>
<head>
<title>Display</title>
<script type="text/javascript">
function result() {
var storedVal = document.getElementById("name");
storedVal.value = localStorage.getItem("name");
}
</script>
</head>
<body>
<form action="#">
<label>
First Name:
<input name="name" size="20" maxlength="25" type="text" id="name" readonly="readonly" />
</label>
</form>
</body>
</html>
In display.html you didn't call function result(),
try this,
<html>
<head>
<title>Display</title>
</head>
<body>
<form action="#">
<label>
First Name:
<input name="name" size="20" maxlength="25" type="text" id="name" readonly="readonly" />
</label>
<script type="text/javascript">
var storedVal = document.getElementById("name");
storedVal.value = localStorage.getItem("name");
</script>
</form>
</body>
</html>
jQuery val() didnt working, this is the simple script:
$("#com_form").submit(function () {
var name = $("#nama").val();
var komentar = $("#komentar").val();
alert.("Hi, " + name + " this is your comment: " + komentar)
});
this is the HTML form:
<form method="post" name="com_form" id="com_form">
<p>What is your name:<br>
<input type="text" name="nama" id="nama">
</p>
<p>Leave your comment here:<br>
<input type="text" name="komentar" id="komentar">
</p>
<p>
<input type="submit" name="button2" id="button2" value="Submit">
</p>
</form>
actually, I was tried to create ajax post, the value "nama" is submited but not "komentar". So I tried to debug using alert (like one above) and still "komentar" is not change. What should I do?
Do you have another HTML element with the id "komentar" elsewhere on the page?
You have some errors in your html. Form should have "action" attribute, also js is not well.
I made example html and js files which works correctly. Html file passed w3.org validation and js passed jslint.
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script src="http://www.google.com/jsapi"></script>
<script type="text/javascript">
google.load("jquery", "1.4.2");
</script>
<script type="text/javascript" src="2988992.js"></script>
<title>Insert title here</title>
</head>
<body>
<form method="post" name="com_form" id="com_form" action="2988992.html">
<p>What is your name:<br>
<input type="text" name="nama" id="nama">
</p>
<p>Leave your comment here:<br>
<input type="text" name="komentar" id="komentar">
</p>
<p>
<input type="submit" name="button2" id="button2" value="Submit">
</p>
</form>
</body>
</html>
"use strict";
/*global $, alert*/
$(function () {
$("#com_form").submit(function () {
var name = $("#nama").val();
var komentar = $("#komentar").val();
alert("Hi, " + name + " this is your comment: " + komentar);
return false; //prevent standard behavior
});
});
try
$(document).ready(function()
{
//jquery code here
}
Remove the . after the alert statement so it reads;
alert("Hi, "+name+" this is your comment: "+komentar)