I don't know anything about html and most especially javascript.. but we have this activity on how you'll call the javascript function that is located at the <head></head> of the html tag?
And what if there are several functions? Can I call it at the same time in one button? or should I create another function and put all the functions in there?
This is what our activity is all about... in a javascript button, when clicked, it must calculate all transactions? I have 5 functions, and one of them is called by a button tag, while the other 4 are inside of that function. I don't really know what to do... But when I clicked the button, nothing will happen. Btw, it's a Reservation form, so when the button is clicked, it must calculate all the inputs and shows a confirmation page/alert with the prices and such. Thanks guys!
This is my code of the form:
<form name="reserve" action="" id="reserve" method="post">
<fieldset>
<legend>Contact Information</legend>
<label for="name">Name: </label>
<input type="text" name="firstname" value="firstname"
onfocus="if (this.value==this.defaultValue)this.value='';"
onblur="if(this.value=='')this.value=this.defaultValue;"/>
<input type="text" name="lastname" value="lastname"
onfocus="if(this.value==this.defaultValue)this.value='';"
onblur="if(this.value=='')this.value=this.defaultValue;"/>
<br>
<label for="address">Address: </label>
<textarea name="address" cols="30" rows="3"></textarea>
<br>
<label for="city">City: </label>
<input type="text" name="city">
<label for="country">Country: </label>
<select name="country">
<option value=""></option>
<option value="PH">Philippines</option>
<option value="TH">Thailand</option>
<option value="VN">Vietnam</option>
<option value="MY">Malaysia</option>
<option value="ID">Indonesia</option>
<option value="SG">Singapore</option>
</select>
<br>
<label for="email">Email: </label>
<input type="email" name="email">
<label for="phone">Phone: </label>
<input type="tel" name="phone">
</fieldset>
<hr>
<fieldset>
<legend>Accomodation Request</legend>
<label for="checkin">Check-in: </label>
<input type="date" name="checkin">
<label for="checkout">Check-out: </label>
<input type="date" name="checkout">
<br>
<label for="roomtype">Room type: </label> <br>
<input type="checkbox" id="s" name="roomtype" value="superior">Superior |||||
<label for="sguest">No.of guests: </label>
<input type="text" id="supg" name="sguest" size="3"> <br>
<input type="checkbox" id="d" name="roomtype" value=deluxe">Deluxe |||||||
<label for="dguest">No.of guests: </label>
<input type="text" id="delg" name="dguest" size="3"> <br>
<input type="checkbox" id="p" name="roomtype" value="Premier">Premier |||||
<label for="pguest">No.of guests: </label>
<input type="text" id="premg" name="pguest" size="3"> <br>
</fieldset>
<br>
<hr>
<label for="adinfo">Additional Information:</label>
<textarea name="adinfo" cols="40" rows="10"></textarea>
<br><br>
<hr>
<input type="button" name="submit" onclick="formSubmit()"
class="submit" value="Reserve">
</form>
And this is javascript code:
function superiorroom(){
var roomprice=0;
var theForm = document.forms["reserve"]
var s = theForm.elements["s"]
var supg = theForm.elements["supg"]
var t=0;
If (s.checked==true)
{
roomprice=5400;
squantity=parseInt(squantity.value);
t=parseInt(t);
t= (roomprice*squantity)*supg;
}
return t;
}
function deluxeroom(){
var roomprice=0;
var theForm = document.forms["reserve"]
var d = theForm.elements["d"]
var delg = theForm.elements["delg"]
var u=0;
If (d.checked==true)
{
roomprice=7200;
dquantity=parseInt(dquantity.value);
u=parseInt(u);
u= (roomprice*dquantity)*delg;
}
return u;
}
function premiumroom(){
var roomprice=0;
var theForm = document.forms["reserve"]
var p = theForm.elements["p"]
var premg = theForm.elements["premg"]
var v=0;
If (p.checked==true)
{
roomprice=9800;
pquantity=parseInt(pquantity.value);
v=parseInt(v);
v= (roomprice*pquantity)*premg;
}
return u;
}
</script>
I hope you can help me guys!
Hi I have change your code a little check it
<input type="button" name="submit" onclick="return formSubmit()" class="submit" value="Reserve">
I changed your code as like this : Try This
Button
<input type="button" id="submit" name="submit" onclick="return formSubmit()" class="submit" value="Reserve">
Scripts
<script>
$("#submit").click(function () {
if ( document.getElementById("s").checked =checked)
superiorroom();
else if(document.getElementById("d").checked =checked)
deluxeroom();
else if(document.getElementById("p").checked =checked)
premiumroom();
});
</script>
<script>
function superiorroom(){
var roomprice=0;
var theForm = document.forms["reserve"]
var s = theForm.elements["s"]
var supg = theForm.elements["supg"]
var t=0;
If (s.checked==true)
{
roomprice=5400;
squantity=parseInt(squantity.value);
t=parseInt(t);
t= (roomprice*squantity)*supg;
}
return t;
}
function deluxeroom(){
var roomprice=0;
var theForm = document.forms["reserve"]
var d = theForm.elements["d"]
var delg = theForm.elements["delg"]
var u=0;
If (d.checked==true)
{
roomprice=7200;
dquantity=parseInt(dquantity.value);
u=parseInt(u);
u= (roomprice*dquantity)*delg;
}
return u;
}
function premiumroom(){
var roomprice=0;
var theForm = document.forms["reserve"]
var p = theForm.elements["p"]
var premg = theForm.elements["premg"]
var v=0;
If (p.checked==true)
{
roomprice=9800;
pquantity=parseInt(pquantity.value);
v=parseInt(v);
v= (roomprice*pquantity)*premg;
}
return u;
}
</script>
Related
I need to to enter a new value( the standard manufacturing thickness(SMT)) and divid it on /48 then check if the answer < 135 display (pass) if not display (Enter higher value) I tried if else statement but it doesn't work
and also I want to display the (the standard manufacturing thickness(SMT=)) text input side by side with the MAOP(psi)= text input.
<body>
<label for="formulas">Choose a formula:</label>
<select name="formulas" id="formulas">
<option value="free">Pipeline Thickness</option>
</select>
<h2>Enter inputs</h2>
<label for="P">MAOP(psi)=</label>
<input type="number" id="P">
<br>
<label for="D=">Do(in)=</label>
<input type="number" id="D">
<br>
<label for="SMYS">SMYS(psi)=</label>
<input type="number" id="SMYS">
<br>
<label for="DF">DF=</label>
<input type="number" id="DF">
<br>
<label for="T">T=</label>
<input type="number" id="T">
<br>
<label for="E">E ⅉ=</label>
<input type="number" id="E">
<br>
<button type="submit" id="calculate">calculate</button>
<br>
<label for="total">Wall Thickness(in)=</label>
<input type="number" id="total" readonly>
<br>
<label for="SMT">Standerd Manufacturing Thickness (in)=</label>
<input type="number" id="SMT">
<br>
<button type="submit" id="check">Check</button>
<script>
document.getElementById('calculate').addEventListener('click', function() {
var P = +document.getElementById("P").value;
var D = +document.getElementById("D").value;
var SMYS = +document.getElementById("SMYS").value;
var DF = +document.getElementById("DF").value;
var T = +document.getElementById("T").value;
var E = +document.getElementById("E").value;
var SMT = +document.getElementById("SMT").value;
var total = (P * D) / (2 * SMYS * DF * T * E);
document.getElementById("total").value = total;
var Check= (SMT / 48);
function myFunction() {
document.getElementById("Check").value = Check;
}
if (SMT / 48 < 135) {
console.log("pass");
} else {
console.log("enter higher value");
}
});
</script>
</body>
I am trying to detect if an HTML FORM in a web page contains ComboBox or List. . I could detect all the rest and here are my efforts so far. As you can see, the ComboBox is not detected. I understand its not an input control. Is there any other way to do this?
MY SAMPLE CODE:
<html>
<head>
<script language="javascript" type="text/javascript">
function detectTypes() {
var str = document.getElementById("Select1").value;
var inputs = document.querySelectorAll('input');
var inputtype = document.getElementsByTagName ("input");
for(i =0; i < inputs.length; i++)
{
//Output result to console
console.log("The " + i + ". input type = " + inputs[i].type);
//Output result to multiline textbox
var s = inputs[i].type;
document.getElementById('output').value += s.substring(s.length - 10) + '\n';
}
}
</script>
</head>
<body>
<form name="form1" id="form1" method="">
<p>
<label>TextBox </label>
<input type="text" id="Name">
</p>
<p>
<label>Password</label>
<input type="password" id=phone>
</p>
<p>
<label>Dropdown Comobox</label>
<select name="Options" id="Select1">
<option value="Jack,12345">Jack</option>
<option value="John,45678">John</option>
<option value="Tom,98765">Tom</option>
</select>
</p>
<P>
<label>CheckBox</label>
<input type="checkbox" id="check1">
<p>
<label>Radio Button</label>
<input type="radio" id="Option1" name="Option1" value="">
<p>
<label>Color Box</label>
<input type="color" name="ColorCode" id="color-picker">
</form>
Click to List types of controls
<p>
<label>RESULT:</label>
<textarea name="output" id="output" rows="7" cols="30"></textarea>
</p>
</body>
</html>
I would praise your work becse it is very creative
I have solved your problem
<html>
<body>
<form name="form1" id="form1" method="">
<p>
<label>TextBox </label>
<input type="text" id="Name">
</p>
<p>
<label >Password</label>
<input type="password" id="phone">
</p>
<p>
<label>Dropdown Comobox</label>
<select name="Options" id="Select1">
<option value="Jack,12345">Jack</option>
<option value="John,45678">John</option>
<option value="Tom,98765">Tom</option>
</select>
<input type="hidden">
</p>
<P>
<label>CheckBox</label>
<input type="checkbox" id="check1">
<p>
<label>Radio Button</label>
<input type="radio" id="Option1" name="Option1" value="">
<p>
<label>Color Box</label>
<input type="color" name="ColorCode" id="color-picker">
</form>
Click to List types of controls
<p>
<label>RESULT:</label>
<textarea name="output" id="output" rows="7" cols="30"></textarea>
</p>
</body>
</html>
/*
//* user script
function detectTypes() {
//var str = document.getElementById("Select1").value;
var inputs = document.querySelectorAll('input');
var inputtype = document.getElementsByTagName("input");
for(i =0; i < inputs.length; i++)
{
//Output result to console
//console.log("The " + i + ". input type = " + inputs[i].type);
//Output result to multiline textbox
var s = inputs[i].type;
document.getElementById('output').value += s.substring(s.length - 10) + '\n' ;
}
} */
function detectTypes(){
// const inputtype = { "'SELECT'" : 'Dropdown' , 'OPTION' : 'Combo Box'} // I wish, it would work as alert(inputtype.SELECT) will show deopdown
var inputs = document.querySelectorAll("input, select");
var s = "hi";
for(i=0;i<=inputs.length;i++){
var tagnames = inputs[i].tagName;
if(tagnames == "INPUT"){
document.getElementById('output').value += inputs[i].type + '\n';
}else{
document.getElementById('output').value += tagnames.toLowerCase() + '\n';
}
}
}
setTimeout(detectTypes, 1);
I would be glad if you contact. I have to discuss further about this problem. Contact me libertmahin#gmail.com
I'm creating a form in which there are 2 variables namely 'vkey' and 'gene+varient' which is obtained by JS code.
The value is displayed correctly in the html form, just that I cant POST this value when I submit the form.
How can I POST the 2 mentioned values when I submit the form?
<form action="acmg_controller.php" method="POST" target="_blank">
<p>
Source:
<select name="source">
<option value="pubmed">PubMed</option>
<option value="other">other</option>
</select>
PMID:
<input type="text" name = "pmid" style="width: 80px"> <br>
<input type="hidden" name="vkey" id="pvkey">
vkey:
<script>
var hashParams = window.location.hash.substr(1).split('&');
var temVkey = hashParams[2].split('=');
var vkey = temVkey[1];
document.write(vkey);
</script> <br>
gene+varient
<input type="hidden" name="genevar">
<script>
var hashParams = window.location.hash.substr(1).split('&');
var temvarient = hashParams[1].split('=');
var varient = temvarient[1];
var hashParams_ = window.location.hash.substr(1).split('&');
var temgene = hashParams_[0].split('=');
var gene = temgene[1];
document.write(gene+' '+varient);
</script> <br>
</p>
<label>Summary:</label> <br>
<textarea style = "width: -webkit-fill-available;height: 400px" name="text">
</textarea> <br><br>
<input type="submit" value="Submit">
</form>
You just need to set the variables equal to the value in your hidden fields, like:
document.getElementById('pvkey').value = vkey;
Should give you:
<form action="acmg_controller.php" method="POST" target="_blank">
<p>
Source:
<select name="source">
<option value="pubmed">PubMed</option>
<option value="other">other</option>
</select>
PMID:
<input type="text" name = "pmid" style="width: 80px"> <br>
<input type="hidden" name="vkey" id="pvkey">
vkey:
<script>
var hashParams = window.location.hash.substr(1).split('&');
var temVkey = hashParams[2].split('=');
var vkey = temVkey[1];
document.write(vkey);
document.getElementById('pvkey').value = vkey;
</script> <br>
gene+varient
<input type="hidden" name="genevar" id="genevar">
<script>
var hashParams = window.location.hash.substr(1).split('&');
var temvarient = hashParams[1].split('=');
var varient = temvarient[1];
var hashParams_ = window.location.hash.substr(1).split('&');
var temgene = hashParams_[0].split('=');
var gene = temgene[1];
document.write(gene+' '+varient);
document.getElementById('genevar').value = gene+' '+varient;
</script> <br>
</p>
<label>Summary:</label> <br>
<textarea style = "width: -webkit-fill-available;height: 400px" name="text">
</textarea> <br><br>
<input type="submit" value="Submit">
</form>
jsp :
<input id="companyName" class="cpn" type="text" value="" ></input>
<input id="phoneNumber" class="number" type="text" value=""></input>
<textarea id="remark" placeholder="消息备注"></textarea>
<input class="submit" type="button" onclick="apply()" value="在线提交" ></input>//define some block<input>
js :
var companyName = $("#companyName").val();//get the value in block<input>
var phoneNumber = $("#phoneNumber").val();
var remark = $('#remark').val();
firefox and google shows .val() isn't a function,so i change the code:
var companyName = document.getElementById("companyName").value;
alert(companyName);// not use the jquery
var phoneNumber = document.getElementById("phoneNumber").value;
alert(phoneNumber);
now it gets the vaule,but ajax code still can't work:
can anyone tell me?
# Please try bellow code in javascript #
<script>
function apply(){
var companyName = document.getElementById("companyName").value;
alert(companyName);
var phoneNumber = document.getElementById("phoneNumber").value;
alert(phoneNumber);
var remark = document.getElementById("remark").value;
alert(remark);
}
</script>
<input id="companyName" class="cpn" type="text" value="" ></input>
<input id="phoneNumber" class="number" type="text" value=""></input>
<textarea id="remark" placeholder="enter"></textarea>
<button class="submit" onclick="apply();">Submit</button>
# Please try bellow code in Jquery#
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script>
function apply(){
var companyName = $("#companyName").val();
alert(companyName);
var phoneNumber = $("#phoneNumber").val();
alert(phoneNumber);
var remark = $('#remark').val();
alert(remark);
}
</script>
<input id="companyName" class="cpn" type="text" value="" ></input>
<input id="phoneNumber" class="number" type="text" value=""></input>
<textarea id="remark" placeholder="enter"></textarea>
<button class="submit" onclick="apply();">Submit</button>
I currently have been working on this code and I can't seem to figure it out. I am planning to make it so that if the radio button is pressed that shipping is not free, that an input field pops up to specifying what the addition cost will be using DOM. I am also trying to figure out how to add text to describe the input field, and to validate the input field.
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<script>
function myFunction() {
var x = document.createElement("INPUT");
var c = 1;
if (c = 1) {
x.setAttribute("type", "text");
var sp2 = document.getElementById("emailP");
// var br = document.createElement("br");
// sp2.appendChild(br);
// alert("added break");
var sp2 = document.getElementById("emailP");
var parentDiv = sp2.parentNode;
parentDiv.insertBefore(x, sp2);
c++;
alert("Added Text Box");
}
}
</script>
<form action="#" method="post" onsubmit="alert('Your form has been submitted.'); return false;">
<p class="boldParagraph">Upload an Image:</p>
<input type="file" id="pic" accept="image/*" required>
<p class="boldParagraph">Name of seller:</p>
<input class="averageTextBox" type="text" id="seller" value="" required>
<p class="boldParagraph" id = "tip3P">Shipping costs are free:</p>
<input type="radio" name="tip3" value="3" checked /> Yes
<input type="radio" name="tip3" value="4" onclick="myFunction(); this.onclick=null;"/> No
<p class="boldParagraph" id = "emailP">Email of seller:</p>
<input class="averageTextBox" type="email" id="emailAddress" value="" required>
<p class="boldParagraph">Closing date for auction:</p>
<input type="date" id="closeDate" value="" required>
<br><br>
<button>Submit</button>
</form>
</body>
</html>
Create a label element and populate text using innerHTML. and then append to DOM.
Example Snippet:
function myFunction() {
var label = document.createElement("label");
label.innerHTML = "<br>Shipment Cost : ";
var x = document.createElement("INPUT");
var c = 1;
if (c = 1) {
x.setAttribute("type", "text");
var sp2 = document.getElementById("emailP");
// var br = document.createElement("br");
// sp2.appendChild(br);
// alert("added break");
var sp2 = document.getElementById("emailP");
var parentDiv = sp2.parentNode;
parentDiv.insertBefore(x, sp2);
parentDiv.insertBefore(label, x);
c++;
alert("Added Text Box");
}
}
<form action="#" method="post" onsubmit="alert('Your form has been submitted.'); return false;">
<p class="boldParagraph">Upload an Image:</p>
<input type="file" id="pic" accept="image/*" required>
<p class="boldParagraph">Name of seller:</p>
<input class="averageTextBox" type="text" id="seller" value="" required>
<p class="boldParagraph" id="tip3P">Shipping costs are free:</p>
<input type="radio" name="tip3" value="3" checked />Yes
<input type="radio" name="tip3" value="4" onclick="myFunction(); this.onclick=null;" />No
<p class="boldParagraph" id="emailP">Email of seller:</p>
<input class="averageTextBox" type="email" id="emailAddress" value="" required>
<p class="boldParagraph">Closing date for auction:</p>
<input type="date" id="closeDate" value="" required>
<br>
<br>
<button>Submit</button>
</form>
OR
You can keep the text box hidden and show it when user clicks no. Also, apply validations only when no is selected for shipment radio button.
I suggest use jQuery, see the snippet below:
jQuery is a fast, small, and feature-rich JavaScript library. It makes things like HTML document traversal and manipulation, event handling, animation, and Ajax much simpler with an easy-to-use API that works across a multitude of browsers. With a combination of versatility and extensibility, jQuery has changed the way that millions of people write JavaScript.
var radioButtons = $("[name=tip3]");
radioButtons.on("change", function() {
if ($("[name=tip3]:checked").val() == "3") {
$("#shipmentDetail").hide();
} else {
$("#shipmentDetail").show();
}
})
$("#submit").on("click", function() {
var flag = true;
if ($("[name=tip3]:checked").val() == "4") {
if ($("#shipmentDetail").val() == "") {
flag = false;
alert("enter some value");
}
}
//other validations here
if (flag) {
$("#form").submit()
}
})
#shipmentDetail {
display: none
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form id="form" action="#" method="post">
<p class="boldParagraph">Upload an Image:</p>
<input type="file" id="pic" accept="image/*" required>
<p class="boldParagraph">Name of seller:</p>
<input class="averageTextBox" type="text" id="seller" value="" required>
<p class="boldParagraph" id="tip3P">Shipping costs are free:</p>
<input type="radio" name="tip3" value="3" checked />Yes
<input type="radio" name="tip3" value="4" />No
<label id="shipmentDetail" for="price">Shipment Cost:
<input id="price" type="text" value="" />
</label>
<p class="boldParagraph" id="emailP">Email of seller:</p>
<input class="averageTextBox" type="email" id="emailAddress" value="" required>
<p class="boldParagraph">Closing date for auction:</p>
<input type="date" id="closeDate" value="" required>
<br>
<br>
<button id="submit">Submit</button>
</form>
replace
alert("Added Text Box");
with:
var additional_fees = prompt("Type in");
x.setAttribute("value", additional_fees)