We Keep Coding

Disable Button isn't working properly. Text are remove but button is still enabled

I have a problem where if I remove the numbers from the textbooks, the submit button is still enabled. At first, when I key in my inputs on the textbox, it enables my button, but if I remove one of it, it is still enabled.
This is my for my button. I've set the id of my textboxes are "digit" and "digit1"
if ((document.getElementById("digit").value > 0) && (document.getElementById("digit1").value > 0)) {
rand.removeAttribute('disabled');
} else {
rand.setAttribute('disabled', 'disabled');
}
<input id="rand" type="submit" value="Submit" disabled>

You didn't properly define the variable random.
function validate(){
var rand = document.getElementById("rand");
if ((document.getElementById("digit").value > 0) && (document.getElementById("digit1").value > 0)) {
rand.removeAttribute('disabled');
} else {
rand.setAttribute('disabled', 'disabled');
}
}
<table style="border-collapse: collapse" width="100%">
<form action="random" method="get" onSubmit="return validate()">
<tr>
<td>
Lowest number:
<input id="digit" type="text" name="lowestnumber" onchange="validate(event)">
<span id="numbers"></span>
<br/>
</td>
</tr>
<tr>
<td>
Highest number:
<input id="digit1" type="text" name="highestnumber" onchange="validate(event)">
<span id="numbers1"></span>
</td>
</tr>
<tr>
<td>
<input id="rand" type="submit" value="Submit" onclick="validate()" disabled><br/>
</td>
</tr>
<br/>
</form>
</table>
Since stacksnippets.net is currently down, you can view the live fiddle here:
https://jsfiddle.net/41xgLjw9/

Angular.js - ng-disabled on checkbox and still submit a valid form?

I'm using angular.js and trying to verify the form before actually submitting it. This is my HTML so far:
<form name="form" class="css-form" novalidate>
<table>
<tr>
<td>
<input type="text" ng-model="branch.phone_number" name="uPhone" required="" />
<br />
<div ng-show="form.$submitted || form.uPhone.$touched">
<div ng-show="form.uPhone.$error.required">Insert phone number!</div>
</div>
</td>
</tr>
<tr>
<td>
<input type="checkbox" ng-model="branch.approved" ng-checked="branch.approved === 1" required="" ng-disabled="checkUser()" />
</td>
<tr/>
<tr>
<td align="right">
<input type="button" ng-click="reset()" value="Reset" />
</td>
<tr/>
<tr>
<td align="left">
<input type="submit" ng-click="form.$valid && save()" value="Save" />
</td>
</tr>
</table>
</form>
And this is my checkUser function:
$scope.checkUser = function() {
return (user.get().is_admin === 1) ? false : true;
};
Basically, if ng-model="branch.approved" is not truthy, the form won't allow to submit it. If I delete the ng-disabled attribute, the form submits.
What's going on and how to solve it? Thanks!

Your checkbox is required - when the control is disabled, it is not setting any value.
Remove the required="" attribute from input type="checkbox" and it should work as you expect

try this:
use ng-disabled="user.is_admin" then use ng-change on checkbox like this ng-change="checkUser()"
change the function to
$scope.checkUser = function() {
$scope.user = user.get();
};
i guess the user admin state can change during the form life... otherwise u don't need the change event just use ng-disabled="user.is_admin" and initialize the user object inside the controller

Zend framework: Ajax is not working when i am submitting the form from fancybox in zend framework

My form open in a fancybox when i am submitting the form than data will not echo in controller,My script is not working on click event
-Here is my script code in which i use a ajax to send the post data
<script type="text/javascript">
var Q = jQuery.noConflict();
Q(document).ready(
function(){
Q("#button_submit").click(function() { //
alert('ok'); //alert is not working
var name = Q('#nam').val();
var description = Q('#description').val();
if (name != '' && description!='') {
jquery.post('transaction/add',
{'name' : name, 'description' : description },
function (respond) {
alert("ok");
}
);
}
});
});
</script>
-here is my HTML code which contain the form. This form open in a fancy box
<form method="post" id="add-form" name="add-form" class="add-form">
<div class="main_form">
<table id="option-table">
<tr>
<td><label class="lable1">Name:</label></td>
<td> <input type="text" name="nam" id="nam" />
</td>
</tr>
<tr>
<td><label class="lable1">Description:</label></td>
<td><textarea id="description" name="description" rows="8" cols="45"></textarea>
</td>
</tr>
<tr>
<td >
</td>
<td id="table_submit_td">
<input type="submit" id="button_submit_fancy" class="button" name="Submit" value="Submit" />
<input type="submit" id="button_reset" class="button" name="Reset" value="Reset" />
</td>
</tr>
</table>
</div>
</form>

