I have a partial html file say test.html, I want it to include in main page say main.html twice. I am doing ng-pattern on a text box in my partial file. Its not getting applied to my main page. Please find below example and help me.
test.html (Partial)
<form name="testform">
<div>
<input name="firstname" ng-pattern="/^[a-zA-Z0-9]+$/">
</div>
</form>
main.html
<div>
<div>
<ng-include src="'test.html'"></ng-include>
<button type="button" ng-show="testform.firstname.$error.pattern==false">
</div>
<div>
<ng-include src="'test.html'"></ng-include>
<button type="button" ng-show="testform.firstname.$error.pattern==false">
</div>
</div>
button ng-show is working on only one div, not on both and that too If I use $parent for the partial form name.
Please help me to find what I am missing.
The problem is that you reference same DOM object.
By specyfying name and validating it, you call twice, the same form and same property name. Angular does that once and think that it make done its work.
I think it is not intended to do so, since you can create two forms.
By adding extra class or changing at least form name and wrapping ng-include with form name, you can solve this problem:
test.html
<div>
<input name="firstname" ng-pattern="/^[a-zA-Z0-9]+$/">
</div>
main.html
<div>
<div>
<form name="testform1">
<ng-include src="'test.html'"></ng-include>
</form>
<button type="button" ng-show="testform1.firstname.$error.pattern==false">
</div>
<div>
<form name="testform2">
<ng-include src="'test.html'"></ng-include>
</form>
<button type="button" ng-show="testform2.firstname.$error.pattern==false">
</div>
</div>
Alternatively, you can just create two views with forms and ng-include them accordingly.
Related
I am trying this ,
<div ng-form="sadadPaymentForm" class="sadadPaymentForm" ng-if="vm.isSadadEnabled" name="sadadPaymentForm" validate-popup-form>
<div ng-if="vm.isSadadEnabled">
<div class="credit-debit-card-div" ng-include="'sadadTemplate'" ng-show="vm.view_tab == 'tab7'">
</div>
</div>
</div>
<span ng-show="vm.view_tab=='tab7' && vm.isSadadEnabled">
<button type="button" class="primary inline pay-now" id="paynowbtn" ng-disabled="!vm.checked3 || vm.sadadPaymentForm.$invalid" ng-click="vm.payByVoucher();" analytics-on="click" analytics-event="uaevent" analytics-eventcategory="Payment" analytics-eventaction="PayNow"
analytics-eventlabel="Pay now">
Pay by sadad
</button>
</span>
And , my template in another html file
<script type="text/ng-template" id="sadadTemplate">
<input fieldlabel="Online Payment ID" type="text" name="onlinePaymentId" ng-model="vm.sadadpayment.onlinePaymentId" class="form-control input-type-text"
ng-model-options="{ debounce: 100 }" validationKey-required="PaymentAdress1IsRequired" required maxlength="200">
</script>
Here the vm.sadadPaymentForm.$invalid does not work but Indidual components validation works on blur on blur of input .
BUT , if I add vm to ng-form ,ie like this
<div ng-form="vm.sadadPaymentForm" class="sadadPaymentForm" ng-if="vm.isSadadEnabled" name="vm.sadadPaymentForm" validate-popup-form>
<div ng-if="vm.isSadadEnabled">
<div class="credit-debit-card-div" ng-include="'sadadTemplate'" ng-show="vm.view_tab == 'tab7'">
</div>
</div>
</div>
Here the vm.sadadPaymentForm.$invalid works but Indidual components validation fails on blur of input for eg, TypeError: Cannot read property 'onlinePaymentId' of undefined
Help me understand how can I make both individual validation and the final form validation work together.Angular Ver 1.5,cannot upgrade this now.Need a solution with 1.5.
Form name attribute should have sadadPaymentForm inspite of vm.sadadPaymentForm. Since you don't have form name specified correctly, validation is failing.
name="vm.sadadPaymentForm"
should be
name="sadadPaymentForm"
Ok found out the issue , its basically a scope issue.
replaced
ng-if="vm.isSadadEnabled"
with
ng-show="vm.isSadadEnabled"
ng-if was preventing the DOM from rendering thus killing the scope variable vm itself
I'm trying to use a tiny piece of javascript:
$("#btn_clear").click(function(){
$("#two")[0].reset();
});
to reset a section of a form which i have inside a div. the form has multiple sections (divs), but i only want it to clear the form fields inside a specific div
html pseudocode:
<form ...
<div id="one" ...
<div id="two" ...
<label for=...
{{ form.startdate }}
{{ form.startdate.errors }}
...
I'm trying to use this button (also in the html) combined with the javascript to clear div id="two":
<button class="btn btn-primary" id="btn_clear" style="margin-left: 142px" value="Reset" type="button">Clear Section</button>
When i click the button nothing happens and I don't get any errors in the console. Is there something special I need to do to clear a django form field in this manner?
You could try something like this:
<div id="two" ...
<script>
$("#btn_clear").click(function(){
$("#two :input").val('');
});
</script>
EDIT
For checkboxes:
$("#btn_clear").click(function(){
$("#mydiv :input").val('');
$("#mydiv :input[type=checkbox]").prop('checked', false);
});
https://jsfiddle.net/gd6mbcvz/27/
I am in a situation where I have one form inside another form. What I'm trying to achieve is when I submit the parent form, it is submitted to a defined URL however, when I submit the child form, it is submitted to a different URL.
I know its not possible in html to use nested forms but can anyone suggest any trick or tip by using JQuery or JavaScript so that submitting the child form disables the parent form?
Below is my HTML Structure:
<form action="{{url('checkout')}}" class="mt-5 check-out-form" method="post">
<form action="{{url('user/address')}}" class="mt-5 check-out-form" method="post">
<input type="submit" value="Update Address">
</form>
<input type="submit" value="CheckOut">
You should not attempt to nest forms within each other. The HTML standards state this.
"There can be several forms in a single document, but the FORM element can't be nested."
If you're comfortable with it, simply have two different forms for the different functionality or a single form that does it all.
Bottom line is there is never a logical reason to nest a form.
I think you should create a model outside the main form and call it
Try this
<form action="{{url('checkout')}}" class="mt-5 check-out-form" method="post">
<form action="{{url('user/address')}}" class="mt-5 check-out-form" method="post">
<button onclick="$(this).closest('form').submit()">Send 1</button>
</form>
<button onclick="$(this).closest('form').submit()">Send 2</button>
this bites me too, like many others I have a simple ng-form (:
cleared for bravity) in a partial:
<form ng-submit="functionName()">
<input type="text" class="postField" ng-model="model.text" required ng-maxlength=200 />
<button class="postBT" ng-click="functionName()" ng-class="BToverclass" ng-mouseover="BToverclass = 'overShadow'" ng-mouseleave="BToverclass=''">Post</button>
</div>
</form>
for some reason every form submit, we get 2 posts to the controller, with all the data doubled. I checked and the specific controller doesn't appear in the html, but only in the route. Any idea what I'm missing?
Thanks!
You have both an ng-click() calling functionName() and a call to it from ng-submit. Each results in a call to your function. You only want the submit one.
FYI, you also have a </div> with no opening <div> for it to close.
Here's working code:
<form ng-submit="functionName()">
<input type="text" class="postField" ng-model="model.text" required ng-maxlength=200 />
<button class="postBT" ng-class="BToverclass" ng-mouseover="BToverclass = 'overShadow'" ng-mouseleave="BToverclass=''">Post</button>
</form>
I have a page with a hidden form containing several divs.
<form action="...">
<div>
<input id="menubar_open_article_bid" name="bid" onfocus="this.select();" onkeyup="do_v(); type="text">
<a href="#" onclick="return do_h();">
Beitrag öffnen </a>
</div>
<div>
<input id="menubar_open_article_cid" name="cid" onfocus="this.select();" onkeyup="do_a();" type="text">
<a href="#" onclick="return do_y();">
Container öffnen </a>
</div>
<div>
<input id="menubar_open_article_iid" name="iid" onfocus="this.select();" onkeyup="do_b();" type="text">
<a href="#" onclick="return do_x();">
Inhalt öffnen </a>
</div>
</form>
As a first try i copied one of the divs using jQuery to another form in order to show it there (visible).
That worked great, but now the html element id is there twice.
I do not want to change that id. So a solution where i could only reffer to the div with id "menubar_open_article_iid" to show the html-element would solve my problem. Is that possible? (though i never heard of something like this)
As far as I am aware, this is not possible.
I think the main problem here is that you want one input shown twice, but still being the same input. That is going to be problematic, and it is also bad interface design. The user is likely to be confused by having two separate but different inputs in a form.
I'd recommend you to not do this.
Maybe you can leverage this approach:
I'd use jQuery and jQuery metadata:
http://plugins.jquery.com/project/metadata
In your hidden form, don't specify any id's. Instead, specify what you want the ids to be via class metadata:
<form class="hide form-to-clone">
<div>
<input class="setId {id:'id1'}" />
</div>
<div>
<input class="setId {id:'id2'}" />
</div>
<div>
<input class="setId {id:'id3'}" />
</div>
</form>
In jQuery, clone the hidden form:
var clone = $('.form-to-clone').clone();
Then, loop through the elements in the clone and set the ids:
clone.find('.setId').each(function() {
var $this = $(this);
$this.attr('id', $this.metadata().id);
});
Then, append your cloned form to the page somewhere:
clone.show().appendTo('body');