I am new to HTML. I need code that generates and redirects to a URL depending on the value of form input elements. For example, with two fields name and roll, once populated it should generate http://example.com/name/roll and send the user to the URL.
Is this possible? I was able to create the URL http://webaddress/data+data+data but not with /. Please guys; if you may help, it would be very much appreciated. Thanks in advance.
var name = "Jone"
var roll = 100;
var url = "http://webaddgess/"+name+"/"+roll;
On front-end, this will be best done with JavaScript, simply fetch the values in the form and insert it in the URL as you desire.
Sample HTML
<form onsubmit="myFunction();return false">
<input name="name" id="name">
<input name="roll" id="roll">
</form>
Sample JavaScript
<script>
function myFunction(){
//Get values
var name = document.getElementById('name').value;
var roll = document.getElementById('roll').value;
//Redirect
window.location = "http://webaddress/"+name+"/"+roll;
}
</script>
Try this One
var roll=document.getElementById("rollhtml");
var x = document.getElementById("namehtml");
var url="Your URL here"+roll+x;
<input type="text" id="rollhtml" placeholder="Roll" value="">
<input type="text" id="namehtml" placeholder="Name">
Related
I am very new to programming. I would like to add a phone number and text message to the below code using values from text boxes, How to do that? Pls see the code below. in the user interface I need two text boxes and a send button. Send button will trigger this below code.
<a href="sms://+15552345678?body=Hello,%20World">Phone(+1) and ?body (sms://)
If you’re on a supported mobile platform, you can try this way:
Send a SMS message
<input type="text" id="phone" placeholder="Type Phone" />
<input type="text" id="msg" placeholder="Type Message" />
<script>
var PhoneNumber = document.getElementById("phone")
var Msg = document.getElementById("msg")
function handleSendMsg() {
document.getElementById("btn").onclick = function () {
this.href = "sms:" + PhoneNumber.value + "?body=" + encodeURI(Msg.value);
// console.log(btn)
};
}
</script>
I'm creating a webpage with a form and I have to send data to a Google Spreadsheet. I found a good code searching this site but I don't know how to edit it to store my data in Google Spreadsheet.
My form is made this way
<form name="reqForm" id="reqForm" method="get" action="SCRIPT" accept-charset="UTF-8">
<input type="hidden" name="reqID" id="reqID" />
<label for="name">Name:</label>
<input type="text" name="Name" id="Name"/>
<label for="surname">Surname:</label>
<input type="text" name="surname" id="surname"/>
<label for="SERIAL">Serial:</label>
<input type="text" name="serial" id="serial"/>
<label for="email">E-mail:</label>
<input type="text" name="email" id="mail"/>
<label for="text">Request:</label>
<textarea id="text"></textarea>
<input type="submit" value="Send" />
</form>
The script is the same, from the example I linked (I just changed the function name because of an error)
function doPost(e){
var id = "";
var name = e.parameter['name'];
var surname = e.parameter['surname'];
var serial = e.parameter['serial'];
var eMail = e.parameter['email'];
var text = e.parameter['text'];
var date = new Date();
var ans = ""
var flag = "WIP";
var vals = [id, date, name, surname, serial, eMail, text, ans, flag];
var sheetObj = SpreadsheetApp.openById("myKey").getSheetByName('Requests').appendRow(vals);
// return ContentService.createTextOutput(e);
}
If I fill the form in this way:
Name: John
Surname: Doe
Serial: 123456
Email: 123#456.com
Request: Hello
in my Spreadsheet I see data in this order:
[DATE] [Serial] [Mail] [Name] [Surname]
How can modify the function to put my data into the spreadsheet in some kind of order that I can decide?
[UPDATE]: I updated the code: the result of this is a line correctly ordered but filled with "undefined"...
After submitting the form, you can get form parameters using e.parameter[<parameter_name>].
For example to get the surname,
var surname = e.parameter['surname'];
To insert form data in Google Spreadsheet,
var sheetObj = SpreadsheetApp.openById("myKey").getSheetByName("sheetname");
//Here you can shuffle the order of values anyway you want.
sheetObj.appendRow([DATE, Serial, Mail, Name, Surname]);
//or you can do it like this
sheetObj.appendRow([DATE, Mail, Name, Surname, Serial]);
Hope this helps.
In a simple webpage, I am trying to grab the value of an input field as it's being typed and display it simultaneously within the context of code.
So a user could past an URL into the input field and it immediately update the code displayed, so he can easily copy the update code. For example:
<input type='text' name='typedURL'>
Here is your code: copy this
I searched all over the internet and am under the impression that the best solution is using this:
<form onsubmit="return false" onkeyup="o.value = a.value">
<input name="a" id="a" type="text" step="any">
<br>
Here is your code:
<code>
</output>">Copy this code
</form>
But I can't get it to output the value PLUS the surrounding code.
You can do selecting input value (with querySelector and .value), and change attribute href in JS replacing with .value.
Here the code:
var input = document.querySelector(".valore");
var link = document.getElementById("href");
input.addEventListener("keydown", function() {
link.innerHTML = input.value;
link.href = link.innerHTML;
});
<input type="text" class="valore">
I want to have a box in HTML such as this one:
Particular thing, I need to do this using only HTML (no PHP or particular langage requiring server, or particular installation).
The reason for this is that it is meant to be used for HTML pages that will be opened from a USB key, not a website, and it has to be usable by any non-expert person. So no web-server configuration or installation required, such as what would be required for PHP, if I am right.
Think about not using a Form, but just using a Javascript function.
I'm not sure if this probably is not possible due to security reasons, but it could be a solution...
function redirect() {
var input = document.getElementById("stuff");
window.location = input.value;
}
<span>NOM:</span>
<input type="text" id="stuff"></input>
<br>
<input type="button" onclick="redirect()" value="Submit"></input>
I managed to do what I needed thanks to Anders Anderson's answer. Here is the code for those interested in doing similar thing. First, for the Javascript
function redirect() {
var answergiven = document.getElementById("answergiven");
var realanswer = document.getElementById("realanswer");
var nextpage = document.getElementById("nextpage");
if(answergiven.value.toLowerCase() == realanswer.value.toLowerCase()){
window.location = nextpage.value;
}
else{
alert('Wrong answer, please try again.');
}
return false; // prevent further bubbling of event
}
And for the HTML part, there are two hidden variables that determine the real answer, and the next page to go to, and the text field for the answer
<form name="myform" onSubmit="return redirect()">
<span>Réponse:</span>
<input type="text" id="answergiven" />
<input name="tosubmit" type="submit" value="Submit" />
<input type="hidden" id="realanswer" value="theanswer" />
<input type="hidden" id="nextpage" value="thenextpage.html" />
</form>
I am trying to create a very simple form with a little bit of extra code to get the results as described below: the problem is I don't know how to go about doing it.
What I am trying to achieve:
I have a form which has one text input box with the name 'url'. I want the user to be able to input a number into the box. When the user submits the form they should be redirected to a new website. The new website's URL will be based on the number inputted into the form.
The first part of the URL will always be: http://name.com/
Then the number that the user inputted will be attached to the end. So if 123456 is entered into the form then on submission of the form the user would be taken to http://name.com/123456
How can I get this working? I am guessing it will require JavaScript or something.
<script>
function process()
{
var url = "http://name.com/" + document.getElementById("url").value;
location.href = url;
return false;
}
</script>
<form onSubmit="return process();">
URL: <input type="text" name="url" id="url">
<input type="submit" value="go">
</form>
You can add onsubmit="this.action='http://google.com/'+this.fieldName.value;" to your tag.
This should do it:
<script type="text/javascript">
function goToPage() {
var page = document.getElementById('page').value;
window.location = "http://name.com/" + page;
}
</script>
<input type="text" id="page" />
<input type="submit" value="submit" onclick="goToPage();" />