What i am trying to do is when the input is the same as the variable name the user can not press the button 'change' but when the input is different the user is allowed to press the button 'change' and the value name will change but the problem is that the variable is not changing... Why?
Here is the code:
<!DOCTYPE html>
<html>
<head>
<title>App</title>
</head>
<body>
<form id="sendNameForm">
<input id="name" type="text" value="John"/>
<button id="sendNameBtn" type="submit" disabled>Change</button>
</form>
<script src="jquery-1.12.4.js"></script>
<script>
$('#sendNameForm').submit(function() {
var name = $('#name').val();
dis_enableNameSend();
alert("Success!");
return false;
});
var name= $('#name').val();
function dis_enableNameSend(){
var newName = $('#name').val();
if(newName==name){
document.getElementById("sendNameBtn").disabled = true;
}else{
document.getElementById("sendNameBtn").disabled = false;
}
}
$('#name').on('input', function() {
dis_enableNameSend();
});
</script>
</body>
</html>
Thanks!
form submit generally refresh your page by default that may be reason why you do not see change.
try preventing default behaviour
$('#sendNameForm').submit(function(event) {
event.preventDefault()
var name = $('#name').val();
dis_enableNameSend();
alert("Success!");
return false;
});
Related
I am trying to create a very simple login form that requires the user to input a password and a username. If the user does not input a username or a password then i want an alert to pop up informing the user that he needs to input a username or a password and the page will not continue on to the welcome page. however this is not working......i dont get any alert pop up and also i am redirected to the welcome page automatically after i hit 'sign in' i just dont understand what the issue is. Any help would be very much appreciated and thank you in advance.
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Login</title>
<script type = "text/javascript">
function login()
{
var username = document.getElementById("name");
var password = document.getElementById("pass");
if (username.value.trim() == "")
{
alert ("please enter a username or password");
return false;
}
else if (password.value.trim() == "")
{
alert ("please enter a password");
return false;
else
{
true;
}
}
</script>
</head>
<body>
<form onsubmit = "return validate()" action = "welcome.html">
<input id= "name" placeholder= "Username" type= "text"/><br><br>
<input id= "pass" placeholder= "Password" type= "password"/><br><br>
<button type = "submit">SIGN IN</button>
</form>
</body>
</html>
The problem is that on the onsubmit event on the form, you are returning "validate()", which is not a real function.
Instead, replace that bit, in the onsubmit attribute, to onsubmit="return login()", since that appears to be your replacement for the validate function.
Secondly though, in the login function itself, for most browsers you also need to call event.preventDefault(), right before return false (or perhaps instead of). Also, there was a } missing in the login function, also causing an error.
The fixed code should be
function login()
{
var username = document.getElementById("name");
var password = document.getElementById("pass");
if (username.value.trim() == "")
{
alert ("please enter a username or password");
event.preventDefault();
return false;
}
else if (password.value.trim() == "")
{
alert ("please enter a password");
event.preventDefault();
return false;
}
else//this part is also completely extraneous,there's no reason to have it, it should work the same either way
{
true;
}
}
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Login</title>
</head>
<body>
<form onsubmit = "return login()" action = "welcome.html">
<input id= "name" placeholder= "Username" type= "text"/><br><br>
<input id= "pass" placeholder= "Password" type= "password"/><br><br>
<button type = "submit">SIGN IN</button>
</form>
</body>
</html>
I'm using a WorldPay JS function to create a payment form. This function creates a TOKEN that can be reusable or not. I need to update the 'reusable' flag based on a form input (checkbox) but I can't get the global variable (reuse) to update. I've created a function CHECKED that updates the variable but the WorldPay JS just ignores it. I think is due the window.onload status, but I don't know how to fix it. Any help would be greatly appreciated.
<?php
include('./header.php');
require_once('./init.php');
?>
<html>
<head>
<title></title>
<meta charset="UTF-8" />
<script src="https://cdn.worldpay.com/v1/worldpay.js"></script>
<script type='text/javascript'>
var reuse = false;
function Checked(){
reuse = document.getElementById('check').checked;
Worldpay.submitTemplateForm();
}
window.onload = function() {
Worldpay.useTemplateForm({
'clientKey':'ENTER CLIENT KEY',
'form':'paymentForm',
'paymentSection':'paymentSection',
'display':'inline',
'type':'card',
'reusable': reuse,
'saveButton':false,
'callback':function(obj){
if (obj && obj.token && obj.paymentMethod) {
var _el = document.createElement('input');
_el.value = obj.token;
_el.type = 'hidden';
_el.name = 'token';
document.getElementById('paymentForm').appendChild(_el);
var _name = document.createElement('input');
_name.value = obj.paymentMethod.name;
_name.type = 'hidden';
_name.name = 'customer';
document.getElementById('paymentForm').appendChild(_name);
document.getElementById('paymentForm').submit();
}
}
});
}
</script>
</head>
<body>
<form action="./test.php" id="paymentForm" method="post">
<!-- all other fields you want to collect, e.g. name and shipping address -->
<div id='paymentSection'></div>
<div>
<input type="checkbox" id='check'>
<input type="submit" value="Place Order" onclick="Checked()" />
</div>
</form>
</body>
</html>
NOTE: I've removed the client ID so the code won't run.
Have you tried to use function "checked" on window.onload like this:
window.onload = function() {
Worldpay.useTemplateForm({
//code....
)}
function Checked(){
//code....
}
I have a code which worked fine while I was testing it now I decided it to include it inside a form and it just does not want to work. If I remove the form tag it works and with the form tag it does not.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Title of the document</title>
<script>
function action() {
var checkBox = document.getElementById("UPCheck");
if (checkBox.checked == true){
window.localStorage['username'] = document.getElementById('username').value;
window.localStorage['password'] = document.getElementById('password').value;
window.localStorage['unpwchecked'] = "yes";
alert("Saved!");
}
else
{
window.localStorage['username'] = "";
window.localStorage['password'] = "";
window.localStorage['unpwchecked'] = "";
}
}
function action2() {
document.getElementById('username').value = window.localStorage['username'];
document.getElementById('password').value = window.localStorage['password'];
}
</script>
</head>
<body>
<form>
<input type="text" id="username" name="username" value="">
<input type="text" id="password" name="password" value="">
Save username / password in cookies: <input type="checkbox" id="UPCheck" name="savelocalunpw">
<p><button onclick="action()" type="button">Save values!</button></p>
<p><button onclick="action2()" type="button">Load values!</button></p>
</form>
<script>
var alerted = localStorage.getItem('unpwchecked');
if (alerted == 'yes') {
document.getElementById('username').value = window.localStorage['username'];
document.getElementById('password').value = window.localStorage['password'];
document.getElementById("UPCheck").checked = true;
}
</script>
</body>
</html>
Remove the form tag and values are properly saved in localstorage.
The problem comes from the function name. If you rename
function action()
to
function action1()
and also modify
<button onclick="action1()" type="button">Save values!</button>
then your code will work.
I notices that without the form tag, the code works ok. If you add the form element, then you will get a console error, stating that action() is not a function. I'm just guessing that there is a conflict between the function name action() and the form attribute action
Try:
var isChecked = document.getElementById("UPCheck").checked;
Probably better practice to add an event handler for the buttons, that works with the form tags. Kind of interesting that it works with renaming the function.
JS
document.getElementById("save").addEventListener("click", function(){
var checkBox = document.getElementById("UPCheck");
if (checkBox.checked == true){
window.localStorage.username = document.getElementById('username').value;
window.localStorage.password = document.getElementById('password').value;
window.localStorage.unpwchecked = "yes";
alert("Saved!");
}
else
{
window.localStorage.username = "";
window.localStorage.password = "";
window.localStorage.unpwchecked = "";
}
});
document.getElementById("load").addEventListener("click", function(){
document.getElementById('username').value = window.localStorage.username;
document.getElementById('password').value = window.localStorage.password;
});
var alerted = localStorage.getItem('unpwchecked');
if (alerted == 'yes') {
document.getElementById('username').value = window.localStorage.username;
document.getElementById('password').value = window.localStorage.password;
document.getElementById("UPCheck").checked = true;
}
HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Title of the document</title>
</head>
<body>
<form>
<input type="text" id="username" name="username" value="">
<input type="text" id="password" name="password" value="">
Save username / password in cookies: <input type="checkbox" id="UPCheck" name="savelocalunpw">
<p><button id = "save" type="button">Save values!</button></p>
<p><button id = "load" type="button">Load values!</button></p>
</form>
</body>
</html>
You can use "dot" notation for localStorage.
I'm trying to change the value of my input text field before submitting the form using jQuery like this:
<form actions="http://test.com/" method="GET">
<input name="test" id="autocompleteform" type="text"/>
</form>
<script>
$('#form-customer-attr-new').submit(function(e) {
var value = $("#autocompleteform").val();
value = value.substr(0, value.indexOf(' '));
if (!isNan(value) && !empty(value)) {
$("#autocompleteform").val(value);
alert($("#autocompleteform").val());
return true;
} else {
alert("Invalid Postcode");
return false;
}
});
</script>
when i alert the value of the input file, it's showing the new value, but when the form submitten, the paramether in url still showing the old value of the input, for example:
old_input_value = "1234 justice spoiler message";
new_input_value = "1234";
the_url_after_form_submit_now = "http://test.com?test=1234+justice+spoiler+message";
the_url_after_form_submit_should_be ="http://test.com?test=1234";
<form action="" id="form_id">
<input type="text" name="change_value" id="change_value">
<input type="text" name="d" id="d">
<input type="submit" name="">
</form>
$("#form_id").on("submit", function (e) {
e.preventDefault();//stop submit event
var self = $(this);//this form
$("#change_value").val("deneme");//change input
$("#form_id").off("submit");//need form submit event off.
self.submit();//submit form
});
Couple of things:
id of form was not set, add id="form-customer-attr-new" to form tag
isNan should be isNaN
!empty should be !!
Now it should work. full working example:
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, user-scalable=no,
initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script
src="https://code.jquery.com/jquery-3.2.1.min.js"
integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4="
crossorigin="anonymous"></script>
</head>
<body>
<form actions="http://test.com/" method="GET" id="form-customer-attr-new">
<input name="test" id="autocompleteform" type="text"/>
<input type="submit" />
</form>
<script>
$('#form-customer-attr-new').submit(function(e) {
var value = $("#autocompleteform").val();
value = value.substr(0, value.indexOf(' '));
if (!isNaN(value) && !!(value)) {
$("#autocompleteform").val(value);
alert($("#autocompleteform").val());
return true;
} else {
alert("Invalid Postcode");
return false;
}
});
</script>
</body>
Here is a slightly different approach, but I believe that it should work.
(1) Create a named function for your logic (I corrected/changed some syntax that was problematic)
<script type="text/javascript" language="javascript">
function prepSubmittal()
{
var result = false;
var value = null;
try
{
value = $("#autocompleteform").val();
if(value.indexOf(" ")>-1) value = value.substring(0, value.indexOf(" "));
if (!isNaN(value) && value.trim().length>0)
{
$("#autocompleteform").val(value);
result = true;
}
else
{
alert("Invalid Postcode");
result = false;
}
}
catch(e)
{
result = false;
alert("prepSubmittal Error: " + e.Message);
}
finally
{
}
return result;
}
</script>
(2) Change your form element to the following (note you had actions attribute instead of action and I added onsubmit="return prepSubmittal()")
<form action="http://test.com" method="GET" onsubmit="return prepSubmittal()">
Let me know how it goes.
You submit the form before you change the value. You have to submit the form using jQuery, after you change the value.
Change the submit button to link to jquery function, change all you have to change and then submit form using:
$("#formId").submit();
To accomplish that you need to:
Prevent form submission
Change input value
submit form with jquery $('#form').submit()
Prevent form submission with e.preventDefault() right inside your callback handler
Use your custom submit via ajax. i.e.,
<form id="form-customer-attr-new" actions="http://test.com/" method="GET">
<input name="test" id="autocompleteform" type="text"/>
</form>
<script>
$('#form-customer-attr-new').submit(function(e) {
var value = $("#autocompleteform").val();
value = value.substr(0, value.indexOf(' '));
var urlPost = 'http://test.com/'
if (!isNan(value) && !empty(value)) {
$("#autocompleteform").val(value);
alert($("#autocompleteform").val());
$.ajax({
type: "GET",
url: urlPost+'?test='+value ,
data: '',
dataType: "text",
success: function(resultData){
alert("Save Complete");
}
} else {
alert("Invalid Postcode");
//return false;
}
});
</script>
Submit API for jQuery
The handler will execute as a response to the $('#form-customer-attr-new').submit() (it's a callback function practically), so you will need to move the code from that function to before you do the actual submit.
So move the code right before the jQuery submit() call.
Also, i see that your id is not added to the HTML, please do that as the call will not work otherwise.
Step 1: call a java script function while form submitted
<form onsubmit="return test();">
Step 2: inside test function set value in your text field.
<script>
function test()
{
document.getElementById("myTextFieldId").value = "12345";
return true;
}
</script>
<form id="form-customer-attr-new" action="" method="get">
<input name="test" id="autocompleteform" type="text" value=""/>
</form>
<script>
$('#form-customer-attr-new').submit(function(e) {
var value = $("#autocompleteform").val();
value = value.substr(0, value.indexOf(' '));
if (!isNaN(value) && value!='') {
$("#autocompleteform").val(value);
alert($("#autocompleteform").val());
return true;
} else {
alert("Invalid Postcode");
return false;
}
});
</script>
I am looking for a javascript function. which will disable the entered (filled) text field on submit. So when the user logs in back the filled text box has to remain disabled. I have tried a code, but here what happens is on clicking the sumbit the contents in the text field gets deleted.
<html>
<head>
<script>
function enableDisable(){
var disable = true;
var arglen = arguments.length;
var startIndex = 0;
var frm = document.example1;//change appropriate form name
if (arglen>0){
if (typeof arguments[0]=="boolean") {
disable=arguments[0];
if (arglen>1) startIndex=1;
}
for (var i=startIndex;i<arglen;i++){
obj = eval("frm."+arguments[i]);
if (typeof obj=="object"){
if (document.layers) {
if (disable){
obj.onfocus=new Function("this.blur()");
if (obj.type=="text") obj.onchange=new Function("this.value=this.defaultValue");
}
else {
obj.onfocus=new Function("return");
if (obj.type=="text") obj.onchange=new Function("return");
}
}
else obj.disabled=disable;
}
}
}
}
</script>
</head>
<body>
<form name="example1">
Text Field: <input type="text" name="text1">
<br>
<input type="submit" name="control1" onclick="enableDisable(this.submit,'text1','submit','select1')">
</form>
</body>
</html>
please do guide.
Make sure your submit function returns false if you don't want the page to refresh. The code you're looking for is document.getElementById('insertIdOfTextFieldHere').style.readonly = "readonly";