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
Related
I'm making an HTML form and am fairly new to all of this. I want to ask the user different questions in a form using drop-down box and textarea. After the user selects/types in all their answers, I want to be able to make a button at the bottom where the user will click it and it will display all of their inputs without them having to press submit after each question.
I'm completely lost and don't know how to do this at all. I think this will include some JavaScript which I also know absolutely nothing about-I only know HTML(noob-still practicing) and some css. Can anyone please fix my script/show how it should look like. Would be greatly appreciated!
<!DOCTYPE html>
<HTML>
<head>
<title>Ttile Ex.</title>
</head>
<body>
<h1>...Certification Creation Form</h1>
<div>
<label for="Choose">Choose the type of...</label>
</div>
<div>
<select name="type of CSR">
<option>One</option>
<option>Two</option>
<option>Three</option>
</select>
</div>
<div>
<label for ="CN"> Enter the...</label>
</div>
<div>
<textarea cols="50" rows="5"></textarea>
</div>
<div>
<label for ="FQDN"> Enter the FQDN...</label>
</div>
<div>
<textarea cols="50" rows="5"></textarea>
</div>
<div>
<label for ="alternate name"> Enter the alternate name</label>
</div>
<div>
<textarea cols="50" rows="5"></textarea>
</div>
<div>
<label for ="name of cert"> Enter the name you want to give to the cert</label>
</div>
<div>
<textarea cols="50" rows="5"></textarea>
</div>
<!-- SOME BUTTON HERE TO CLICK AND DISPLAY ALL THEIR INPUT -->
</form>
</body>
</HTML>
I tried to find some tutorials on how to do this but it would be for displaying only one one of the inputs or after each singular input :/
For submitting your inputs needs to be inside a form tag. The label tag "for" should be equal to input tage "ID" and it is good practice to put you JavaScript at the end of document.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<form action="#">
<h1>...Certification Creation Form</h1>
<div>
<label for="typeOfCSR">Choose the type of...</label>
<select name="typeOfCSR" id="typeOfCSR">
<option value="">Select an Option </option>
<option value="One">One</option>
<option value="Two">Two</option>
<option value="Three">Three</option>
</select>
</div>
<div>
<label for="CN"> Enter the...</label>
<textarea cols="50" rows="5" id="CN"></textarea>
</div>
<div>
<label for="FQDN"> Enter the FQDN...</label>
<textarea cols="50" rows="5" id="FQDN"></textarea>
</div>
<div>
<label for="alternateName"> Enter the alternate name</label>
<textarea cols="50" rows="5" id="alternateName"></textarea>
</div>
<div>
<label for="nameOfCert"> Enter the name you want to give to the cert</label>
<textarea cols="50" rows="5" id="nameOfCert"></textarea>
</div>
<button type="button" id="review">Review</button>
<button type="submit">Submit</button>
</form>
<br/>
<div id="result" style="border: 3px solid black;"> Result will show here</div>
<script>
const btn = document.getElementById('review');
btn.addEventListener('click',()=>{
let typeOfCSR = document.getElementById('typeOfCSR').value;
let CN = document.getElementById('CN').value;
let FQDN = document.getElementById('FQDN').value;
let alternateName = document.getElementById('alternateName').value;
let nameOfCert = document.getElementById('nameOfCert').value;
document.getElementById('result').innerHTML = typeOfCSR +"<br/>"+ CN +"<br/>"+ FQDN +"<br/>"+ alternateName +"<br/>"+ nameOfCert;
})
</script>
</body>
</html>
Yes you need basic javascript to print out the result or input on the same page. I just added JS into your code please check this out-
<!DOCTYPE html>
<HTML>
<head>
<title>Ttile Ex.</title>
</head>
<script>
function testVariable() {
var strText = document.getElementById("textone").value;
var strText1 = document.getElementById("textTWO").value;
var strText3 = document.getElementById("textThree").value;
var result = strText + ' ' + strText1 + ' ' + strText3;
document.getElementById('spanResult').textContent = result;
}
</script>
<body>
<h1>...Certification Creation Form</h1>
<div>
<label for="Choose">Choose the type of...</label>
</div>
<div>
<select name="type of CSR">
<option>One</option>
<option>Two</option>
<option>Three</option>
</select>
</div>
<div>
<label for="CN"> Enter the...</label>
</div>
<div>
<textarea cols="50" id="textone" rows="5"></textarea>
</div>
<div>
<label for="FQDN"> Enter the FQDN...</label>
</div>
<div>
<textarea cols="50" id="textTWO" rows="5"></textarea>
</div>
<div>
<label for="alternate name"> Enter the alternate name</label>
</div>
<div>
<textarea cols="50" id="textThree" rows="5"></textarea>
</div>
<div>
<label for="name of cert"> Enter the name you want to give to the cert</label>
</div>
<div>
<textarea cols="50" rows="5"></textarea>
</div>
<!-- SOME BUTTON HERE TO CLICK AND DISPLAY ALL THEIR INPUT -->
<button onclick="testVariable()">Submit</button> <br />
<span id="spanResult">
</span>
</form>
</body>
</HTML>
Please check the code
While editing a podcast, I am getting an option being selected through the PHP code and now I want to write a j-query if the option is selected from the select field.
I am gone through many question and answer give in the Stack Overflow but all of them seems to output the effect in click even or in change event.
<div class="form-group pt-2 input-upload">
<label for="EditedBy">Podcast Type : </label>
<select class="form-control" name="podcast_type" id="podcast_type">
<option selected disabled hidden>-- Select Any One --</option>
<option id="audio1" name="audio1" value="audio1" >Audio</option>
<option id="video1" name="video1" value="video1" >Video</option>
</select>
</div>
<div class="form-group" id="input-upload">
<label for="avatar">Upload Audio:</label><br>
<input type="file" class="upload" id="fileUp" name="audio">
</div>
<div class="form-group" style="width:30%" id="input-file">
<label for="Filename">Audio Duration: </label>
<input id="infos" class="form-control" name="duration">
</div>
<div class="form-group" id="input-upload-file">
<label for="avatar">Video url:</label><br>
<input type="url" name="link" id="link" class="form-control" placeholder="link" value="">
</div>
I have already written j-query if the user is trying to add a post but when editing post my j-query code does not work like expected.
Following is the code I have written while adding a podcast.
$('#podcast_type').change(function(){
if($('#podcast_type').val() == 'audio1') {
$('#input-upload').show();
$('#input-file').show();
} else {
$('#input-upload').hide();
$('#input-file').hide();
}
});
$('#podcast_type').change(function(){
if($('#podcast_type').val() == 'video1') {
$('#input-upload-file').show();
} else {
$('#input-upload-file').hide();
}
});
You can combine the 2 events in one.
$('#podcast_type').change(function() {
var val = $('#podcast_type').val(); //Get value of the select
if (val == 'audio1') { //If audio, hide 1 input. Show 2
$('#input-upload').show();
$('#input-file').show();
$('#input-upload-file').hide();
} else if (val == 'video1') { //If video, hide 2 input. Show 1
$('#input-upload').hide();
$('#input-file').hide();
$('#input-upload-file').show();
} else {
$('#input-upload').hide(); //Hide all intially
$('#input-file').hide();
$('#input-upload-file').hide();
}
}).change(); //Trigger change on load.
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="form-group pt-2 input-upload">
<label for="EditedBy">Podcast Type : </label>
<select class="form-control" name="podcast_type" id="podcast_type">
<option selected disabled hidden>-- Select Any One --</option>
<option id="audio1" name="audio1" value="audio1">Audio</option>
<option id="video1" name="video1" value="video1">Video</option>
</select>
</div>
<div class="form-group" id="input-upload">
<label for="avatar">Upload Audio:</label><br>
<input type="file" class="upload" id="fileUp" name="audio">
</div>
<div class="form-group" style="width:30%" id="input-file">
<label for="Filename">Audio Duration: </label>
<input id="infos" class="form-control" name="duration">
</div>
<div class="form-group" id="input-upload-file">
<label for="avatar">Video url:</label><br>
<input type="url" name="link" id="link" class="form-control" placeholder="link" value="">
</div>
Before listening to change event, you need to Initialize inputs state on page load
<?php
$podcast_type = 'audio1';
?>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<div class="form-group pt-2 input-upload">
<label for="EditedBy">Podcast Type : </label>
<select class="form-control" name="podcast_type" id="podcast_type">
<option disabled>-- Select Any One --</option>
<option id="audio1" value="audio1" <?= ($podcast_type == 'audio1') ? 'selected' : '' ?>>Audio</option>
<option id="video1" value="video1" <?= ($podcast_type == 'video1') ? 'selected' : '' ?>>Video</option>
</select>
</div>
<div class="form-group" id="input-upload">
<label for="avatar">Upload Audio:</label><br>
<input type="file" class="upload" id="fileUp" name="audio">
</div>
<div class="form-group" style="width:30%" id="input-file">
<label for="Filename">Audio Duration: </label>
<input id="infos" class="form-control" name="duration">
</div>
<div class="form-group" id="input-upload-file">
<label for="avatar">Video url:</label><br>
<input type="url" name="link" id="link" class="form-control" placeholder="link" value="">
</div>
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
<script>
$(function() {
var podcast = $('#podcast_type');
var podcast_type = podcast.val();
// Initialize input state on page load
setPodcastType(podcast_type);
podcast.change(function() {
setPodcastType($(this).val());
});
function setPodcastType(podcast_type)
{
if (podcast_type == 'audio1') {
$('#input-upload').show();
$('#input-file').show();
// Hide video input
$('#input-upload-file').hide();
return true;
}
$('#input-upload-file').show();
// Hide audio input
$('#input-upload').hide();
$('#input-file').hide();
}
});
</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");
});
}