Not really sure how to phrase the question but I have created a function where if a button is disabled, the textbox below should also be disabled, but it's not. Here's the code:
<script>
function Play(){
if (document.getElementById("high").value > document.getElementById("low").value){
document.getElementById("myBtn").disabled = false;}
else {document.getElementById("myBtn").disabled = true;
document.getElementById("ErrorForPlay").innerHTML = "Numbers Wrong."}
}
</script> //this script checks to see if the higher number is less than the lower number. Will be disabled if so.
<br>
<button id="myBtn" onclick="Play()">Play</button>
<span id="ErrorForPlay"> </span>
<!--assume that the button on top is always disabled-->
GUESS: <!--But the textbox does not disable-->
<br>
<Input type="number" id="guess" onclick="dataValidationG()" onchange="dataValidationG()"> </Input>
<button id="submit">Enter Guess</button>
<script>
function dataValidationG(){
if (document.getElementById("myBtn").disabled = true;){
document.getElementById("guess").disabled = true;}
else {document.getElementById("guess").disabled = false;}
//script to check. If Button "myBtn" is disabled, the text should also disable if not, the text should be enabled.
}
</script>
I'm sure it has something to do with the javascript but I can't place where did I go wrong/what's missing. (I'm also only allowed to do everything under 1 html file.)
The problem is in your if statement conditions, you are using = and not ==.
And thanks to JavaScript being such a nice programming language, it doesn't throw a syntax error, but instead sets the value inside the if statement condition!
So just replace the = with == inside your if statement conditions.
Related
I am very new to JavaScript programming, and i am trying to do form validation using JavaScript.
While learning form validation i was reading about how to disable submit button until all input fields are validated, i saw many techniques to do this, but, i am confused regarding the following code:
<body>
<h3>Enter some values in the text to enable the button!</h3>
<input type="text" id="txt" onkeyup="manage(this)" /> //focus here on "this" parameter
<input type="submit" id="btSubmit" disabled />
</body>
<script>
function manage(txt) {
var bt = document.getElementById('btSubmit');
if (txt.value != '') {
bt.disabled = false;
}
else {
bt.disabled = true;
}
}
</script>
Here this is passed as an argument from an input element event listener in html. I tried passing something other than this from there, it didn't work only passing this works,
As far as i know this in JavaScript signifies current-execution-context, but since this is JavaScript keyword then how it is interpreted inside html?
JS FIDDLE LINK while passing 'this': https://jsfiddle.net/s0vnjpqb/
JS FIDDLE LINK while passing 'some': https://jsfiddle.net/s0vnjpqb/
PS: I am new to JavaScript, hence the question is easy, this might not match the standards of stack-overflow, but i tried researching in stack-overflow as well as on other platform i couldn't understand it.
As you mentioned correctly in the description that this in Javascript signifies the current execution context.
Similarly in html
this also represent the value of the ThisBinding of the current execution context and this.value indicates the value of the current execution context
e.g txt.value in your case.
Alternately what you can do is,
<body>
<h3>Enter some values in the text to enable the button!</h3>
<input type="text" id="txt" onkeyup="manage()" /> //focus here on "this" parameter
<input type="submit" id="btSubmit" disabled />
</body>
<script>
function manage(txt) {
var value = document.getElementById("txt").value;
var bt = document.getElementById('btSubmit');
if (value != '') {
bt.disabled = false;
}
else {
bt.disabled = true;
}
}
</script>
The function created to send an alert based on a radio box's value returning as null is firing and sending alert while radio box has a value that should not be null. Somewhere else on the page is a function that hides the tables these radios appear on, and is what initially made this task out of my reach. If this div didn't hide, and these tables weren't generated dynamically then it could have been solved by adding a required attribute to the radio. This actually works as long as the div is showing, however breaks when hidden. I've essentially been tasked to take the long way around making this radio required.
Here is the javascript
<script type="text/javascript">
$(function validate() {
$(document).submit(function() {
<%For z = 0 to TotalUnits - 1%>
if ($("input[name='checkradio<%=z%>']:checked").length == 0)
alert("Select Yes or No for Needs Repair checkbox <%=z%>");
return false;
}
<%Next%>
$("submitbutton").click(function() {
$("#formID").submit();
document.getElementsByName("checkradio").addEventListener('click',
validate);
});
});
});
</script>
Here is the HTML
<label id="checklabel" name="checklabel">The Vehicle Requires Repair</label>"
<label id="yesradio">
<input type="radio" ((name="checkradio" & z)) value="1" id="Radio1"> Yes</label>
<label id="noradio">
<input type="radio" ((name="checkradio" & z)) value="0" id="Radio0"> No</label>
Here is the script that hides the div (I cleaned the concat. but left the meat in its own tags)
<script>
<%for z = 0 to TotalUnits - 1%>
$( document ).ready(function() {
$("div.section<%=z%>").hide();
});
<%next%>
</script>
<%response.write(TmpString)%>
Here is my submit button (stripped off the label)
<input value="Submit" type="submit" id="submitbutton" name="submitbutton"
onsubmit="validate()">
The alert should only fire when the submit button is pressed and the value of the radio is null.
Because each radio button is a control it is own right, you need to check if any of the controls that are linked together (via the name attribute) are checked.
Firstly, getElementsByName() returns an array (notice the s on Elements), so there is no .value for you to check.
(Oh, and be aware that having multiple <label id="yesno"> is invalid, as elements need to have a unique id attribute. In this case you're probably best just removing the id="yesno" completely.)
But it's a lot, lot easier to do this via jQuery...
<script type="text/javascript">
$(function() {
$(document).submit(function() {
<%For z = 0 to TotalUnits - 1%>
if ($("input[name='checkradio<%=z%>']:checked").length == 0)
alert("Select Yes or No for Needs Repair checkbox <%=z%>");
return false;
}
<%Next%>
$("submitbutton").click(function() {
$("#formDVIR").submit();
});
});
});
</script>
By using the selector of input[name='checkradio<%=z%>']:checked you're asking jQuery to find all input controls with a name of checkradio1 (or whatever z is) and only those which are checked. If the length of the resultant jQuery object is more than 1 you know at least one is selected
push me or so
const myId=document.getElementById(“myId”);
myId.addEventListener(“click”, function () { alert(“message and stuff”)});
**Below is the input text fileds**
<form:form commandName="DRCNdetails" id="frm1" method="POST" action="addNewDelayReason.do" >
<form:input id="text1" path="delayCategory" cssClass="padR10 boxSizing" maxlength="75"></form:input>
<form:input path="preFix" id="text2" cssClass="padR10 boxSizing" maxlength="6"> </form:input>
<form:input path="reasonValue" maxlength="150" id="reasonValue" cssClass="textbox width100" cssStyle="visibility:hidden"></form:input>
</form:form> <button class="btnStyle blueBtn" onclick="formvalidation(),validateSpecialCharacters()"> <span class="left">
Submit
on submit need to vaidate the id's "text1","text2" fileds , on successful validation should display the below pop up screen that is showLtBox('mask', 'addMisdReasonCode1'), the conditions are below:
should not allow the null values for both the fileds, and special characters,and integers and alert me accordingly , on satisying this criteria only it should display the pop up screen showLtBox('mask', 'addMisdReasonCode1')
As far as I understand the question, you need to create a validation function that would be triggered upon pressing the submit button.
I already see that you have created to function that would be triggered on "OnClick" operation, However the syntax is incorrect.
You need to separate between the two function using ";" and not ","
You need to use only one function for validation - this would be more readable than the code you have written.
The result should be returned to the onclick command.
Example:
change the attribute onclick as follows:
onclick="return FullValidation();"
Create new JavaScript function that includes the two validations and return validation result;
function FullValidation() {
var validationResultOK = formvalidation();
if (validationResultOK) {
validationResultOK = validateSpecialCharacters();
}
if (validationResultOK) {
// Popup alert should be here, I put alert as example.
alert("Out your message here");
}
return validationResultOK;
}
Use Javascript Regular expression..
var pattern = new RegExp(/^[a-zA-Z]{n}$/);
where n is number of charecters you want to accept.
the above regular expression matches only charecters(both cases).
Now retrieve the value from your text fields
var text1 = document.getElementById("#your_id").value;
var text2 = document.getElementById("#your_id").value;
if(pattern.test(text1) && pattern.test(text2))
{
// your popup code
}
<!DOCTYPE html>
<html>
<head>
<title>input number</title>
</head>
<body>
enter no:1<input id="t1" type="text"><br>
<button type="button" onClick="myFunction()">submit</button>
<button type="button" onClick="myFunction()">next</button>
<div id="div1" style="color:#0000FF">
</div>
<script>
function myFunction(){
var no=document.getElementById("t1").value;
if(no==""||isNaN(no))
{
alert("Not Numeric");
}
else{
if(no!=1){
if(no%2==0){
no=no/2;
}
if (no%2!=0) {
no=(no*3)+1;
}
}
}
document.getElementById("div1").innerHTML = no;
}
</script>
</body>
</html>
After entering number in the text box when I press submit button it shows the following output
enter no:1
submit next
16
but when i press next button it is not showing any output.My expected output is when I press next button it shoult show the next no. by executing the logic in the myFunction() function.Helpme...
You haven't set any case for when no = 1. You have a case for when no != 1 and when no%2 != 0 both of which are false when no = 1. There isn't any increment logic in here to find the next number and return it. I think you are missing a } at the end of the no%2==0 clause.
Also I fail to see why you have two identical buttons here, next and submit do the same thing. Moreover I would advice more descriptive IDs. div1 isn't a good name for a div.
The javascript part should look like this, if the intention is to implement Collatz conjecture. http://en.wikipedia.org/wiki/Collatz_conjecture
function myFunction(){
var no=document.getElementById("t1").value;
if(no==""||isNaN(no)) {
alert("Not Numeric");
} else {
if(no!=1) {
if(no%2==0) {
no=no/2; // Note the division operator instead of mod
} else {
no=(no*3)+1;
}
}
}
document.getElementById("t1").value = no; // Note that we are writing to the textbox
}
There are some basic HTML issues too, in your post you are using the input tag as
<input id="t1" type="text"> use it as: <input id="t1" type="text" />
Secondly, when you submit the data to the function, you are having some value there! Maybe 1 is the value or 16, whatever. But when you are trying to resubmit, either its not allowed or your input is now an empty field. So the function is not executing further than this step:
if(no==""||isNaN(no))
Try to save the value in the form.
Try using this:
document.getElementById("t1").value = no;
Make sure that the value is captured as it was, because your code is changing the value into some other form, use a new variable for this. That would save the value from the input and again write it back to that input.
This will set the value for that text input as it was before the function. It might make the input again ready for the submit!
I am using below method for validating that one of radio button must be selected.
function validateForm(){
var searchType = document.getElementsByName("form1:searchType");
var a = !(searchType[0].checked);
var b = !(searchType[1].checked);
if(a&&b){
alert('Please select search type');
return false;
}
return true;
}
In above method searchType is radio button which is creating two buttons. It works fine that is shows alert message if none of the two radio buttons are selected but it show alert message even when second of the radio button is selected. Any idea please?
<html>
<head>
<script language="javascript">
function validateForm(){
var searchType = document.getElementsByName("form1:searchType");
var a = !(searchType[0].checked);
var b = !(searchType[1].checked);
if(a&&b){
alert('Please select search type');
return false;
}
return true;
}
</script>
</head>
<body>
<form name="form1">
<input type="radio" name="form1:searchType" /> male
<input type="radio" name="form1:searchType" /> female
<input type="submit" name="submit" value="submit" onclick="validateForm()" >
</form>
</body>
</html>
i am using your function in this code and its working fine, it may help you
You need to use the or operator, not and - when using && it will be true only when both conditions are true - when one of them is false the whole statement is false as well.
So, just change to:
if(a || b){
alert('Please select search type');
return false;
}
And it should do what you want.
Edit: sorry, got confused myself with the boolean logic.
From quick test your code does work exactly as-is: only when no checkbox is ticked the alert shows up.
Please explain what is the problem and steps to reproduce in the jsFiddle if possible and we'll see.