You will quickly see that I'm new to this and don't have a clue. I'm going mental trying to help a friend out with this project. He wants to have a simple quote form that generates a quote to html then he will copy/paste to a private wordpress page for his client.
The form starts with if radio button is selected, div is shown
index.html:
<html>
<body>
<head>
<title>Demo Quote Creator</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript">
$(function () {
$("input[name='animalvillas']").click(function () {
if ($("#chkYes1").is(":checked")) {
$("#dvanimalvillas").show();
} else {
$("#dvanimalvillas").hide();
}
});
});
</script>
<script type="text/javascript">
$(function () {
$("input[name='animalkidani']").click(function () {
if ($("#chkYes2").is(":checked")) {
$("#dvanimalkidani").show();
} else {
$("#dvanimalkidani").hide();
}
});
});
</script>
</head>
<h2>Client Name</h2>
<form name="create" action="welcome.php" method="post" onsubmit="return validateForm();">
<strong>Last</strong>: <input type="text" name="last" required />, <strong>First</strong>: <input type="text" name="first" required />
<BR />
<h2><strong>Resorts to Include in Quote</strong></h2>
<span><strong>Animal Kingdom Villas</strong></span><BR />
<label for="chkYes1">
<input type="radio" id="chkYes1" name="animalvillas" />
Include
</label>
<label for="chkNo1">
<input type="radio" id="chkNo1" name="animalvillas" />
Exclude
</label>
<hr />
<div id="dvanimalvillas" style="display: none">
$<input type="text" name="ages" size="7" /> - Value Studio - Standard View (Parking View) | Studio Description: 316sf - One (1) queen bed and one (1) double-size sleeper sofa (Sleeps 4) <br>
</div>
<span><strong>Animal Kingdom Kidani</strong></span><BR />
<label for="chkYes2">
<input type="radio" id="chkYes2" name="animalkidani" />
Include
</label>
<label for="chkNo2">
<input type="radio" id="chkNo2" name="animalkidani" checked />
Exclude
</label>
<hr />
<div id="dvanimalkidani" style="display: none">
$<input type="text" name="ages" size="7" /> - Value Studio - Standard View (Parking View) | Studio Description: 316sf - One (1) queen bed and one (1) double-size sleeper sofa (Sleeps 4) <br>
</div>
<BR />
<input type="submit" />
</form>
</body>
</html>
Now, on the welcome.php, he only wants the relevent that was selected on the index.html. Obviously, this is not working, but hopefully you can see what we are trying to accomplish.
welcome.php
<head>
<meta charset="utf-8" />
</head>
<body>
<div id="dvanimalvillas" <?php
if ($("#chkNo1").is(":checked")) { echo 'style="display:none;"'; } ?>>
The quote for Animal Kingdom Villas will show here when yes is selected
</div>
<div id="dvanimalkidani" <?php
if ($("#chkNo2").is(":checked")) { echo 'style="display:none;"'; } ?>>
The quote for Animal Kingdom Kidani will show here when yes is selected
</div>
</body>
Thank you for any direction you may have!
In your index.html make following changes. You have to give some value to your radio buttons to fetch in other file
<label for="chkYes2">
<input type="radio" id="chkYes2" name="animalkidani" value="Y" />
Include
</label>
<label for="chkNo2">
<input type="radio" id="chkNo2" name="animalkidani" value="N" checked />
Exclude
</label>
In your welcome.php make following changes. We will use radio button value to hide and display div content.
<div id="dvanimalvillas" <?php echo ($_POST['animalkidani'] == "Y") ? 'style="display:none;"' : '' ; } ?>>
The quote for Animal Kingdom Villas will show here when yes is selected
</div>
<div id="dvanimalkidani" <?php echo ($_POST['animalkidani'] == "N") ? 'style="display:none;"' : '' ; } ?>>
The quote for Animal Kingdom Kidani will show here when yes is selected
</div>
There are multiple things going on here:
You're not using radio buttons properly. Each radio selection needs a different value within each radio group having the same name. This value is what is sent with the form when it is submitted. See this link: http://www.echoecho.com/htmlforms10.htm
In welcome.php, you need to look at the form data that is sent from index.html, not at the actual checkboxes from the form. See this link: http://www.tutorialspoint.com/php/php_get_post.htm
Related
for example
<form onsubmit="submitForm(event)">
<p> Do you like cats or dogs </p>
<input type="radio" id="cat" value="Cats">
<label for="cat">Cats</label>
<input type="radio" id="dog" value="Dogs">
<label for="dog">Dogs</label><br>
<button>Submit</button>
</form>
<script>
function submitForm(event) {
if(document.getElementById('cat').checked) {
//(send the user to the cat page)
}else if(document.getElementById('dog').checked) {
//(send the user to the dog page)
}
</script>
how would I send users to different pages in the same root folder as my website based on their responses to my questions
Give window.location.href a shot
<form onsubmit="submitForm(event)">
<p> Do you like cats or dogs </p>
<input type="radio" id="cat" value="Cats">
<label for="cat">Cats</label>
<input type="radio" id="dog" value="Dogs">
<label for="dog">Dogs</label><br>
<button>Submit</button>
</form>
<script>
function submitForm(event) {
if(document.getElementById('cat').checked) {
//(send the user to the cat page)
window.location.href = 'yoursite.com/cat'
}else if(document.getElementById('dog').checked) {
//(send the user to the dog page)
window.location.href = 'yoursite.com/dog'
}
</script>
Edit: Formatting
First, there are a few errors in the code that need to be fixed.
The radio inputs are missing the name attribute. Without a value for the name attribute set, it is an orphan.
Each of the radio inputs below can be checked at the same time and would result in unexpected behavior.
In addition, there is a missing curly brace at the end of the JavaScript function 'submitForm'
<form onsubmit="submitForm(event)">
<p> Do you like cats or dogs </p>
<!-- Missing 'name' attribute' -->
<input type="radio" id="cat" value="Cats">
<label for="cat">Cats</label>
<!-- Missing 'name' attribute' -->
<input type="radio" id="dog" value="Dogs">
<label for="dog">Dogs</label><br>
<button>Submit</button>
</form>
<script>
function submitForm(event) {
if (document.getElementById('cat').checked) {
//(send the user to the cat page)
} else if (document.getElementById('dog').checked) {
//(send the user to the dog page)
}
// <-Missing closing curly brace for 'submitForm'
</script>
To fix these issues, here is the HTML you posted with the missing pieces filled in.
Note that only one of the choices can be selected now.
<form onsubmit="submitForm(event)">
<p>Do you like cats or dogs</p>
<!-- Now has a name attribute set to 'PetChoiceRadioGroup' -->
<input type="radio" id="cat" value="Cats" name="PetChoiceRadioGroup" />
<label for="cat">Cats</label>
<!-- Now has a name attribute set to 'PetChoiceRadioGroup' -->
<input type="radio" id="dog" value="Dogs" name="PetChoiceRadioGroup" />
<label for="dog">Dogs</label><br>
<button type="submit">Submit</button>
</form>
<script>
function submitForm(event) {
if (document.getElementById('cat').checked) {
//(send the user to the cat page)
} else if (document.getElementById('dog').checked) {
//(send the user to the dog page)
}
} // <-Curly brace no longer missing
</script>
After fixing these issues, kawnah’s answer is a good solution using location.href to change pages based on the choice selected.
here is the html code below.
Need to export the checked value to a csv file separated by comma
Can any one help me out with any solutions.
`
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="home.css">
<title>CSB Export</title>
</head>
<body>
<div class="page_wrapper">
<div class="header">
ABC news
</div>
<div class="form_holder">
<form>
<div class="form_container">
Name : <input type="text" placeholder="Enter Your Name"/><br/>
<input type="checkbox" name="newstype" value="1"/>1<br/>
<input type="checkbox" name="newstype" value="2"/>2<br/>
<input type="checkbox" name="newstype" value="3"/>3<br/>
<input type="checkbox" name="newstype" value="4"/>4<br/>
<input type="checkbox" name="newstype" value="5"/>5<br/>
<input type="submit" value="submit"/>
</div>
</form>
</div>
</div>
</body>
</html>
You do not specify what environment you're working in. Environments such as Node.js, PHP, Python, Ruby, Java, etc.
So not knowing the above, you have two options:
Handle the form data when it's submitted. You'd look for all newstype params in the submitted form data.
Add some sort of listener to the form when submit is clicked that finds all checked boxes.
Using vanilla JS:
const checkboxes = document.querySelectorAll('input[name=newstype]:checked')
Use PHP:
if (isset($_POST['newstype1'])) {
//code for checked 1
} elseif (isset($_POST['newstype2'])) {
//code for checked 2
} elseif (isset($_POST['newstype3'])) {
//code for checked 3
} elseif (isset($_POST['newstype4'])) {
//code for checked 4
} else {
//code for checked 5
}
I hope that works. (and helps)
EDIT
The checkboxes names will need to be changed:
<input type="checkbox" name="newstype1" value="1"/>1<br/>
<input type="checkbox" name="newstype2" value="2"/>2<br/>
<input type="checkbox" name="newstype3" value="3"/>3<br/>
<input type="checkbox" name="newstype4" value="4"/>4<br/>
<input type="checkbox" name="newstype5" value="5"/>5<br/>
I'm doing this sort of a dictionary which by now works but I have few more things to edit which I have problems with.
It is a simple page with basic editing. The only more complicated stuff is the search and functioning of the button which is done.
I have 4 different languages, Italian, French, German with Italian as default and English.
I also have a simple "Dizionario IBS" (Italian) welcome like thingy but I want that everytime I change languages (Language change is basically a filter, it switches the search result that comes up after you write inside the search bar) the "Dizionario IBS" switches text to more appropriate like if I were to click on "English" Button which filter search results to english the "Dizionario IBS" would become "IBS Dictionary".
I have tried to change it with JS, PHP and HTML, looked up codes and such here but none of them worked.
I'm very basic in programming so I barely know these languages, I'm sorry if I seem too inexperienced.
I also tried to change the type of the text I want changed, like I made it into a input type = text readonly and <h1>like this</h1> and tried to see if that would make things work.
Any suggestions?
<div id='header'>
<img id='img' src='logo.jpg'>
<div id='header-testo'>
<form action="" method="get">
<input type="submit" id="myButton" name="lingua" value="English" />
<input type="hidden" name="linguaa" value="en" />
</form>
</div>
<div id='header-test'>
<form action="" method="get">
<input type="submit" id="myButton" name="lingua" value="Français" />
<input type="hidden" name="linguaa" value="fr" />
</form>
</div>
<div id='header-test'>
<form action="" method="get">
<input type="submit" id="myButton" name="lingua" value="Deutsch" />
<input type="hidden" name="linguaa" value="de" />
</form>
</div>
<div id='header-test'>
<form action="" method="get">
<input type="submit" id="myButton" name="lingua" value="Italiano" />
<input type="hidden" name="linguaa" value="it" />
</form>
</div>
</div>
<div id='body'>
<h1 id="titolo">Dizionario IBS</h1>
<br>
<br>
<br>
<br>
<form action="" method="post">
<input type="text" id="searchBar" name="search" placeholder="" value="" maxlength="50" autocomplete="off" autofocus />
<input type="submit" id="searchBtn" value="Vai!" />
<input type="hidden" name="linguaa" />
</form>
</div>
The hidden input is the one that filters the search bar via language, dunno if it's relevant but just saying.
The whole thing works, but I want that every time I click and filter language, the "titolo" text changes to the said language as well.
JS code suggested by a user:
<div id='body'>
<h1 id="titolo"></h1>
<script>
var heading = document.getElementById('titolo');
function languagechange(id) {
if (id == '') {
heading.textContent = 'Dizionario IBS';
} else if (id == 'english') {
heading.textContent = 'IBS Dictionary';
} else if (id == 'french') {
heading.textContent = 'IBS Dictionnaire';
} else if (id == 'italian') {
heading.textContent = 'Dizionario IBS';
} else if (id == 'german') {
heading.textContent = 'IBS W\u00F6rterbuch';
}
}
</script>
<br>
<br> <br> <br>
<form action="" method="post">
<input type="text" id="searchBar" name="search" placeholder="" value="" maxlength="50" autocomplete="off" autofocus /><input type="submit" id="searchBtn" value="Vai" />
<input type ="hidden" name="linguaa" />
</form>
</div>
I moved the JS below the title becuase If i remember correctly putting it above didn't show anything. Also the first "if" was to try to set italian as default to always show when loading the page, didn't work however.
There are few things that you need to amend which I have mentioned steps wise below:
1) Firstly, change all your input type from type="submit" to type="button" ONLY under the id='header' forms. Otherwise every time you click the button it submits the form. Or if you want the form to function then prevent it from submitting. As I do not see any need for the language buttons to have a form, I suggest to change the type to button
2) Many elements in your markup has the same id value. This is bad. id attribute should be unique to each element in a DOM.
3) Coming to your solution, add a onclick event to your button like so & pass the unique id of the clicked button using this.id.
<form action="" method="get">
<input type="button" id="english" name="lingua" value="English" onclick="languagechange(this.id);" />
<input type="hidden" name="linguaa" value="en" />
</form>
Then in your JavaScript declare the languagechange() function like so & compare the id passed earlier to determine the language & change the text accordingly
var heading = document.getElementById('titolo');
function languagechange(id) {
if(id == 'english') {
heading.textContent = "English text";
} else if(id == 'french') {
heading.textContent = "French text";
}
}
$(document).ready(function() { $("#titolo").val('Put anything you want');});
try with jquery
onload, this command will change the text in the element 'titolo' with whatever you want.
Maybe this will help you https://angular-translate.github.io/docs/#/guide
If u use angular translate your html will look like this
<div id='body'>
<h1 id="titolo">{{'IBS' | translate}}</h1>
And then u just set up a file for each language with the translation.
Italiano would be
# suppress inspection "UnusedProperty" for whole file
IBS=Dizionario IBS
English would be
# suppress inspection "UnusedProperty" for whole file
IBS= IBS Directory
Afterwards you just need to write a function which selects which file is used if you press the button
U really should take a look at the doc
I am making a rock, paper, scissors game using AJAX, which is how I am learning JQuery, and I think it is almost all there. But, I can't get my buttons to work correctly. I am using <input type="image" ... > for my input source, and there will be three of these clickable pictures. I made a separate JS file to try and get the buttons to trigger an alert, and I don't know why they are not working. I feel like I have been looking at the code too long to see the bug, so I could use your fresh eyes, as well as your experience in the languages. Thanks!
play.php:
<?php
session_start();
include "./header.php";
include "logic/ajax.php";
?>
<!Doctype html>
<head>
<title>Play</title>
<link rel="stylesheet" href="style/play.css">
<script src="logic/buttonTest.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
</head>
<body>
<p>
<h6>Session Wins: <label for="s-wins"> <input id="score-wins" type="text"> </label> </h6>
<h6>Session Losses: <label for="s-losses"> <input id="score-losses" type="text"> </label> </h6>
<h6>Total Wins: <label for="t-wins"> <input id="total-wins" type="text"> </label> </h6>
<h6>Total Losses: <label for="t-losses"> <input id="total-losses" type="text"> </label> </h6>
<table>
<tr>
<td>
<form id="rock">
<input id="rock" type="image" src="assets/rock.png" alt="ROCK">
</form>
</td>
<td>
<form id="paper">
<input id="paper" type="image" src="assets/paper.png" alt="PAPER">
</form>
</td>
<td>
<form id="scissors">
<input id="scissors" type="image" src="assets/scissors.png" alt="SCISSORS">
</form>
</td>
</tr>
</table>
</body>
<?php include "./footer.php"; ?>
buttonTest.js:
$(document).ready(function(){
$("#rock").on('click', function(){
alert("You Clicked Rock");
});
$("#paper").click(function(){
alert("You Clicked Paper");
});
$("#scissors").click(function(){
alert("You Clicked Scissors");
});
});
the default behaviour of of input with type="image" is to follow the src attribute ,so you need to disable the default behaviour in all your handlers .
$("#rock").on('click', function(e){
e.preventDefault();
alert("You Clicked Rock");
});
do the same for all other click handlers
There are multiple errors in your code:
You're loading the js files before the <body> is even rendered, you should place them right before the closing </body> tag.
You should invert the order of your <script> tags, firstly you should load jquery, then your script that uses it.
You should avoid using the same id on multiple elements cause it may cause problems.
If your form is not intended to submit info but just to contain an input just switch them to <div>
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>form</title>
<link href="MyStyle.css" rel="stylesheet" type="text/css">
</head>
<body class="form">
<h1>Application Form</h1>
<form class="fdmain" method="post" id="form2" name="form2" action=>
<p>
<label for="textfield">Name:</label>
<input type="text" name="stdname" id="tfname">
</p>
<p>Father Name:
<input type="text" name="fname" id="tffathername">
</p>
<p>
<label for="email">Email:</label>
<input type="email" name="email" id="email">
</p>
<p>
<label for="tel">Tel:</label>
<input type="tel" name="tel" id="tel">
</p>
<p>Select Application Type:
<select name="appselect" id="appselect" onchange="myfunc()">
<option value="" selected>Select Here </option>
<option value="Course_Application">Course Application</option>
<option value="Acc_State">Statement of Account</option>
<option value="Invite">Invitation</option>
<option value="Complain_Application">Complain</option>
<option value="SA_Applications">Student Affair Application</option>
</select>
</p>
<script type="application/javascript">
function myfunc(){
var Appread = document.forms[0].appselect.value;
if(Appread.localeCompare("Course_Application")==0)
{
document.write( "<p>");
document.write("<label>");
document.write("<input type='radio' class='CARadio' name='CAType' value='drop' id='CAType_0'>");
document.write("Drop</label>");
document.write("<br>");
document.write("<label>");
document.write("<input type='radio' class='CARadio' name='CAType' value='withdraw' id='CAType_1'>");
document.write("Withdraw</label>");
document.write("<br>");
document.write("<label>");
document.write("<input type='radio' class='CARadio' name='CAType' value='other' id='CAType_2'>");
document.write("Other</label>");
document.write("<br>");
document.write("</p>");
document.write("</p>");
document.write("<p>If Other Please Specify:</p>");
document.write("<p>");
document.write("<textarea name='txfdCApp' id='txtCAP'></textarea>");
document.write("</p>");
}
}
</script>
<p>Application Details:</p>
<p>
<textarea name="textarea" id="textarea" rows="10" cols="30" ></textarea>
</p>
<p>
<input name="submit" type="submit" id="submit2" formmethod="POST" value="Submit">
</p>
<p> </p>
</form>
</body>
</html>
I have only made the code for the first selection option. But the part of the code I have written in myfunc opens in another window. I want to code in a way that for every particular option the additional code opens on the same form after the end of select tag and before the additional information tag.
What am I doing wrong.
I would to suggest to place all your conditionally required fields into a div. Then use JavaScript to determine whether to show the div or not. This eliminates the needs to create HTML nodes manually, which can be messy.
You also need to consider the implications if the user picks the same option in the select list multiple times... it will keep adding nodes, which is bad.
Relevant code snippet:
<div id='extra_questions' style='display: none; background-color: #0094ff;'>
<!-- add radio buttons or whatever here -->
Question #1<br />
Question #2<br />
Etc.<br />
</div>
<script type="application/javascript">
function myfunc() {
var Appread = document.forms[0].appselect.value;
if (Appread.localeCompare("Course_Application") == 0) {
document.getElementById('extra_questions').style.display = 'block';
} else {
document.getElementById('extra_questions').style.display = 'none';
}
}
</script>
You are doing it backwards. :-)
You are writing code with document.write. Where do you think this code goes to?
(Remember that the javascript is executed when an option changes in your SELECT.)
End of document? (Which already had its tags I presume)
The right way to add "live" elements to your page is by creating new DOM elements.
It might seem daunting in the beginning, but give it a shot.
I recommend starting here (and avoid w3schools):
https://developer.mozilla.org/en-US/docs/Web/API/Document/createElement
Try this.
After the </select> tag, add this.
<option value="SA_Applications">Student Affair Application</option>
</select>
</p>
<div id="ApplicationTypeResult"></div>
Then, save this as testresult.html in the same folder.
<p><label><input type='radio' class='CARadio' name='CAType' value='drop' id='CAType_0'>Drop</label><br>
<label><input type='radio' class='CARadio' name='CAType' value='withdraw' id='CAType_1'>Withdraw</label><br>
<label><input type='radio' class='CARadio' name='CAType'>Other</label><br></p>
<p>If Other Please Specify:</p>
<p><textarea name='txfdCApp' id='txtCAP'></textarea></p>
And try this.
function myfunc() {
var Appread = document.forms[0].appselect.value;
if(Appread.localeCompare("Course_Application")==0) {
document.getElementById("ApplicationTypeResult").innerHTML = '<object type="text/html" data="testresult.html"></object>';
}
It will be easier if you use jquery by
function myfunc() {
var Appread = document.forms[0].appselect.value;
if(Appread.localeCompare("Course_Application")==0) {
$("#ApplicationTypeResult").load("testresult.html");
}
Hope this helps, please change your div id name to whatever you might need and note the pathname to whereever you might save the file.
Expected behaviour will be this, (just plain).