I am trying to highlight an input field in my form when a particular radio buttons is selected. While I have accomplished this, I do not understand why my particular solution works.
Here is the HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<script type="text/javascript" src="https://ajax.microsoft.com/ajax/jQuery/jquery-1.4.2.min.js"></script>
<meta charset="UTF-8">
<script type="text/javascript" src="script.js"></script>
<title>Testing jQuery on Forms</title>
</head>
<body>
<div id="form">
<h3>The form</h3>
<form name="main_form">
<fieldset style="width: 300px;">
<legend>General Information</legend>
<p>Do you have a name?</p>
<input style="float: left" name="name_or" id="name_or_yes" type="radio" value="yes">
<legend for="name_or_yes">Yes</legend>
<input style="float: left" name="name_or" id="name_or_no" type="radio" value="no" checked="checked">
<legend for="name_or_no">No</legend>
<br/>
Name: <input type="text" name="name" id="#name_field">
</fieldset>
</form>
<button id="submit_form">Submit</button>
</div>
<div id="results"></div>
</body>
</html>
Here is the JS:
$(document).ready(function() {
$('#name_or_yes').click(function() {
$('input[name=name]').focus();
});
$('#submit_form').click(function() {
var toAdd = $("input[name=name]").val();
$('#results').append("<p>"+toAdd+"</p>");
});
});
I don't understand why focus() does not work on the name input field when I use it's id (#name_field'). It only works when i use the input[name=name] method. This is doubly confusing because the following works perfectly well:
<html>
<head>
<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
<script>
$(document).ready(function(){
$("#txtfocus").focus();
});
</script>
</head>
<body>
<input type="text" id="txtfocus2"><br/>
This text box is set focused: <input type="text" id="txtfocus">
</body>
</html>
Any help or advice is appreciated!
Look at the id here:
<input type="text" name="name" id="#name_field">
Try it like this:
<input type="text" name="name" id="name_field">
The # is the id selector, but should not appear in the HTML.
Thank you both!
These are the kind of mistakes which happen when you spend too much time looking at the same piece of code!
I would like to upvote you however, I do not have sufficient reputation points to do so. :(
input's ID should be "name_field" instead of "#name_field":
<input type="text" name="name" id="name_field">
Related
I am getting back into javascript for a job I am going to start soon. for some reason i forgot how to do a simple calculator. I dont understand why my even onclick is null when it is a button. I am sure this is a very simple answer I just cant see it.
if(document.getElementById("add").onclick == true){
alert("hey");}
<!DOCTYPE html>
<html>
<head>
<title>TEST</title>
<script src= "script.js"> </script>
</head>
<body>
<h3> Calculator: </h3>
<input type="text" name="a">
<input type="text" name="b">
<input type="button" value="+" name="add">
</body>
</html>
To get you started I made minor changes to your code, go through the changes and understand the use of each change.
function sum(){
var a = document.getElementById("a");
var b = document.getElementById("b");
alert(Number(a.value) + Number(b.value));
}
<!DOCTYPE html>
<html>
<head>
<title>TEST</title>
<script src= "script.js"> </script>
</head>
<body>
<h3> Calculator: </h3>
<input type="text" name="a" id="a">
<input type="text" name="b" id="b">
<input type="button" onClick="sum()" value="+" name="add">
</body>
</html>
This is a problem that can be easily done by declaring a scope function but I was wondering if there is a better way to make this easier
The code is:
<!DOCTYPE html>
<html ng-app="myApp">
<head>
<link rel="stylesheet" type="text/css" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.9/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script>
</head>
<body ng-controller="myCtrl">
<input type="checkbox" ng-model="activate" id="activate"> ACTIVATE <br />
<input type="text" ng-model="first" ng-disabled="!activate">
<input type="text" ng-model="second" ng-disabled="!activate">
<!-- <span id="clickMe">Click Me!</span> -->
<script type="text/javascript">
app = angular.module('myApp', []);
app.controller('myCtrl', function($scope, $timeout){
});
</script>
</body>
</html>
So this is the case. The other two fields will be enabled if the checkbox is checked and true and will be disabled if the checkbox is unchecked. What I want is, to make the fields go null or blank automatically upon disabling.
Here is an example: http://plnkr.co/edit/2EPuhRiR9OncV8z7q018?p=preview
Ignoring the fact that it is not a good practice to put too much logic directly in the view, a technical solution would be:
<input type="checkbox" ng-model="activate" id="activate" ng-change="sameAsAbove(first, second); value = null"> ACTIVATE <br />
<input type="text" ng-model="value.first" ng-disabled="!activate">
<input type="text" ng-model="value.second" ng-disabled="!activate">
Hey guys taking a stab at my first Javascript validation but getting stuck pretty early on. I am calling a JS function from onkeyup="" but I receive the error:
Object is not a function
Code:
<html>
<head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js" ></script>
<link rel="stylesheet" type="text/css" href="style.css" />
</head>
<body>
<h3> My Sign Up Form</h3>
<form name="signup">
<label>First Name<input type="text" name="fname" onkeyup="fname()"/></label><div id="fnameVal"></div><br>
<label>Last Name<input type="text" name="lastname" onkeyup="fourchars();"/></label><div id="lnameVal"></div><br>
<!--<label>Email<input type="text" name="email"/></label><div id="email"></div><br>
<label>Password<input type="password" name="password"/><div id="password"></div></label><br>
<label>ConfirmPassword<input type="password" name="confirmpassword"/><div id="confirmpassword"></div></label><br>-->
<label><input type="submit" value="Submit"/></label>
</form>
</body>
<script>
function fname(){
alert('jjjj');
}
</script>
</html>
you can't have your function name same as your control name. i.e. fname & fname()
<label>First Name<input type="text" name="fname" onkeyup="validateFname()"/></label><div id="fname"></div>
OK, Try something like this.
replace your onkeyup to this. I know it is the same code but sometimes it works when you relace you code by the same code form an other site. BTW it works fine if I test is on a site.
onkeyup="fname()"
Raname your function to be different from the input name.
e.g.
<script>
function valname(){
alert('jjjj');
}
</script>
</head>
<body>
<h3> My Sign Up Form</h3>
<form name="signup">
<label>First Name<input type="text" name="fname" onkeyup="valname()"/></label><div id="fnameVal"></div><br>
It seems as fname is a reference to your element in your form. Try changing the name of the function or the name of element.
function fnameFunc() {
alert('jjjj');
}
And the HTML
<input type="text" name="fname" onkeyup="fnameFunc()"/>
You can use jquery on keyup
$(document).ready(function() {
$('body').on("keyup", "input[name=fname]", function() {
alert($(this).val());
// do your stuff
});
});
JSFIDDLE DEMO
I am building a simple app that multiplies a number entered by the user by 5 and displays the result. Since, I am a beginner, I need some help with this.
Here's my HTML code:
<!DOCTYPE html>
<head>
<title>Area Calc</title>
<link rel='stylesheet' type='text/css' href='style.css'/>
<link href='http://fonts.googleapis.com/css?family=Titillium+Web' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Exo+2' rel='stylesheet' type='text/css'>
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script type='text/javascript' src='script.js'></script>
<head>
<body>
<div class="heading">Number Of Persons Calc</div>
<div style=" color: white; text-align:auto; width:400px; margin-right:auto; margin-left:auto; border:1px solid white; margin-top: 120px;">
<form method="" action="">
<input type="text" name="area" placeholder="Enter in square metres!" class="input" />
<input class="submit" type="submit" value="Submit" class="button" />
</form>
</div>
<body>
<html>
Can someone tell me what JavaScript/jQuery code could possibly take the value entered by the user from the text input element and multiply it by 5 and then display the result to the user? Please help me with this.
HTML
<input type="text" name="area" placeholder="Enter in square metres!" id="op" class="input" />
<input class="submit" type="button" value="Submit" class="button" onClick="mulBy()" />
SCRIPT
function mulBy(){
var op1=parseFloat(document.getElemntById("op").value);
val ans=op1*5;
alert(ans);
}
suppose you want to display the answer in a div having id "result":
<input type="text" name="area" placeholder="Enter in square metres!" class="input" />
<input class="submit button" type="submit" value="Submit" />
<div id="result"></div>
This div is placed just after the submit button. Now write the following code after the line:
<script type='text/javascript' src='script.js'></script>
$(document).ready(function(){
$(".submit ").click(function(){
$("#result").html(parseInt($(".input").val())*5);
return false;
});
});
Calculate in HTML without using Form and submit button
HTML
<input type="text" id="area" name="area" placeholder="Enter in square metres!"
class="input"/>
<br/>
<div id="result"></div>
JqueryCode
$(document).ready(function(){
$("input#area").change(function(){
var input_box = $('#area').val();
if ( input_box != ''){
$("div#result").html(input_box*5);
}
else{
$("div#result").html("");
}
});
});
LiveDemo JsFiddle
I am working in embedded adaptive preapproval payment now the issue I am facing is how to implement preapproval payment using light box.
I have implemented pay action by setting paykey using light box its working good, but same the thing I have followed with little modification in code for preapproval request was not working light box get hangs up. kindly let me know what I am missing here.
HTML code:
<html>
<head>
<script src="https://www.paypalobjects.com/js/external/dg.js" type="text/javascript"></script>
</head>
<body>
<form action="https://www.sandbox.paypal.com/webapps/adaptivepayment/flow/preapprovalkey" target="PPDGFrame" class="standard">
<label for="buy">Buy Now:</label>
<input type="image" id="submitBtn" value="Pay with PayPal" src="https://www.paypalobjects.com/en_US/i/btn/btn_paynowCC_LG.gif">
<input id="type" type="hidden" name="expType" value="light">
<input id="preapprovalkey" type="hidden" name="preapprovalkey" value="{{preapprovalkey}}">
</form>
<script type="text/javascript" charset="utf-8">
var dgFlow = new PAYPAL.apps.DGFlow({ trigger: 'submitBtn' });
</script>
</body>
</html>
The dg.js is outdated as PayPal is sunsetting the DG product, you would include the 'apdg.js' instead, and change the action URL from pay to preapproval
<html>
<head>
<title>AP Redirection Demo</title>
<script src="https://www.paypalobjects.com/js/external/apdg.js" type="text/javascript"></script>
</head>
<body>
<form action="https://www.sandbox.paypal.com/webapps/adaptivepayment/flow/preapproval" target="PPDGFrame" class="standard">
<label for="buy">Pay Now:</label>
<input type="image" id="submitBtn" value="Pay with PayPal" src="https://www.paypalobjects.com/en_US/i/btn/btn_paynowCC_LG.gif">
<input id="type" type="hidden" name="expType" value="light">
<input id="preapprovalkey" type="input" name="preapprovalkey" value="insert_preapproval_key">
</form>
<script type="text/javascript" charset="utf-8">
var dgFlowMini = new PAYPAL.apps.DGFlowMini({
trigger: 'submitBtn'
});
</script>
</body>
</html>