I have a multiples select elements, and I submit them with one button. Here is an example :
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8'>
<meta http-equiv='X-UA-Compatible' content='IE=edge'>
<title>Page Title</title>
<meta name='viewport' content='width=device-width, initial-scale=1'>
</head>
<body>
<div class="inner">
<form method="POST" action="test">
<label name="first">first</label>
<select style="display:inline-block">
<option value="value1" name ="value1">test 1 </option>
<option value="value2" name= "value2">test 2</option>
</select>
<label name="second">second</label>
<select style="display:inline-block">
<option value="4">1</option>
<option value="5">2</option>
<option value="6">3</option>
<input type="submit" value="Submit" class="button" >
</form>
</div>
</body>
</html>
and I'm trying to handle them using nodejs and express as follows:
const express = require('express');
const app = express()
var path = require('path')
var fs = require('fs')
app.use(express.static('public'))
app.use(express.urlencoded())
console.log(__dirname)
app.get('/',function(req,res){
res.sendFile(path.join(__dirname+'/index.html'))
})
app.post('/test', (req, res) => {
console.log(req.body.value1)
})
app.listen(2000)
apparently it's not correct, so my question is how can I do it?
thanks in advance !
You have done mistakes while writing html I think.
First you have to add name attribute to select boxes, so you can use values on server side.
Secondly you didn't closed second select element.
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8'>
<meta http-equiv='X-UA-Compatible' content='IE=edge'>
<title>Page Title</title>
<meta name='viewport' content='width=device-width, initial-scale=1'>
</head>
<body>
<div class="inner">
<form method="POST" action="test">
<label name="first">first</label>
<select style="display:inline-block" name='select_box_1'>
<option value="value1" name ="value1">test 1 </option>
<option value="value2" name= "value2">test 2</option>
</select>
<label name="second">second</label>
<select style="display:inline-block" name="select_box_2">
<option value="4">1</option>
<option value="5">2</option>
<option value="6">3</option>
</select>
<input type="submit" value="Submit" class="button" >
</form>
</div>
</body>
</html>
Related
Hi I need the help regarding the website backend I did frontend of website such as the layouts and pages using the html and CSS but I'm stuck regarding which language shall I choose I'm currently working on VS code and installed PHP and JavaScript (NodeJS) but failed on both or I don't have enough knowledge about it
<html>
<head>
<!-- Basic -->
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
<meta name="keywords" content="" />
<meta name="description" content="" />
<meta name="author" content="" />
<script type="text/javascript">
function callvalue(){
var name = document.getElementById("name").value;
var email = document.getElementById("email").value;
var phone = document.getElementById("Phone").value;
var message = document.getElementById("message").value;
document.writeln("Your info: "+" <br> "+" your name: "+ name +"<br>");
document.writeln("Your info: "+" <br> "+" your email: "+ email +"<br>");
document.writeln("Your info: "+" <br> "+" your phone num: "+ phone +"<br>");
document.writeln("Your info: "+" <br> "+" your message: "+ message +"<br>");
}
</script>
<script type="module">
export{name,email,phone,message};
</script>
And
<form onsubmit="callvalue()">
<div class="form-group">
<label for="exampleInputName1">Name</label>
<input type="text" class="form-control" id="name">
</div>
<div class="form-group">
<label for="exampleInputNumber1">Phone Number</label>
<input type="text" class="form-control" id="Phone">
</div>
<div class="form-group">
<label for="exampleInputEmail1">Email</label>
<input type="email" class="form-control" id="email">
</div>
<div class="form-group ">
<label for="inputState">Select medicine</label>
<select id="inputState" class="form-control">
<option selected>Medicine 1</option>
<option selected>Medicine 2</option>
<option selected>Medicine 3</option>
<option selected>Medicine 4</option>
<option selected>Medicine 5</option>
<option selected>Medicine 6</option>
</select>
</div>
<div class="form-group">
<label for="exampleInputMessage">Message</label>
<input type="text" class="form-control" id="message">
</div>
<button type="submit" class="btn btn-success">Send</button>
</form>
I want the variables to store these data from this form in MS Sql server but in JavaScript while using import I faced various error like ERR Module and my contact.html isn't coming in options so is it possible send these variable from python or JavaScript plz let me know
I want to show different divs based on the option I select on a Bootstrap dropdown menu. However, even if it seems easy, I can't find a proper example of this. How should I change the JS, if I have to change it?
This is my code so far:
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<title>Homepage</title>
</head>
<body>
<form>
<div class="form-row align-items-center">
<div class="col-auto my-1">
<label class="mr-sm-2" for="inlineFormCustomSelect">Preference</label>
<select class="custom-select mr-sm-2" id="inlineFormCustomSelect">
<option selected>Choose...</option>
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
</select>
<div>
<p id="1">Text1</p>
</div>
<div>
<p id="2">Text2</p>
</div>
<div>
<p id="3">Text3</p>
</div>
<div>
<p id="4">Text4</p>
</div>
</div>
</div>
</form>
</body>
</html>
Would this fix your problem ??
$('#inlineFormCustomSelect').change(function() {
$('.child-item').removeClass('show'); // hide all visible
$('#' + $( this ).val()).addClass('show'); // Show what is necessary
});
.child-item {
display: none
}
.show {
display: block
}
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"
integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<script src="https://public.flourish.studio/resources/embed.js"></script>
<title>Homepage</title>
</head>
<body>
<form>
<div class="form-row align-items-center">
<div class="col-auto my-1">
<label class="mr-sm-2" for="inlineFormCustomSelect">Preference</label>
<select class="custom-select mr-sm-2" id="inlineFormCustomSelect">
<option selected>Choose...</option>
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
<option value="4">Four</option>
</select>
<hr>
<div>
<div id="1" class="child-item ">
<div class="flourish-embed flourish-chart"
data-src="visualisation/2406500"
data-url="https://flo.uri.sh/visualisation/2406500/embed">
</div>
</div>
<div>
<p id="2" class="child-item">Text2</p>
</div>
<div>
<p id="3" class="child-item">Text3</p>
</div>
<div>
<p id="4" class="child-item">Text4</p>
</div>
</div>
</div>
</form>
<script src="script.js"></script>
</body>
</html>
So here's the thing, I want to make a price calculator by letting the user fill up the form but it won't work. Also, I wanted to show the result on the input field. Thank you in advance.
<!doctype HTML>
<html lang="en">
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>
</title>
<head>
</head>
<body>
<form role="form" id="price" name="price">
<select class="" id="itemselect" onchange="calculate()">
<option id="itemprice" value="1.500">Adult's T-Shirt</option>
<option id="itemprice" value="1.250">Kid's T-Shirt</option>
<option id="itemprice" value="3.000">Dubai Polo</option>
<option id="itemprice" value="6.000">Aerocool Polo</option>
<option id="itemprice" value="4.000">Aerocool Crewneck</option>
<option id="itemprice" value="5.000">Hoodies</option>
</select>
<p><input type="text" id="qty" onchange="calculate()" value=""></p>
<p><input type="text" id="result" value="" disabled></p>
</form>
<script type="text/javascript">
function calculate(price){
var item = document.getElementByID("itemselect").value;
var qty = document.getElementByID("qty");
item = parseInt(item);
qty = parseInt(qty);
var result = item*qty;
document.getElementByID("result").value=result;
}
</script>
</body>
</html>
mistakes
Please change getElementByID by getElementById.
parseInt only parse value in integer so you multiplication give you only integer value so you have to parse in float. it's give you perfect output.
<!doctype HTML>
<html lang="en">
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>
</title>
<head>
</head>
<body>
<form role="form" id="price" name="price">
<select class="" id="itemselect" onchange="calculate()">
<option id="itemprice" value="1.500">Adult's T-Shirt</option>
<option id="itemprice" value="1.250">Kid's T-Shirt</option>
<option id="itemprice" value="3.000">Dubai Polo</option>
<option id="itemprice" value="6.000">Aerocool Polo</option>
<option id="itemprice" value="4.000">Aerocool Crewneck</option>
<option id="itemprice" value="5.000">Hoodies</option>
</select>
<p><input type="text" id="qty" onchange="calculate()" value=""></p>
<p><input type="text" id="result" value="" disabled></p>
</form>
<script type="text/javascript">
function calculate(price){
var item = document.getElementById("itemselect").value || 0;
var qty = document.getElementById("qty").value || 0;
item = parseFloat(item).toFixed(2);
qty = parseFloat(qty).toFixed(2);
var result = parseFloat(item*qty).toFixed(2);
document.getElementById("result").value=result;
}
</script>
</body>
</html>
I am building a data aqusition system using PhoneGap. .I am trying to store my form data temporary on local storage using JSON,Data should be visible after I close and reopen the application (after pressing Get Data button),But after I close it only the lastly entered record is visible
This is my code
<!DOCTYPE html>
<html>
<head>
<title>Household Profile DB storage</title>
<meta charset="utf-8">
<meta name="viewport" content="user-scalable=no,
initial-scale=1, maximum-scale=1,
minimum-scale=1,width=device-width" />
<link rel="stylesheet" href="jquery.mobile-1.4.2/jquery.mobile-1.4.2.min.css">
<link rel="stylesheet" href="css/table.css">
<script type="text/javascript" src="js/jquery-1.9.1.min.js"></script>
<script type="text/javascript" src="jquery.mobile-1.4.2/jquery.mobile-1.4.2.min.js"></script>
<script type="text/javascript" src="js/iscroll.js"></script>
<script type="text/javascript" charset="utf-8">
function onDeviceReady() {
persistData(homeId,owner,gramaND,contactNo,address,race);
}
function saveLocal(form){
if (window.localStorage) {
var fhomeId = form.homeId.value,
fowner = form.owner.value,
fgramaND = form.gramaND.value,
fcontactNo= form.contactNo.value,
faddress = form.address.value,
frace = form.race.value;
alert("hi");
var highscores = [{"homeId": fhomeId,
"owner":fowner,
"gramaND":fgramaND,
"contactNo":fcontactNo,
"address":faddress,
"race":frace}];
localStorage.setItem("highscores",JSON.stringify(highscores));
alert("The data has been stored successfully.");
} else {
alert("Your Browser does not support LocalStorage.");
}
}
function readLocal(){
if (window.localStorage) {
var scores =[];
//Get the highscores object
scores = localStorage.getItem("highscores");
scores = JSON.parse(scores);
for (i=0;i<scores.length;i++){
var text = "homeId :"+scores[i].homeId +"<br>"+
"owner:"+ scores[i].owner+"<br>"+
"address"+scores[i].address +"<br>"+
"gramaND"+scores[i].gramaND +"<br>"+
"contactNo"+scores[i].contactNo+"<br>" +
'<Button value="DELETE" onclick="'+scores.splice(i, 0)+'><>/Button>';
var tbodyx = document.getElementsByTagName("tbody");
var tr=document.createElement("TR");
var td=document.createElement("TD");
td.innerHTML = text;
tr.appendChild(td);
tbody.appendChild(tr);
}
}
}
</script>
</head>
<body>
<div data-role="page" id="page1">
<!--/header-->
<div data-role="header" data-position="inline" data-theme="b">
Back
<h1>Household Profile</h1>
Menu
</div>
<!--/header-->
<div id="wrapper">
<form id="userInput" action ="" method="GET">
<div data-role="content">
<div data-role="fieldcontain">
<label > Home ID </label>
<input class="inputClass" id="homeId" placeholder="H0001" value="" data-mini="true" type="text">
</div>
<div data-role="fieldcontain">
<label > Owner </label>
<input class="inputClass" id="owner" placeholder="Aberathne" value="" type="text">
</div>
<div data-role="fieldcontain">
<label class="select">GramaNiladhari Division</label>
<select class="inputClass" id="gramaND">
<option value="GramaNiladhari Division 1">GramaNiladhari Division 1</option>
<option value="GramaNiladhari Division 2">GramaNiladhari Division 2</option>
<option value="GramaNiladhari Division 3">GramaNiladhari Division 3</option>
<option value="GramaNiladhari Division 4">GramaNiladhari Division 4</option>
</select>
</div>
<div data-role="fieldcontain">
<label > Contact No </label>
<input class="inputClass" id="contactNo" placeholder="071-9545-073" value="" type="number">
</div>
<div data-role="fieldcontain">
<label >Address:</label>
<textarea cols="40" rows="8" class="inputClass" id="address"></textarea>
</div>
<div class="ui-block-a"><button type="submit" data-theme="d">Location in a Map</button></div>
<div data-role="fieldcontain">
<label >Race</label>
<select class="inputClass" id="race">
<option value=" Sinhalese"> Sinhalese</option>
<option value=" Sri Lanka Tamils"> Sri Lanka Tamils</option>
<option value=" Moors"> Moors</option>
<option value=" Indian Tamils "> Indian Tamils </option>
<option value=" Malays "> Malays </option>
<option value=" Burghers "> Burghers </option>
</select>
</div>
<input class="buttonClass" type="button" value="Insert Data" onclick="saveLocal(this.form);">
</div>
</form>
</div>
<input class="buttonClass" type="button" value="get Data" onclick="readLocal();">
<!-- <p id="dhomeId"></p>
<p id="downer"></p>
<p id="dgramaND"></p>
<p id="dcontactNo"></p>
<p id="daddress"></p>
<p id="drace"></p>-->
<table border="1">
<tbody id="tbody">
<tr><td>test1</td></tr>
<tr><td>test2</td></tr>
</tbody>
</table>
</div>
</body>
</html>
Also I need to expand my code to edit and delete record from local storage.
Of course it should only show the last entered JSON. You're not appending the scores rather you're replacing it. When you are executing the command
localStorage.setItem("highscores",JSON.stringify(highscores));
you just replaced previous highscores value on the localStorage. I can't see any append mechanism in your code. What you need to do is retrieve the previous JSON data, add the new highscores with previous data and then save it again.
Since I'm using a multipage template for my app, data that I have previously inputted into forms and selects appears when I navigate back to the same page. I'm looking for a way to wipe the page back to default when a user comes back to it. On the pages, there are forms, selects, checkboxes and img tags.
This has been suggested to me:
just add custom attribute (like data-default="true") to your default element (for example 0)
but I'd like further clarification if possible. Thanks
Working example: http://jsfiddle.net/vds2U/66/
Usage:
Take a look at provided code, every element used has a custom attribute called data-default-value, it is used to determine which element is a default one.
HTML:
<!DOCTYPE html>
<html>
<head>
<title>jQM Complex Demo</title>
<meta http-equiv='Content-Type' content='text/html; charset=utf-8'/>
<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; minimum-scale=1.0; user-scalable=no; target-densityDpi=device-dpi"/>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.min.css" />
<!--<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>-->
<script src="http://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.min.js"></script>
</head>
<body>
<div data-role="page" id="index" data-theme="a" >
<div data-role="header">
<h3>
First Page
</h3>
Next
</div>
<div data-role="content">
<input type="button" id="clr-form-btn" value="Clear form"/>
<label for="basic">Text Input:</label>
<input type="text" name="name" id="basic" value=""/>
<label for="flip-1">Flip switch:</label>
<select name="flip-1" id="flip-1" data-role="slider" data-default-value="off">
<option value="off">Off</option>
<option value="on">On</option>
</select>
<fieldset data-role="controlgroup">
<legend>Choose a pet:</legend>
<input type="radio" name="radio-choice" id="radio-choice-1" value="choice-1"/>
<label for="radio-choice-1">Cat</label>
<input type="radio" name="radio-choice" id="radio-choice-2" value="choice-2" checked="checked" data-default-value=""/>
<label for="radio-choice-2">Dog</label>
<input type="radio" name="radio-choice" id="radio-choice-3" value="choice-3" />
<label for="radio-choice-3">Hamster</label>
<input type="radio" name="radio-choice" id="radio-choice-4" value="choice-4" />
<label for="radio-choice-4">Lizard</label>
</fieldset>
<label for="select-choice-0" class="select">Shipping method:</label>
<select name="select-choice-0" id="select-choice-0" data-default-value="standard">
<option value="standard">Standard: 7 day</option>
<option value="rush">Rush: 3 days</option>
<option value="express">Express: next day</option>
<option value="overnight">Overnight</option>
</select>
</div>
<div data-role="footer" data-position="fixed">
</div>
</div>
<div data-role="page" id="second" data-theme="a" >
<div data-role="header">
<h3>
Second Page
</h3>
Back
</div>
<div data-role="content">
</div>
<div data-role="footer" data-position="fixed">
</div>
</div>
</body>
</html>
Javascript:
$(document).on('pagebeforeshow', '#index', function(){
cleanForm();
});
function cleanForm() {
var page = $.mobile.activePage;
// Reset input elements
page.find('.ui-content *').filter("[type='text']").each(function(){
$(this).val('');
});
// Reset drop down elements
page.find('.ui-content *').filter(".ui-select").each(function(){
var select = $(this).find('select');
var defaultValue = select.attr('data-default-value');
select.val(defaultValue);
select.selectmenu('refresh', true);
});
// Reset flip switch elements
page.find('.ui-content *').filter('[data-role="slider"]').each(function(){
var flipSwitch = $(this);
var defaultValue = flipSwitch.attr('data-default-value');
flipSwitch.val(defaultValue);
flipSwitch.slider('refresh');
});
// Reset radio elements
page.find('.ui-content *').filter('fieldset:has([type="radio"])').each(function(){
var radio = $(this);
var checkedRadio = radio.find(':checked').prop("checked",false).checkboxradio("refresh");
var defaultRadio = radio.find('[data-default-value]').prop("checked",true).checkboxradio("refresh");
});
}