Text Input to Hyperlink through submit - javascript

I am making a questionnaire where specific answers will link to other of my webpages through submit. How do I hyperlink specific answers in text input so that when the user clicks submit it sends them to the page specific to the answer given by the user? I am somewhat new to html/css and have only done a bit of js. I have found different answers to some relatable questions but not truly specific to what I want.
Here is what I have so far:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<link href="index.css" rel="stylesheet" type="text/css"/>
</head>
<body>
<center><h1>Friendship Evaluator</h1></center>
<table width="60%" border="0">
<tbody>
<tr>
<td><h3>Choose your best friend:</h3>
<strong>
<p>Filip</p>
<p>David</p>
<p>Christopher</p>
</strong>
<p>Now type your <b>besties</b> name and pick a dish</p>
<form action="submit-friend">
<label for="Pizza">
<input id="Pizza" type="radio" name="Pizza-Lasagna">Pizza
</label>
<label for="Lasagna">
<input id="Lasagna" type="radio" name="Pizza-Lasagna">Lasagna
</label>
<br>
<input type="text" placeholder="Favorite Friend" required>
<button type="submit">Submit</button>
</form></td>
</tr>
</tbody>
</table>
</body>
</html>

Related

Set up a button listener

I have a problem with buttons on my website. I have taken it from a colleague and want to change the function of the keys.
At the moment this is solved directly in HTML. That looks like this:
<table class="formButtons">
<tr>
<td>
<form method="post">
<p> <input name='"Variable".allowStart' value="1" type="hidden"> </p>
<p> <input class="Start" value="Start" type="submit"> </p>
</form>
</td>
<td>
<form method="post">
<p> <input name='"Variable".allowStart' value="0" type="hidden"> </p>
<p> <input class="Stop" value="Stop" type="submit"> </p>
</form>
</td>
</tr>
</table>
When pressing the Start or Stop button, the whole page is reloaded. I do not want that.
As you can see, my variable '"Variable".allowStart"' is called and set to value=1. Now I want to set the value of the variable to 1 in Javascript. But I do not know how. Can you help me?
And please, detailed answers, I am a total beginner in programming.
Extra information:
'"Variable".allowStart'
is a variable that I get from my Siemens PLC.
It works as shown in the example. All I have to do is add the variable as a comment in the HTML file. Like this:
<!-- AWP_In_Variable Name='"Variable".allowStart' -->
I don't understand your '"Variable".allowStart' , but if you are able to use it in your javascript then you can proceed with this answer.
To stop the Start & Stop button from reloading the page, you can prevent the default behavior of the input elements by using preventDefault() and do your desired stuff from there.
Check out the modified HTML & the javascript for this:
window.onload = function (){
var start = document.getElementById('Start');
var stop = document.getElementById('Stop');
start.onclick = function (e) {
e.preventDefault();
//add desired code here
console.log('Clicked Start');
}
stop.onclick = function (e) {
e.preventDefault();
//add desired code here
console.log('Clicked Stop');
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Weird Buttons</title>
</head>
<body>
<table class="formButtons">
<tr>
<td>
<form method="post">
<p> <input name='"Variable".allowStart' value="1" type="hidden"> </p>
<p> <input id="Start" class="Start" value="Start" type="submit"> </p>
</form>
</td>
<td>
<form method="post">
<p> <input name='"Variable".allowStart' value="0" type="hidden"> </p>
<p> <input id="Stop" class="Stop" value="Stop" type="submit"> </p>
</form>
</td>
</tr>
</table>
</body>
</html>

Php, Jquery/JS, Submit button

Okay, so for some reason I have a crazy problem that is just making my mind go crazy. I have an open source shoutbox, worked great in the website.com/shouot/SHOUTDIREC/chat.html but once I try to embed into my previous built site(website.com/chat.php), the submit button like grays out and I can't submit the post. Another thing is it doesn't show previous post that show up when I go back to SHOUTDIREC/chat.html. I tried changing /chat.php to /chat.html nothing. Still grayed out not working submit button.
This is the ./chat.php:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Making a Shoutbox with PHP and jQuery</title>
<link rel="stylesheet" href="http://cdn.jsdelivr.net/emojione/1.3.0/assets/css/emojione.min.css"/>
<link rel="stylesheet" href="./shout/assets/css/styles.css" />
<script type="text/javascript" src="./livechat/php/app.php?widget-init.js"></script>
</head>
<body>
<div class="shoutbox">
<h1>Shout box <img src='./shout/assets/img/refresh.png'/></h1>
<ul class="shoutbox-content"></ul>
<div class="shoutbox-form">
<h2>Write a message <span>×</span></h2>
<form action="./shout/publish.php" method="post">
<label for="shoutbox-name">nickname </label> <input type="text" id="shoutbox-name" name="name"/>
<label class="shoutbox-comment-label" for="shoutbox-comment">message </label> <textarea id="shoutbox-comment" name="comment" maxlength='240'></textarea>
<input type="submit" value="Shout!"/>
</form>
</div>
</div>
<!-- Include jQuery and the EmojiOne library -->
<script src="http://code.jquery.com/jquery-2.1.3.min.js"></script>
<script src="http://cdn.jsdelivr.net/emojione/1.3.0/lib/js/emojione.min.js"></script>
<script src="./shout/assets/js/script.js"></script>
</body>
</html>
Here is the /SHOUTDIREC/chat.html:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Wyfi-Chat</title>
<link rel="stylesheet" href="http://cdn.jsdelivr.net/emojione/1.3.0/assets/css/emojione.min.css"/>
<link rel="stylesheet" href="./assets/css/styles.css" />
</head>
<body>
<div class="shoutbox">
<h1>Shout box <img src='./assets/img/refresh.png'/></h1>
<ul class="shoutbox-content"></ul>
<div class="shoutbox-form">
<h2>Write a message <span>×</span></h2>
<form action="./publish.php" method="post">
<label for="shoutbox-name">nickname </label> <input type="text" id="shoutbox-name" name="name"/>
<label class="shoutbox-comment-label" for="shoutbox-comment">message </label> <textarea id="shoutbox-comment" name="comment" maxlength='240'></textarea>
<input type="submit" value="Shout!"/>
</form>
</div>
</div>
<!-- Include jQuery and the EmojiOne library -->
<script src="http://code.jquery.com/jquery-2.1.3.min.js"></script>
<script src="http://cdn.jsdelivr.net/emojione/1.3.0/lib/js/emojione.min.js"></script>
<script src="./assets/js/script.js"></script>
</body>
</html>
I don't know why it's not working. Maybe a permission issue? Or what? I have no clue, and my mind is going absolutely nuts.
function AjaxShowForm(a, v) {
var data = $("#" + v).serialize();
$.ajax({
type: "POST",
url: "https://api.stackexchange.com/2.2/answers/45403161?order=desc&sort=activity&site=stackoverflow",
data: data,
beforeSend: function (html) { // this happens before actual call
$("#" + a).html("<img src='//vistablog.ir/images/loading_.gif'></img>loading..");
$("#" + a).show();
},
success: function (html) { // this happens after we get results
$("#" + a).html("");
$("#" + a).show();
$("#" + a).append(html);
}
});
return false;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form action='' method='post' id='form1'>
<table dir='rtl' border='0'>
<tr>
<td>name <span style="color:red">*</span></td>
<td><input type='text' name='in1' required></td>
</tr>
<tr>
<td>description</td>
<td><textarea name='in3'></textarea></td>
</tr>
<tr>
<td>family</td>
<td><input type='text' name='in2'></td>
</tr>
<tr>
<td>email</td>
<td><input type='text' name='in4'></td>
</tr>
<tr>
<td>roles</td>
<td><input type='checkbox' name='in5'></td>
</tr>
<td></td>
<td><input type='submit' value='submit' onclick='return AjaxShowForm("showajax1","form1")'></td>
</table>
<p id='showajax1'></p></form>
</center>

Parse Domain in Text Input, replace from given list

I have a form hosted at following link:
http://laughtertab.com/url
The code for the form is as below:
What I need is when a person enters a URL from the website, It should replace the given domain from the input and replace with the chosen one from the list. I am new to coding and all I understood so far is I need to parse the URL into domain and path, but I can't make syntax on how to get it done, I will appreciate if I can get help on making it.
<html>
<head>
<title> Laughter Tab - UTM and OGP Propagated URL Builder </title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap-theme.min.css">
</head>
<body face='verdana'>
<br><br><br><br>
<center>
<div id="entries">
<form name ="myform">
<div class="table-responsive">
<table style="table">
<tr>
<td>
<right>
Enter original URL without domain -
</right>
</td>
<td>
<input type="text" name="origin"/>
</td>
</tr>
<tr>
<td>
<right>
Select OGP propagated domain -
</right>
</td>
<td>
<input type="radio" name="ogpd" value="http://www.laughters.xyz/"> laughtertab.com<br>
<input type="radio" name="ogpd" value="http://www.laughters.xyz/"> laughters.xyz<br>
<input type="radio" name="ogpd" value="http://www.lolrising.rocks/"> lolrising.rocks<br>
<input type="radio" name="ogpd" value="http://www.funspoted.net/"> funspoted.net<br>
<input type="radio" name="ogpd" value="http://www.grumpy-kitten.com/"> grumpy-kitten.com<br>
</td>
</tr>
<tr>
<td>
<right>
Enter your GA Campaign name -
</right>
</td>
<td>
<input type="text" name="campaign"/><br>
</td>
<tr>
<td>
</td>
<td><br>
<right>
<input type="button" value="Generate" onClick="collect(this.form)"/>
</right>
</td>
</tr>
</table>
</div>
</form>
<br><br>
Go Back to Laughter Tab Home Page
</div>
<div id="results"> </div>
<script type="text/javascript">
function collect(frm)
{
document.getElementById("results").innerHTML+=""+frm.ogpd.value+""+frm.origin.value+"?utm_source=PNP&utm_medium=P1K&utm_campaign="+frm.campaign.value+"<hr>"
frm.reset();
}
</script>
<center>
</body>
</html>
If I'm understanding correctly. You basically want to look for a domain name if it's in the input
frm.origin
and remove it from the value.
If that's the case then you can match a regex pattern, a generic example is:
/(http:\/\/|https:\/\/){0,1}([\w\d-]+\.)*([\w\d-]{1,63})(\.(\w{2,3}))\//i
Or you can google your own URL regex if you prefer
but anyways you just apply that to your value and replace it with "" (nothing)
frm.origin.value.replace(/(http:\/\/|https:\/\/){0,1}([\w\d-]+\.)*([\w\d-]{1,63})(\.(\w{2,3}))\//i, "");
Which gives you
function collect(frm)
{
document.getElementById("results").innerHTML+=""+frm.ogpd.value+""+frm.origin.value.replace(/^(http:\/\/|https:\/\/){0,1}([\w\d-]+\.)*([\w\d-]{1,63})(\.(\w{2,3}))\//i, "")+"?utm_source=PNP&utm_medium=P1K&utm_campaign="+frm.campaign.value+"<hr>"
frm.reset();
}
It's not a perfect solution but it should be a good starting point.

How to populate an html table with Javascript form elements?

Essentially I want to display 10 lines of a table and have them update with people's names as they submit forms. So essentially I need to write the form inputs to the table cells. WHen more than 10 people fill out the form I want the table to only show 10 so it will bump one of the earlier ones. So far this is what I am trying but I don't really know how to proceed.
<html>
<h2>Change Our Lights:</h2>
<form name="leds" id="ledSend" method="get" target="_blank" action="https://agent.electricimp.com/Fk43xPMkSrWF">
Lamp Control: <input type="radio" name="led" value="0" checked>Off
<input type="radio" name="led" value="1">On<br>
How long should the Lights stay on? <input type="text" name="timer" value="10">seconds<br>
Your name? For Our Records <input id="name" type="text" name="user" placeholder="Your name here"<br>
<br>
<input type="submit" value="Update!" onclick="updateTable();return false;"/>
</form>
<script type="text/javascript">
function updateTable(){
if (!document.getElementsByTagName) return;
tabBody=document.getElementsByTagName("tbody").item(0);
row=document.createElement("tr");
cell1 = document.createElement("td");
textnode1=document.forms['leds'].elements[3].value;
cell1.appendChild(textnode1);
row.appendChild(cell1);
tabBody.appendChild(row);
}
</script>
<body>
<h1>Who has Changed Our Lights?</h1>
<table border='1' id='mytable'>
<tbody>
<tr>"This Could Be You"</tr>
</tbody>
</table>
</body>
</html>
I can't get the form elements to appear in the table at all.
Your HTML had some typos and other problems. Your JavaScript was on the right track, but overly complicated (and generally it is good practice to put all of it in the head section of the HTML). Here is a workable test-page:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Test Page</title>
<script type="text/javascript"> <!--
var tabBody, row, cell;
function updateTable(){
tabBody=document.getElementById("editable");
row=document.createElement("tr");
cell = document.createElement("td");
cell.innerHTML=document.forms['leds'].elements[3].value;
row.appendChild(cell);
if(tabBody.childNodes.length==10)
tabBody.removeChild(tabBody.childNodes[0])
tabBody.appendChild(row);
}
// -->
</script>
</head>
<body>
<h2>Change Our Lights:</h2>
<!-- <form name="leds" id="ledSend" method="get" target="_blank" action="https://agent.electricimp.com/Fk43xPMkSrWF"> -->
<form name="leds" id="ledSend" action="" onsubmit="return false;">
Lamp Control: <input type="radio" name="led" value="0" checked />Off
<input type="radio" name="led" value="1" />On<br>
How long should the Lights stay on? <input type="text" name="timer" value="10" />seconds<br>
Your name? For Our Records <input id="name" type="text" name="user" placeholder="Your name here" /><br>
<br>
<input type="submit" value="Update!" onclick="updateTable();return false;"/>
</form>
<h1>Who has Changed Our Lights?</h1>
<table border='1'>
<thead><tr><th>This Could Be You</th></tr></thead>
<tbody id="editable"></tbody>
</table>
</body>
</html>

HTML button onclick event

This might be a very basic question; believe me I found very hard to find the answer to this question on the internet. I have 3 HTML pages stored in my server (Tomcat locally) & i want to open these HTML pages on a button click. Any help would be highly appreciated.
Here is my code,
<!DOCTYPE html>
<html>
<head>
<meta charset="ISO-8859-1">
<title>Online Student Portal</title>
</head>
<body>
<form action="">
<h2>Select Your Choice..</h2>
<input type="button" value="Add Students">
<input type="button" value="Add Courses">
<input type="button" value="Student Payments">
</form>
</body>
</html>
Try this:-
<!DOCTYPE html>
<html>
<head>
<meta charset="ISO-8859-1">
<title>Online Student Portal</title>
</head>
<body>
<form action="">
<input type="button" value="Add Students" onclick="window.location.href='Students.html';"/>
<input type="button" value="Add Courses" onclick="window.location.href='Courses.html';"/>
<input type="button" value="Student Payments" onclick="window.location.href='Payment.html';"/>
</form>
</body>
</html>
You should all know this is inline scripting and is not a good practice at all...with that said you should definitively use javascript or jQuery for this type of thing:
HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="ISO-8859-1">
<title>Online Student Portal</title>
</head>
<body>
<form action="">
<input type="button" id="myButton" value="Add"/>
</form>
</body>
</html>
JQuery
var button_my_button = "#myButton";
$(button_my_button).click(function(){
window.location.href='Students.html';
});
Javascript
//get a reference to the element
var myBtn = document.getElementById('myButton');
//add event listener
myBtn.addEventListener('click', function(event) {
window.location.href='Students.html';
});
See comments why avoid inline scripting and also why inline scripting is bad
on first button add the following.
onclick="window.location.href='Students.html';"
similarly do the rest 2 buttons.
<input type="button" value="Add Students" onclick="window.location.href='Students.html';">
<input type="button" value="Add Courses" onclick="window.location.href='Courses.html';">
<input type="button" value="Student Payments" onclick="window.location.href='Payments.html';">
Having trouble with a button onclick event in jsfiddle?
If so see Onclick event not firing on jsfiddle.net
This example will help you:
<form>
<input type="button" value="Open Window" onclick="window.open('http://www.google.com')">
</form>
You can open next page on same page by:
<input type="button" value="Open Window" onclick="window.open('http://www.google.com','_self')">
<body>
"button" value="Add Students" onclick="window.location.href='Students.html';">
<input type="button" value="Add Courses" onclick="window.location.href='Courses.html';">
<input type="button" value="Student Payments" onclick="window.location.href='Payments.html';">
</body>

Categories