I'm running into an odd issue while trying to set ng-disabled on my 'Save' button in the code below. I want my input field to be required and to be a non-negative number. This code works great as structured, but when I remove that second form below my table ng-disabled no longer works. Why does ng-disabled depend on this completely unnecessary additional form which I purely added for temporary testing purposes?
<div>
<table>
<tr>
<td><p>Limit</p></td>
<td><p>1,000,000</p></td>
<form class="form-inline" name="form">
<td>
<div class="form-group">
<input type="text" ng-pattern="/^[0-9][0-9]*$/" class="form-control" ng-if="limit.saveAllowed" ng-model="limit.user.points"
ng-required="true"></input>
</div>
<p ng-if="!limit.saveAllowed">{{limit.user.points}}</p>
</td>
<td ng-if="limit.saveAllowed">
<div class="form-group">
<button class="btn btn-success" type="submit" ng-click='limit.setLimit(limit.user.points)' ng-disabled="form.$invalid">Save</button>
</div>
</td>
</form>
</tr>
</table>
<form class="form-inline" name="form">
<input type="text" ng-model="limit.user.points"
ng-required="true"></input>
</form>
</div>
Note: I am using the controllerAs syntax so limit refers to my controller. Further, this HTML all resides within a custom directive's template. I don't know if that additional info is helpful, but I'm stumped.
Forms can not be nested directly inside a <tr>(see this).
Simply wrap the form with a <td> (or just move it outside the <table>) and things should work.
Related
Hi I want to get the valid or invalid state of all the forms outside the form tag i.e suppose if any of the form is not valid error message should be shown. myform.$invalid is not working for all forms and is not updating
<div ng-repeat="a in [0,1,2,3,4]">
<form name="myForm">
<input type="text">
</form>
</div>
<div ng-if="myform.$invalid">Fill all fields</div>
It is better to have all the <input> elements on the same form:
<form name="myForm">
<div ng-repeat="a in [0,1,2,3,4]">
<input type="text" name="myInput{{a}}" ng-model="itemArr[$index]" required />
</div>
</form>
<div ng-show="myForm.$invalid">Fill all fields</div>
$scope.itemArr = [];
Also it is important that each <input> element has an ng-model directive.
For more information, see
AngularJS Developer Guide - Forms
As per my understanding angular validation is not working properly with same form name in same page.
Angular will only consider the last form name
Ex:
<form name="myForm">
<input name="myInput" ng-model="myInput" required>
</form>
<form name="myForm">
<input type="email" name="myInpu" ng-model="myInpu">
</form>
<p>The input's valid state is:</p>
<h1>Form 1 : {{myForm.myInput.$valid}}</h1>
<h1>Form 2 : {{myForm.myInpu.$valid}}</h1>
I am having the same concern here, where I am creating multiple instance of form with same format (it's a table for multiple row input). I have been trying adding the $index to the form name but then I am facing issue to access the form_$index inside ng-messages and ng-click
example:
<div ng-repeat="a in [0,1,2,3,4]">
<form name="myForm_{{ ::$index }}">
<input type="text">
</form>
</div>
<div ng-if="myform_{{ ::$index }}.$invalid">Fill all fields</div>
Wondering if anyone else can propose a solution for this use case.
I'm trying to create an input form in Angular that collects a persons name and their signature. For the signature part, i'm using a JQuery plugin that uses a canvas for them to draw the signature. I'm new at Angular and having trouble figuring out how to tie the canvas into my form validation. When the user tries to submit the form, I want Angular to stop them if the canvas is blank (signature is missing).
To check if the canvas is blank, I can make this JQuery call which returns true or false:
$('#signature').signature('isEmpty');
The HTML I have so far is:
<form ng-controller="SignatureController" ng-submit="submit()">
<table>
<tr>
<td>
<input class="td-name" type="text" required placeholder="Enter Name Here" ng-model="drivername"><br>
NAME - Please type here
</td>
</tr>
<tr>
<td>
<div class="td-signature" type="text" id="signature">
<canvas width="1098" height="268"></canvas>
</div><br>
SIGNATURE - Please sign here
</td>
</tr>
</table>
<input type="button" ng-disabled="dataLoading" value="Clear" class="btn btn-primary" onclick="$('#signature').signature('clear');">
<input type="submit" ng-disabled="dataLoading" value="Submit" class="btn btn-primary">
</form>
What would I need to add/change to make Angular mark the canvas as being required when $('#signature').signature('isEmpty') returns true?
How to clone following html without persisting the field values?
<form method=POST action="/url">
<div class="form-group" data-answer>
<div class="pull-left"><label><input type="checkbox" name="answer[1][is_correct]" value="true"> Correct Answer</label></div>
<div class="pull-right">
</span>
</div>
<input type="text" class="form-control" name="answer[1][body]" placeholder="Possible answer">
</div>
<div class="form-group" data-answer>
<div class="pull-left"><label><input type="checkbox" name="answer[2][is_correct]" value="true"> Correct Answer</label></div>
<div class="pull-right">
</span>
</div>
<input type="text" class="form-control" name="answer[2][body]" placeholder="Possible answer">
</div>
. . .
<button type="submit">Submit</button>
</form>
I can see only 3 possible choices here. However, all of them come with major flaws:
.clone() the .form-field normally and reset the field values.
Problem: resetting all the values one by one is cumbersome and is not a future-proof solution. For example, if more fields are added into the .form-group, their values will need to be cleared separately.
Include a hidden .form-group as a template on the page.
Problem: as you see, the input fields contain enumerated names like: answer[1][body]. It is convenient to clone the last .form-group and just increment the value by 1. Cloning the templated .form-group will be lacking this flexibility.
Read the fields as raw html and transform them into JQuery object
Problem: this seems to be a clear solution to me, however I couldn't get it working. The code $.parseHTML($('.form-group').html()) does not return a valid JQuery object, which I need to use .find() and other methods on.
What will be an effective and elegant solution to this problem?
Try this code:
$("button").click(function(){
var t = $("form").clone().appendTo("#clonedForm");
$(t).find("input[type=checkbox],input[type=text], textarea").removeAttr("checked").val('');
});
I had an idea to help me work better and create tools for myself to work faster.
I intend to make documents to save my QA work to the db and to my server.
All that works so far on my local, but the problem im sitting with is that the TinyMCE editor i want to use is not working.
I have a dynamic table added to my form that helps me add and delete rows in my form. In one of the columns i have added the TinyMCE editor in to describe the process i did with my qa testing. I have added the tag "", but when i want to add another row, the editor has stopped working. I would like to know what can i do to create a new row but still be able to have the editor work in eack column/ row
<fieldset class="row2">
<legend>Process</legend>
<p>
<input type="button" value="Add Row" onClick="addRow('dataTable')" />
<input type="button" value="Remove Row" onClick="deleteRow('dataTable')" />
<p>(All acions apply only to entries with check marked check boxes only.)</p>
</p>
<table id="dataTable" class="form" border="1">
<tbody>
<tr>
<p>
<td><input type="checkbox" required="required" name="chk[]" checked="checked" /></td>
<td>
<label>Name</label>
<input type="text" required="required" name="BX_STEP[]">
</td>
<td>
<label for="BX_process">Age</label>
<textarea type="text" required="required" class="small" name="BX_process[]"></textarea>
</td>
<td>
<label for="BX_pass-fail">Gender</label>
<select id="BX_pass-fail" name="BX_pass-fail" required="required">
<option>....</option>
<option>Pass</option>
<option>Fail</option>
</select>
</td>
<td>
<label for="BX_comment">Berth Pre</label>
<input id="BX_comment" name="BX_comment" required="required">
</td>
</p>
</tr>
</tbody>
</table>
<div class="clear"></div>
</fieldset>
<script src="//tinymce.cachefly.net/4.2/tinymce.min.js"></script>
<script>tinymce.init({selector:'textarea'});</script>
I would just like to know how to generate a new text editor for every row i add?
I think you need to initialize each of the textareas independently. For example:
<script>
tinymce.init({selector:'#ta1'});
tinymce.init({selector:'#ta2'});
</script>
<h1>My First Text Area</h1>
<textarea id="ta1">Hello! Look at me, I'm an editable textarea!</textarea>
<h1>My Other Text Area</h1>
<textarea id="ta2">Whoa! Now there are two of us!</textarea>
See my jsfiddle: https://jsfiddle.net/wr8rh6b8/
You might also want to read up on selectors. The same selector syntax is used for CSS and for identifying DOM elements from your JavaScript code. See: https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Getting_Started/Selectors
I have this form which I can't make submit.
<div class="enviar">
<form onClick="submitForm();" id="MessageSend" name="MessageSend" method="post" action="Send_Text_Msg.php">
<table width="100%">
<tr width="100%">
<td colspan="2"width="600px">
<textarea disabled="disabled" rows="4" name="MessageTextArea" id="MessageTextArea" style="resize: none;"></textarea>
</td>
<td>
<div class="button raised blue" style="cursor: pointer;">
<div class="center" fit>Enviar</div>
<paper-ripple fit ></paper-ripple>
</div>
</td>
<td><input type="submit" onclick="submitForm();"hidden id="IDConversa" name="IDConversa" value=""/></td>
</tr>
</table>
</form>
</div>
Since I'm using a < div > as a button I use this Javascript code to submit it
function submitForm()
{
alert("hue");
if(document.getElementById('MessageTextArea').value == "")
return false;
else
document.getElementById('MessageSend').submit();
}
And the weird part is that even the alert() isn't showing up. I was using a normal button before this material design one and It wasn't working either
EDIT:
I gave up on using form. I'll use AJAX instead. Thanks for the help
I tried it in jsfiddle. It seems you have script in bad order!!! If i modified your script as below it start work.
tutorial w3c
Put your validatation script into head or on body. In jsfiddle left side no wrap .. option
Add onsubmit no onclick into the form
<form id="MessageSend" name="MessageSend" method="post" onsubmit="return submitForm()" action="Send_Text_Msg.php">
and it working fine
DEMO JSFIDDLE
You can't write it like this:
</td>
<input hidden id="IDConversa" name="IDConversa" value=""/>
</tr>
Any html data in table should be in td's. Or put that hidden field outside table.
You should also avoid doing onclick on divs. Make an a tag, and put it there.