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>
Related
I am a newbie to VueJs
I would like to use Vue2 to create a validation form
Index.html
<div id="app">
<form action='process.php' method="post" name="submit_form" id="submit_form" v-on:submit="validateForm">
<label for="username">Name</label>
<input type="text" name="username" v-model="username" placeholder="Username"/>
<br><br>
<input class="submit_button" name="submit_form" type="submit" value="Submit">
</form>
</div>
but When I click the previous or next page, then back to index.html form page.
The input field's data is auto-remove.
How to using keep-alive in vuejs to save user input?
Is there any simple example?
Thank you very much
When you click on the previous or next page (I think you mean the browser's arrows) the page it's reloaded, so the javascript (and vue) too. To keep the data, you must "save" the form's state. A simple solution can be to save the form object in sessionStorage and check if there is a sessionStorage Item (let's say with a key 'formData') and fill the form object with these values.
Example:
<html>
...
<body>
<div id="app">
<form action='process.php' method="post" name="submit_form" id="submit_form" v-on:submit="validateForm" v-on:change="saveFormDataState">
<label for="username">Name</label>
<input type="text" name="username" v-model="formData.username" placeholder="Username"/>
<br><br>
<input class="submit_button" name="submit_form" type="submit" value="Submit">
</form>
</div>
<script>
new Vue({
el: '#app',
data: () => ({
formData: {
username: ''
}
}),
methods: {
initFormDataState(){
const formData = JSON.parse(sessionStorage.getItem('formData') || '');
if(formData){
this.formData = formData;
}
},
saveFormDataState(){
const formData = JSON.stringify(this.formData);
sessionStorage.setItem('formData', formData);
}
},
created(){
this.initFormDataState();
}
});
</script>
</body>
</html>
Note that I have added the on-change listener to the form to save the form's state when the user focuses on another input element or presses the submit button.
I follow the instructions from https://github.com/aws/aws-amplify/tree/master/packages/amazon-cognito-identity-js
Here is my html code:
<html>
<head>
<title>Testing AWS Cognito</title>
<script src="/js/aws/aws-cognito-sdk.js"></script>
<script src="https://sdk.amazonaws.com/js/aws-sdk-2.211.1.min.js"></script>
</head>
<body>
<div>
<input type="text" id="email" name="email" placeholder="email"> <br/>
<input type="text" id="username" name="username" placeholder="username"><br/>
<input type="text" id="phone" name="phone" placeholder="phone"><br/>
<input type="text" id="password" name="password" placeholder="password"><br/>
<button id="signup" onClick="register()" >Register</button>
</div>
<script>
const register = function() {
console.log("onclick loading now");
var CognitoUserPool = AmazonCognitoIdentity.CognitoUserPool;
}
</script>
</body>
</html>
But when I run it, it gives me:
"signup_aws_test.html:32 Uncaught ReferenceError:
AmazonCognitoIdentity is not defined"
I am very sure both files are loaded before I click the button.
in the aws-cognito-sdk.js, I can see that AmazonCognitoIdentity exists and exports. It doesn't seems like it is in the global namespace though.
Do i need to run something else to "Load" it?
Problem solved.
The file name MUST BE
"amazon-cognito-identity.min.js"
although the content the same, the filename matters.
Once I change it to amazon-cognito-identity.min.js, it works.
I currently have autocomplete functionality on the results page using Google custom search, but how can I see autocomplete display in a separate custom search box?
<script type="text/javascript">
$(document).ready(function () {
$("#googleCseSearchTextBox").keypress(function (e) {
var code = (e.keyCode ? e.keyCode : e.which);
if (code == 13) { //Enter keycode
googleCseSubmit();
return false;
}
});
$("#googleCseSearchButton").click(googleCseSubmit);
});
function googleCseSubmit() {
window.location.href = "my site and key" + $('<div/>').text($("#googleCseSearchTextBox").val()).html();
};
</script>
Custom search box:
<div>
<fieldset class="sfsearchBox">
<input name="googleCseSearchTextBox" type="text" id="googleCseSearchTextBox" class="sfsearchTxt" />
<input type="button" value="Search" id="googleCseSearchButton" class="sfsearchSubmit" />
</fieldset>
</div>
Thanks
Insert this code on the your first page for autocompletion. Don't forget to add your own google id below.
<script src="http://www.google.com/jsapi" type="text/javascript"></script>
<script type="text/javascript">
google.load('search', '1');
google.setOnLoadCallback(function(){
google.search.CustomSearchControl.attachAutoCompletion(
'your-google-search-id',
document.getElementById('search-field'),
'search-form');
});
</script>
<!-- example search form -->
<form id="search-form" action="/search">
<input id="search-field" name="search-field" type="text" />
<input type="submit" value="Search" />
</form>
Also check here for more reference
https://developers.google.com/web-search/docs/
I want to add a dropzone inside an existing form but it doesn't seem to work.
When I view the console I get error throw new Error("No URL provided"). When I click upload I get no preview either - all I get is a normal file input.
<link href="../dropzone.css" rel="stylesheet">
<form action="/" enctype="multipart/form-data" method="POST">
<input type="text" id ="Username" name ="Username" />
<div class="dropzone" id="my-dropzone" name="mainFileUploader">
<div class="fallback">
<input name="file" type="file" />
</div>
</div>
<div>
<button type="submit" id="submit"> upload </button>
</div>
</form>
<script src="../jquery.min.js"></script>
<script src="../dropzone.js"></script>
<script>
$("my-dropzone").dropzone({
url: "/file/upload",
paramName: "file"
});
</script>
No url provided error is because $("my-dropzone") is wrong instead it must be $('#mydropzone')
dropzone along with other form, yes this is very much possible, you have to post the data using the URL provided in the dropzone not in the form action. That means all your form data along with the files uploaded shall be posted back to the url provided for the dropzone. A simple untested solution is as below;
<link href="../dropzone.css" rel="stylesheet">
<form action="/" enctype="multipart/form-data" method="POST">
<input type="text" id ="Username" name ="Username" />
<div class="dropzone" id="my-dropzone" name="mainFileUploader">
<div id="previewDiv></div>
<div class="fallback">
<input name="file" type="file" />
</div>
</div>
<div>
<button type="submit" id="submitForm"> upload </button>
</div>
</form>
<script src="../jquery.min.js"></script>
<script src="../dropzone.js"></script>
<script>
$("#mydropzone").dropzone({
url: "/<controller>/action/" ,
autoProcessQueue: false,
uploadMultiple: true, //if you want more than a file to be uploaded
addRemoveLinks:true,
maxFiles: 10,
previewsContainer: '#previewDiv',
init: function () {
var submitButton = document.querySelector("#submitForm");
var wrapperThis = this;
submitButton.addEventListener("click", function () {
wrapperThis.processQueue();
});
this.on("addedfile", function (file) {
// Create the remove button
var removeButton = Dropzone.createElement("<button class="yourclass"> Remove File</button>");
// Listen to the click event
removeButton.addEventListener("click", function (e) {
// Make sure the button click doesn't submit the form:
e.preventDefault();
e.stopPropagation();
// Remove the file preview.
wrapperThis.removeFile(file);
});
file.previewElement.appendChild(removeButton);
});
// Also if you want to post any additional data, you can do it here
this.on('sending', function (data, xhr, formData) {
formData.append("PKId", $("#PKId").val());
});
this.on("maxfilesexceeded", function(file) {
alert('max files exceeded');
// handle max+1 file.
});
}
});
</script>
The script where you initialize dropzone can be inside $document.ready or wrap it as a function and call when you want to initialize it.
Happy coding!!
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