In your HTML, the button ID is button_submit_fancy not button_submit. Change it in one of the code - JS or HTML.

Multiple buttons on an html page to reveal text step by step rather than simultaneously?

trying to create a list of about 7 questions with a click to reveal answer button next to each question.
only problem is when i click one button, it runs the entire js code and shows ALL the answers not just that particular one.
here is my code
<table>
<tr>
<td>Question 1 </td>
<td class = "aligncenter">
<form action="javascript:void(0);">
<div id="reveal-space">
<input type="submit" name="b1" value="1" class="submitbutton aligncenter"/>
</div>
</form>
<script>
$("form").submit(function() {
$("#reveal-space").text("Answer 1").show();
return true;
});
</script>
</td>
</tr>
<tr>
<td>Question 2</td>
<td class = "aligncenter">
<form action="javascript:void(0);">
<div id="reveal-space1">
<input type="submit" name="b2" value="2" class="submitbutton aligncenter"/>
</div>
</form>
<script>
$("form").submit(function() {
$("#reveal-space1").text("Answer 2").show();
return true;
});
</script>
</td>
</tr>
<tr>
<td>Question 3</td>
<td class = "aligncenter">
<form action="javascript:void(2);">
<div id="reveal-space2">
<input type="submit" name="b3" value="3" class="submitbutton aligncenter"/>
</div>
</form>
<script>
$("form").submit(function() {
$("#reveal-space2").text("Answer 3").show();
return true;
});
</script>
</td>
</tr>
<tr>
<td>Question 4</td>
<td class = "aligncenter">
<form action="javascript:void(0);">
<div id="reveal-space3">
<input type="submit" name="b4" value="4" class="submitbutton aligncenter"/>
</div>
</form>
<script>
$("form").submit(function() {
$("#reveal-space3").text("Answer 4").show();
return true;
});
</script>
</td>
</tr>
</table>
how do i fix it to make it so that when the "1" button is clicked it doesn't reveal the texts to the other buttons ?
i may need to take an entirely different approach
thanks for the help in advance

Your form needs unique ID, because when you are setting up your form submit function $("form") is selecting all your forms.
Try changing
<form action="javascript:void(0);">
<div id="reveal-space">
<input type="submit" name="b1" value="1" class="submitbutton aligncenter"/>
</div>
</form>
<script>
$("form").submit(function() {
$("#reveal-space").text("Answer 1").show();
return true;
});
</script>
To
<form id="form1" action="javascript:void(0);">
<div id="reveal-space">
<input type="submit" name="b1" value="1" class="submitbutton aligncenter"/>
</div>
</form>
<script>
$("#form1").submit(function() {
$("#reveal-space").text("Answer 1").show();
return true;
});
</script>
The changes are id="form1" and $("#form1")

Slightly different approach: you can load in all the answers in hidden divs within the form element, and selectively show those divs by finding them in relation to the form that called the submit function, so that the other dormant form don't get triggered.
$("form").submit(function() {
$(this).find("#answer").show();
$(this).find("#reveal-space").hide();
});
Benefits: you don't need unique IDs, you only need one submit function, the text doesn't have to be contained in the jQuery.
jsFiddle

<table id="QnA">
<tr>
<td>Question 1</td>
<td class = "aligncenter">
<input type="button" value="Show Answer" data-answer="Answer goes here" class="submitbutton aligncenter"/>
</td>
</tr>
</table>
<script type="text/javascript">
$("#QnA :input").on("click", function() {
$(this).parent().html($(this).data("answer"));
});
</script>
You don't need a form or any submits, just make everything self-referential (you actually probably don't even need an ID on that table, but I don't know what the rest of your page looks like).

Conflict using multiple forms javascript

