I'm new to this page. I have some problem regarding this sorting that I made. This is the code:
<html>
<body>
<p>Enter First Number:<input type="text" id="1"></p>
<p>Enter Second Number:<input type="text" id="2"></p>
<p>Enter Third Number:<input type="text" id="3"></p>
<p>Enter Fourth Number:<input type="text" id="4"></p>
<p>Enter Fifth Number:<input type="text" id="5"></p>
<button type="button" onclick="SortThis()" >Sort</button>
<script>
function SortThis()
{
var tempVar;
var x;
var y;
var numbers = new Array[];
numbers[0]=document.getElementById("1");
numbers[1]=document.getElementById("2");
numbers[2]=document.getElementById("3");
numbers[3]=document.getElementById("4");
numbers[4]=document.getElementById("5");
for(x=0; x<=4 ; x++)
{
for(y=0; y<=4; y++)
{
if(numbers[x]<numbers[y])
{
tempVar=numbers[x];
numbers[x]=numbers[y];
numbers[y]=tempVar;
} } } }
for(var x=0; x<=numbers.length ; x++)
{
var output =document.getElementById("output");
output.innerHTML=(numbers[x] + " , ");
}
</script>
<p id="output"></p>
</body>
</html>
The problem here is that I can't get an output. I want an output that will print using innerhtml.
Array will be declared as Array() not [] the append statment will be this output.innerHTML += numbers[x]+',';
and to take value you should give numbers[0]=document.getElementById("1").value; not numbers[0]=document.getElementById("1");
I am not very good with the formatting !
Related
I simply validate one input file and get the file name. but I can not do it with second one.
<div id="app">
<form action="#">
<label class="btn btn-xs btn-primary">
<input type="file" name="pic1" id="12" #change="onFileChangePic" multiple/>
Upload file
</label>
{{fileName}}
<div><input type="submit" value="submit" :disabled="vvv == false"></div>
</form>
</div>
<script>
const app = new Vue({
el: '#app',
data: {
fileName:null,
vvv:false
},
methods:{
onFileChangePic(event){
var fileData = event.target.files[0];
this.fileName=fileData.name;
if(fileData.type == 'application/pdf'){
this.vvv = true
}else{
this.vvv = false
}
console.log(event);
}
}
})
</script>
i want to add
<input type="file" name="pic2" id="13" #change="onFileChangePic" multiple/>
how can I validate the second input too?
methods:{
onFileChangePic(event){
let isGoodToGo = true
let files = event.target.files
for (let i=0; i<files.length; i++) {
let file = files[i]
if(file.type != 'application/pdf'){
isGoodToGo = false
}
}
this.vvv = isGoodToGo
}
}
Fiddle link: https://jsfiddle.net/shivampesitbng/k3h1x0jq/11/
Loop through all the files to check its type for validation.
This is a homework that I'll have to create a "x" amount of buttons and when I click on any button, it should change its value/label from "buttonX" to "clicked".
By clicking in another button, the first will reset to "buttonX" and the new button will change to "clicked".
So far I was able to create the "x" amount of buttons, but I dont know how to make them clickable to change its value back and forth.
Here's my model:
namespace buttonTag.Models {
public class Button {
private const int QTY_BTN = 10;
public Button() {
}
public int buttons {
get {
return QTY_BTN;
}
}
}
}
And this is my Razor page:
#model buttonTag.Models.Button;
<form asp-controller="Home" asp-action="Button">
<div class="form-group">
#{
for(int i=1; i<#Model.buttons + 1; i++) {
<input type="submit" value=#("Button" + i) class="btn btn-primary ml-4 mb-4" />
}
}
</div>
</form>
Any help?
Here is a simple workaround like below:
<form asp-controller="Home" asp-action="Button">
<div class="form-group">
#{
for (int i = 1; i < #Model.buttons + 1; i++)
{
<input type="button" id="#i" value=#("Button" + i) class="btn btn-primary ml-4 mb-4" onclick="Test(#i)" />
}
}
</div>
</form>
#section Scripts{
<script>
var item;
function Test(i) {
if (i != item) {
if (($("#" + i)).val().startsWith('Button')) {
$("#" + i).val("Clicked");
}
}
$("#" + item).val("Button" + item);
item = i;
return item;
}
</script>
}
Result:
I am trying to make a piece of code (sorry lost the link to original) but I am struggling and cannot get past the error message "The script completed but the returned value is not a supported return type". I have looked at changing this to a string, but to be honest I am at the limit of my ability to understand what I am trying to do. Any assistance greatly appreciated.
code.gs is:
function getMenu1() {
var t = HtmlService.createTemplateFromFile('myForm');
t.data = SpreadsheetApp
.openById('11_3xQkJdQ172_97LWUoOu22qUMBS-vSrr7TN9bqWicg')
.getSheetByName('PROJECTS')
.getRange('D:D')
.getValues();
return t.evaluate().setSandboxMode(HtmlService.SandboxMode.IFRAME);
Logger.log('doGetMenu1 ran');
}
and myform.html is:
<!DOCTYPE html>
<html>
<head>
<base target="_top">
<body style="font-family: Arial, Helvetica, sans-serif">
<div>
<input class="left" type="text" name="cuStaff" id="cuStaff" style="width=150px" required>
<datalist id="cuStaff">
</datalist>
<input class="left" type="date" name="dateA" id="dateA" style="width:150px" required>
<input class="left" type="time" name="timeA" id="timeA" style="width:75px" required>
</div>
</body>
<select id="cuStaff">
<option> Choose a option </option>
</select >
<body onload = "addList()"></body>
<script>
function addList() {
console.log('addList ran!');
google.script.run
.withFailureHandler(onFailure)
.withSuccessHandler(injectMyContent)
.getMenu1();
};
window.injectMyContent = function(argReturnedData) {
for(var i = 0; i < argReturnedData.length; i++) {
var opt = argReturnedData[i];
var document = myForm.html
var el = document.createElement("option");
var el = document
el.text = opt;
el.value = opt;
select.appendChild(el);
};
};
window.onFailure = function(err) {
alert('There was an error! ' + err.message);
};
</script >
</head>
</html>
JSFiddle here
Seems like the 2 functions are being mixed. Try:
function doGet() {
var t = HtmlService.createTemplateFromFile('myForm');
return t.evaluate().setSandboxMode(HtmlService.SandboxMode.IFRAME);
}
function getMenu1() {
var data = SpreadsheetApp
.openById('11_3xQkJdQ172_97LWUoOu22qUMBS-vSrr7TN9bqWicg')
.getSheetByName('PROJECTS')
.getRange('D:D')
.getValues();
Logger.log('getMenu1 ran')
return data;
}
I want validate single field using few rules
There is simple example.
This is html form:
<div class="form-group">
<label for="fullName">Name</label>
<input type="text" class="form-control" id="fullName" placeholder="Enter name">
</div>
<div class="form-group">
<div id="fullNameErrors"></div>
</div>
And this my validation function:
function checkForm() {
$("#fullNameErrors").hide();
var fullName = $("#fullName").val();
if (fullName.length < 4) {
$("#fullNameErrors").show().html("Name too short");
}
var parts = fullName.split(" ");
if (parts.length!=2) {
$("#fullNameErrors").show().html("First name and last name expected");
}
if (parts[0].length<3) {
$("#fullNameErrors").show().html("First name to short");
}
}
When a field is changed I call checkForm().
How the same idea can be implemented in FRP way using Bacon.js?
You can map the validation errors to Bacon.Error objects like this:
var $errors = $("#fullNameErrors");
var $fullName = $("#fullName");
var nameChanges = $fullName.asEventStream("input").flatMapLatest(function() {
var fullName = $fullName.val();
if (fullName.length < 4) {
return new Bacon.Error("Name too short");
}
// other validations here
return fullName;
});
nameChanges.onValue(function(fullName) {
console.log("Name ok: " + fullName);
$errors.empty();
});
nameChanges.onError(function(error) {
$errors.text(error);
});
Try it with the JSFiddle. See more details about Bacon.js error handling https://github.com/baconjs/bacon.js#errors
I have HTML code as below:
<script type="text/javascript">
$(document).ready(function(){
$("#useDatePicker").mouseout(function{
//$("#result").text() = $("#useDatePicker").text();
alert(1);
});
});
</script>
</head>
<body>
<form method="post" name="frm" id="myForm">
<input type="text" name="date" id="useDatePicker"/>
<input type="text" name="result" id="result" />
</form>
What I need:
when the user select date from date Picker, it will subtract with date now automatic and the result will be in <input type="text" name="result" id="result" />
Problem
I have no concept with it.
may be you can use onselect option of date picker of jquery ui
demo: fiddle
$('#useDatePicker').datepicker({
onSelect: function (date) {
var today = new Date();
var result = DateDiff(today, new Date(date));
$('#result').val(result);
}
});
function DateDiff(date1, date2) {
var diff = date1 - date2;
var num_years = diff / 31536000000;
var num_months = (diff % 31536000000) / 2628000000;
var num_days = ((diff % 31536000000) % 2628000000) / 86400000;
return Math.floor(num_years) + "years " + Math.floor(num_months) + "months " + Math.floor(num_days) + "days";
}