Hi, I have two range slders i would like to make one reduce as the first one increases its for a project im doing for fun, thanks.
<html>
<input type="range" min="-12" max="12" step="1" value="0" class="vslider" id="b1" />
<input type="range" min="-12" max="12" step="1" value="0" class="vslider" id="b2" />
</html>
```
<html>
<!--sum minimum to itself and double the max-->
<input type="range" min="0" max="24" step="1"
value="0" class="vslider" id="b1" />
</html>
```
```
<script>
b1.oninput = function(evt){
var dummy = 0;
var minus = 0;
var minus = parseFloat(evt.target.value);
//strip off decimal point if you like
dummy = Math.round(minus-12);
//jam result in dummy var
//works for me
}
</script>
```
Related
With this code:
<script setup lang="ts">
import { ref } from "vue"
const input1 = ref(null)
const group = {
input2: ref(null),
input3: ref(null),
}
function main() {
console.log("input1", input1?.value?.value)
console.log("input1", group.input3?.value?.value)
console.log("input3", group.input3?.value?.value)
document.getElementsByTagName("textarea")[0].value = `
input1: ${input1?.value?.value}
input2: ${group.input2?.value?.value}
input3: ${group.input3?.value?.value}
`.trim()
}
</script>
<template>
<input ref="input1" type="text" value="1" />
<input ref="group.input2" type="text" value="2" />
<input ref="group.input3" type="text" value="3" />
<button #click="main">click</button>
<p>
<textarea cols="30" rows="6"></textarea>
</p>
</template>
when you do click, you get input1 in input1.value, but yo don't get input2 and input3 in group.input2.value and group.input3.value, you get null instead.
Why input1.value works but group.input2.value and group.input3.value are always null?
How can I defined a one single object with one attribute for each input?
What I am really want to achieve is a single object that represent all inputs in a form.
help to make the checkbox status persist after reloading the page, thanks!
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.2/jquery.min.js" type="text/javascript"></script>
<input type="checkbox" name="enable" id="enable" />Enable
<input type="text" id="name" name="name" disabled />
<script>
window.onload=function(){
document.getElementById('enable').onchange=function(){
var txt = document.getElementById('name');
txt.disabled = !this.checked;
};
};
</script>
So, I've this form in server side:
case class Employe(id: Int, name: String)
val myForm = Form(
mapping(
"id" -> number,
"name" -> text
) (Employe.apply) (Employe.unapply)
)
So, in client side I need send three same forms to the server:
<html>
<body>
<div class="employe">
<input type="number" class="employe_id"/>
<input type="text" class="employe_name"/>
</div>
<div class="employe">
<input type="number" class="employe_id"/>
<input type="text" class="employe_name"/>
</div>
<div class="employe">
<input type="number" class="employe_id"/>
<input type="text" class="employe_name"/>
</div>
<input type="button" id="send_button"/>
</body>
</html>
and this data I send to the server via ajax with following code:
var allEmployes = $('.employe');
var addUrl = '/employes/add';
var employesArray = [];
for(var i = 0; i < allEmployes.length; i++) {
var currentRow = $(allEmployes[i]);
var emplId = currentRow.find('.employe_id').val();
var emplName = currentRow.find('employe_name').val();
var employe = {
'id' : emplId,
'name': emplName
};
employesArray.push(employe);
}
$.post(addUrl, { 'employes': employesArray })
.done(function(response){
console.log(response);
})
.fail(function(error){
console.log(error);
});
but, I don't know how to get three same forms from request (in Action of Server side)? Anybody know how to can this?
Thanks in Advance!
In controller change form mapping as
val myForm = Form(
mapping(
"id" -> list(number),
"name" -> list(text)
) (Employe.apply) (Employe.unapply)
)
and in html
<div class="employe">
<input type="number" name="id[0]" />
<input type="text" name="name[0]" />
</div>
<div class="employe">
<input type="number" name="id[1]" />
<input type="text" name="name[1]" />
</div>
<div class="employe">
<input type="number" name="id[2]" />
<input type="text" name="name[2]" />
</div>
I have a wcf service calling from mobile platfrom. When i call wcf from browser in mobile device it works.Then i convert my html to an application using phone. But this time , i can not call the wcf service. Any ideas?
Here is my html ;
<title>Mobilizm</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="css/Mobilizm.css" rel="stylesheet" />
<link href="css/jquery.mobile.structure-1.3.2.min.css" rel="stylesheet" />
<script src="js/JSON.js"></script>
<script src="js/jquery.js"></script>
<script src="js/jquery.mobile-1.3.2.js"></script>
<script>
$(document).on("pageinit", function (event) {
$('#save').click(function () {
debugger;
var typesArray = new Array();
var myType = new Object();
myType.FirstName = $("#name").val();
myType.LastName = $("#surname").val();
myType.EMailAddress1 = $("#email").val();
myType.MobilePhone = $("#cellphone").val();
typesArray.push(myType);
$.support.cors = true;
$.getJSON("http://xxxxx/Mobile/MobilizmService.svc/CreateCustomer?callback=?", { customers: JSON.stringify(typesArray), origin: 167440003, status: 167440001 })
.done(function (json) {
alert("ok");
})
.fail(function (jqxhr, textStatus, error) {
alert("false");
});
</script>
</head>
<body>
<div data-role="page">
<div data-theme="d" data-role="header">
<h3>Yeni Kullanıcıgg</h3>
</div>
<div data-role="content">
<div data-role="fieldcontain">
<label for="name">Ad:</label>
<input type="text" name="name" id="name" value="" data-mini="true" />
</div>
<div data-role="fieldcontain">
<label for="surname">Soyadı:</label>
<input type="text" name="surname" id="surname" value="" data-mini="true" />
</div>
<div data-role="fieldcontain">
<label for="email">E-Posta:</label>
<input type="text" name="email" id="email" value="" data-mini="true" />
</div>
<div data-role="fieldcontain">
<label for="cellphone">Cep Telefonu:</label>
<input type="text" name="cellphone" id="cellphone" value="" data-mini="true" />
</div>
<input data-theme="d" type="button" value="Kaydet" id="save" />
</div>
<div data-theme="d" data-role="footer">
<h3>Yeni Kullanıcı</h3>
</div>
</div>
After several hours searching , ı solved the problem. You have to add this tag to your config.xml file. Your origin is where you host your webservice.
<access origin="xxx" subdomains="true" />
Try my code:
var serviceUrl = 'http://' + _SERVER_ADDRESS + '/RestService.svc/' + method;
var jsonCallbackMethod = 'spycallback493285721';
$.ajax({
type : "GET",
url : serviceUrl,
jsonpCallback : jsonCallbackMethod,
data : params,
dataType : 'jsonp',
timeout : 11*1000 // Necessary in order to detect not found(404) error
})
I've created Modal Dialog box declaratively in dojo, and I want to show it to the user on page load, but I don't understand why the following code is not displaying anything on the browser on page load. Could anyone please tell me what wrong am I doing?
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Hello Dijit!</title>
<!-- load Dojo -->
<link rel="stylesheet" href="../lib/dijit/themes/claro/claro.css">
<link rel="stylesheet" href="../../css/style.css">
<script src="../lib/dojo/dojo.js" data-dojo-config="isDebug: true, async: true, parseOnLoad: true"></script>
<script>
require(["dojo/ready","dojo/parser","dijit/Dialog", "dijit/form/ComboBox", "dijit/Menu", "dijit/MenuItem", "dojox/form/PasswordValidator","dijit/form/ValidationTextBox","dijit/form/Form","dijit/form/SimpleTextarea","dijit/form/Button"]);</script>
</script>
</head>
<!-- set the claro class on our body element -->
<body class="claro">
<div data-dojo-id ="dialogOne" data-dojo-type = "dijit.Dialog" title = "Create Users" style="display: none">
<div class="dijitDialogPaneContentArea">
<div class = "formQuestion">
<span>Personal Details</span>
</div>
<div>
<label class = "firstLabel" for="Pname">Name </label>
<input type ="text" id ="Pname" data-dojo-type="dijit.form.ValidationTextBox"
data-dojo-props = "required :'true', invalidMessage:'',ucfirst:'true'" tabindex = '1'/>
<label class = "secondLabel" for = "combo">Role </label>
<Select id="combo" data-dojo-type="dijit.form.ComboBox" tabindex = '2'>
<option>Admin</option>
<option>User</option>
</Select><br>
<label class = "firstLabel" for="Pemail">Email</label>
<input type="text" id="Pemail" name="address"
data-dojo-type="dijit.form.ValidationTextBox"
data-dojo-props = "placeHolder:'(will be the username)',
trim:'true',
ucfirst : 'true'" tabindex = '3'/>
<label class = "secondLabel" for="Pmobile">Mobile</label>
<input type="text" id="Pmobile" name="address" tabindex = '4'
data-dojo-type="dijit.form.ValidationTextBox"
data-dojo-props = " trim : 'true',
regExp : '(\\d){10}',
invalidMessage : 'Mobile number is invalid',
ucfirst : 'true'" /><br>
<div dojoType="dojox.form.PasswordValidator"
name="password">
<div><label class = "firstLabel" for ="pass">Password </label><input type="password" id ="pass"
pwType="new" tabindex = '5'/>
<label class = "secondLabel" for ="confirm">Confirm Password </label><input type="password"
pwType="verify" tabindex = '6'/></div>
</div><br>
<div class ="dijitDialogPaneActionBar">
<button data-dojo-type = "dijit.form.Button" type ="submit" tabindex = '10' id = "ok" onClick="return dialogOne.isValid();">OK</button>
<button data-dojo-type = "dijit.form.Button" type = "button" tabindex = '11' onClick = "dialogOne.onCancel();" id = "cancel">Cancel</button>
</div>
</div>
<!-- This event is not firing -->
<script type="dojo/method" data-dojo-event="onLoad" >
dialogOne.show();
</script>
</div>
</body>
</html>
Try the below code. Make changes to the loading dojo part to point to correct path of your dojo.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Hello Dijit!</title>
<!-- load Dojo -->
<link rel="stylesheet" href="../dijit/themes/claro/claro.css">
<script src="../dojo/dojo.js" data-dojo-config="isDebug: true, async: true, parseOnLoad: true"></script>
<script>
require(["dojo/ready","dijit/Dialog", "dijit/form/ComboBox", "dijit/Menu", "dijit/MenuItem", "dojox/form/PasswordValidator","dijit/form/ValidationTextBox","dijit/form/Form","dijit/form/SimpleTextarea","dijit/form/Button","dojo/domReady!"]
, function(ready){
ready(function(){
console.debug("Ready!");
dialogOne.show();
});
});
</script>
</head>
<!-- set the claro class on our body element -->
<body class="claro">
<div data-dojo-id ="dialogOne" data-dojo-type = "dijit.Dialog" title = "Create Users" style="display: none">
<div class="dijitDialogPaneContentArea">
<div class = "formQuestion">
<span>Personal Details</span>
</div>
<div>
<label class = "firstLabel" for="Pname">Name </label>
<input type ="text" id ="Pname" data-dojo-type="dijit.form.ValidationTextBox"
data-dojo-props = "required :'true', invalidMessage:'',ucfirst:'true'" tabindex = '1'/>
<label class = "secondLabel" for = "combo">Role </label>
<Select id="combo" data-dojo-type="dijit.form.ComboBox" tabindex = '2'>
<option>Admin</option>
<option>User</option>
</Select><br>
<label class = "firstLabel" for="Pemail">Email</label>
<input type="text" id="Pemail" name="address"
data-dojo-type="dijit.form.ValidationTextBox"
data-dojo-props = "placeHolder:'(will be the username)',
trim:'true',
ucfirst : 'true'" tabindex = '3'/>
<label class = "secondLabel" for="Pmobile">Mobile</label>
<input type="text" id="Pmobile" name="address" tabindex = '4'
data-dojo-type="dijit.form.ValidationTextBox"
data-dojo-props = " trim : 'true',
pattern : '(\\d){10}',
invalidMessage : 'Mobile number is invalid',
ucfirst : 'true'" /><br>
<div dojoType="dojox.form.PasswordValidator"
name="password">
<div><label class = "firstLabel" for ="pass">Password </label><input type="password" id ="pass"
pwType="new" tabindex = '5'/>
<label class = "secondLabel" for ="confirm">Confirm Password </label><input type="password"
pwType="verify" tabindex = '6'/>
</div>
</div><br>
<div class ="dijitDialogPaneActionBar">
<button data-dojo-type = "dijit.form.Button" type ="submit" tabindex = '10' id = "ok" onClick="return dialogOne.isValid();">OK</button>
<button data-dojo-type = "dijit.form.Button" type = "button" tabindex = '11' onClick = "dialogOne.onCancel();" id = "cancel">Cancel</button>
</div>
</div>
</div>
</div>
</body>
</html>
Try call the dialogOne.show() in the callback of the require function, change the "dojo/ready" into "dojo/domReady!" and place it at the end of the module array