I'm using two different forms - one is to retrieve radio button, another is as submission form. Problem is, I cannot use both the form actions at a time.
<table id="newImageTable" border="1" style="position:absolute; ">
<?
while($row=mysql_fetch_array($image_query)) {?>
<form name="radioForm">
<tr>
<td><img border="0" src="<?=$row['image_path']?>" /></td>
<td>
<input type="radio" name="imageRadio" id="<?=$row['image_name']?>" />
</td>
</tr>
</form>
<?}?>
<tr>
<td width="60%">
<!--<input type="file" id="image" /><input type="button" id="imagePathButton" value="Upload Image" onclick="uploadImagePath()" />-->
<form name="submitForm" action="http://128.233.104.33/passimagemodels/uploadServer.php?dbname=<? echo $dbname ?>" method="post" target="foo" enctype="multipart/form-data"
onSubmit="window.open('', 'foo', 'width=200,height=200,status=yes,resizable=yes,scrollbars=yes')">
Upload New Image: <input name="myfile" type="file" id="imageBox" />
<input type="submit" name="submitBtn" value="Upload" onclick=""/>
</form></td>
<td width="10%">
<input type="button" value="Use selected image" id="useImageButton" onclick="post_value();"/>
</td></tr>
</table>
javascript code:
function getRadioValue() {
for (index=0; index < document.radioForm.imageRadio.length; index++) {
if (document.radioForm.imageRadio[index].checked) {
var radioValue = document.radioForm.imageRadio[index].id;
return radioValue;
}
}
}
function post_value(){
alert('im');
var selected_Image = getRadioValue();
if (selected_Image == null){
alert('Please Select an Image');
}
else{
window.opener.document.getElementById(imageId).value = selected_Image;
self.close();
}
}
Here if I put the radioForm outside the table, getRadioValue function works fine but Upload button does not submit the submitForm. And if I surround one <tr> with radioForm scenario is just vice-versa. Are there any restrictions on nesting forms?

Scroll to the bottom if you want to skip the explanation, and get to the solution.
You're creating multiple forms with the same name. document.radioForm will only refer to the first form, which is probably not desired. To solve it, place the form tags outside the while loop.
See below for a simplified overview of your problem, without loss of generality):
Current situation (document.radioForm.imageRadio.length = 1):
<!-- Only the first form is selected by JS. All of the others are ignored-->
<form name="radioForm"><input type="radio" name="imageRadio" id="imag1" /></form>
<form name="radioForm"><input type="radio" name="imageRadio" id="imag2" /></form>
<form name="radioForm"><input type="radio" name="imageRadio" id="imag3" /></form>
<!-- Et cetera -->
Desired situation (<form> placed outside the while loop):
<form name="radioForm">
<input type="radio" name="imageRadio" id="image1" />
<input type="radio" name="imageRadio" id="image2" />
<input type="radio" name="imageRadio" id="image3" />
</form>
Fixed code
One form is enough to meet your wishes. The form will only be submitted when you click at the <input type="submit" .. /> button. Since the name attribute of your previous "second" form is obsolete, I've omitted it without breaking any code.
<form name="radioForm"
action="http://128.233.104.33/passimagemodels/uploadServer.php?dbname=<? echo $dbname ?>"
method="post" target="foo" enctype="multipart/form-data">
<table id="newImageTable" border="1" style="position:absolute;">
<?
while($row=mysql_fetch_array($image_query)) {?>
<tr>
<td><img border="0" src="<?=$row['image_path']?>" /></td>
<td>
<input type="radio" name="imageRadio" id="<?=$row['image_name']?>" />
</td>
</tr>
<?}?>
<tr>
<td width="60%">
<!--<input type="file" id="image" /><input type="button" id="imagePathButton" value="Upload Image" onclick="uploadImagePath()" />-->
<input type="submit" name="submitBtn" value="Upload" />
</td>
<td width="10%">
<input type="button" value="Use selected image" id="useImageButton" onclick="post_value();" />
</td>
</tr>
</table>
</form>
I have adjusted only one thing: The onsubmit event handler have been removed. It serves no purpose, and would be a huge annoyance to the user.

nesting form isn't allowed, check How do you overcome the html form nesting limitation?
the result unpreditable but you can use Javascript to workaround with it.
Checkout jQuery serialize example. see how it extract values, and then submit from via DOM.
http://api.jquery.com/serialize/
In your case, file upload form should be the parent, because you need its encode type to work. Or you can optionally iframe it, using the above technique to reorganize data.