I want to have a second submit button for a form where jquery will change the name attribute first and then submit this button like this:
<form method="post" id="myForm>
...
<button class="ui primary button tiny" type="submit" name="noredirect" id="myformsubmit"><i class="black save icon"></i>Save</button>
</form>
The above code just works when i click the button. But at the top of the page i have the following a tag:
<a href="#" id="redirectingform">
<center><i class="big save outline icon" style="margin-right:0px !important;"></i></center>
<div><center>Opslaan</center></div>
</a>
<!-- Below code is at the bottom of the page -->
<script>
$('#redirectingform').click(function() {
$('#myformsubmit').attr("name", "redirectingtoviewonly") ;
$('#myformsubmit').submit() ;
});
</script>
What I see that the jquery changes the name attribute to "redirectingtoviewonly" but it doesn't submit the button with the line $('#myformsubmit').submit() ;
What am i doing wrong?
myformsubmit is a button, buttons do not have a submit function.
Related
When clicking on the checkbox it hides currently displaying DIV & shows hidden DIV. After this hidden div displayed it has a form to submit on button click.
My problem is when i click on this submit button, the form is hiding again. I have tried stopPropagation(), preventDefault() and many ways & problem still exist. When I use preventDefault() then it shows the div without hiding but the submit is disabled.
I saw many questions related this.but nothing works to me. I want to submit form without hiding the div which the form resides. I'm a beginner with jquery.
$(function() {
$("#active").click(function() {
if ($(this).is(":checked")) {
$("#donorTeam").show();
$("#donor").hide();
} else {
$("#donorTeam").hide();
$("#donor").show();
}
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="checkbox" id="active"> select type
<div id="donor" style="display:block;"></div>
<div id="donorTeam" style="display:none;">
<form>
<button type="submit" id="sub">Add</button>
</form>
</div>
Thanks in advance.
You could try either of these 2 approaches
1.
$(function () {
$('#donorTeam form').on('submit',function (e) {
// Ajax call here
e.preventDefault();
});
});
2 . add onsubmit="return false" to the form attribute
<form onsubmit="return false">
<button type="submit" id="sub">Add</button>
</form>
I am making a web app and instead of routing to a whole new page when a submit button is pressed, I just want to display something else over the mdDialog or form that I already have.
So far I am mostly just planning it out, but some pseudocode that I have is something like this:
HTML:
<form [formGroup]="firstFormUserSees">
**input containers and what not**
</form>
<div>
<button md-raised-button (click)="submit()"[disabled]="firstFormUserSees.invalid>Submit</button>
</div>
<form [formGroup]="secondFormUserSees" *ngIf= **something**>
**second form stuff here**
</form>
And in the typeScript there would be a method called submit(), but I just am not sure how to go about it and am new to TS and angular 2
You can use *ngIf.
For example:
Above your constructor:
show_my_form = true;
HTML
<form [formGroup]="firstFormUserSees" *ngIf="show_my_form">
**input containers and what not**
</form>
<div>
<button md-raised-button (click)="submit()"[disabled]="firstFormUserSees.invalid>Submit</button>
</div>
<form [formGroup]="secondFormUserSees" *ngIf= **something**>
**second form stuff here**
</form>
And in the function you trigger after a submit
this.show_my_form = false;
You can show and hide the content by changing the boolean. In your case hide the form and show another element. (You need to create a boolean for the other elements aswell)
I need to make a submit button work with two different IDs. Below is the HTML code:
Button: <button class="some class" type="submit" id="gform_submit_button add_to_quote">Submit</button>
Since it's not possible to assign two different IDs to a button, what's the best way to deal with it?
You'll need to create a button (it doesn't need an id) and attach a JavaScript event handler to submit the form programatically when clicked.
For example:
<form name="myForm" action="...">
<!-- Form elements go here -->
<button id="button1">Submit Button 1</button>
<button id="button2">Submit Button 2</button>
</form>
<script type="text/javascript">
var button1 = document.getElementById('button1'),
button2 = document.getElementById('button2');
function submitForm() {
document.myForm.submit();
}
button1.addEventListener('click', submitForm);
button2.addEventListener('click', submitForm);
</script>
Given this code:
<div ng-controller="MyCtrl">
<form ng-submit="onSubmitted()">
Header inputs:
<input type="name" ng-model="sample" required/>
<input type="name" ng-model="sampleX" required/>
<input type="submit" value="This submit triggers validation. But I wanted to put this button at the end of the page"/>
</form>
<hr/>
Some other form here. Think line items
<hr />
<a class="btn" ng-click="/* what could should be put here, so this can trigger the firt form's validation, then submit? */">Wanted this submit button to trigger the validation+submit on the form in which this button doesn't belong</a>
</div>
var app = angular.module('myApp', []);
function MyCtrl($scope) {
$scope.onSubmitted = function() {
alert('submitted!');
};
}
I want the last button to trigger the validation(then submit when things are valid) on first form. As of now, only the button inside the form can trigger that form's validation and submission. Is there any possible way for a button outside the form to do that?
Live test: http://jsfiddle.net/dzjV4/1/
You can create directive which you can then attach to <a class="btn".... Check this jsfiddle
http://jsfiddle.net/dzjV4/2/
Note that I added to <input type='submit' id='clickMe'... and linked it with link at the bottom <a class='btn' linked="clickMe"...
for (control of $scope.[form name].$$controls) {
control.$setDirty();
control.$validate();
}
You can try the above codes. Make it running before submit.
Ideally there'd be a programmatic way to cause validation to re-run across a form. I have not investigated that completely but had a situation that required multiple controls to be re-validated based on different data in the scope -- without the user interacting with the individual controls. This arose because the form had two action buttons which each required different validation rules be in play when they were clicked.
The UI requirement changed before I fully implemented forcing re-validation but before it did I got most of what I needed by copying and then re-setting the form's data. This forced re-validation across the form within the current scope. Basically, it's along the lines of the following (not tested, but taken from the code that was working). In this case the form's data was bound to the properties in one object.
var formData = $parse(<form's model>);
var dataCopy = angular.copy( formData($scope) );
formData.assign( $scope, dataCopy );
This may or may not be acceptable, but if you can get away with the SUBMIT button being disabled until the form is completed, you can do this:
<form name="formName">
<input ng-required="true" />
</form>
<button ng-click="someFunction()" ng-disabled="formName.$invalid" />
It's also worth noting that this works in IE9 (if you're worried about that).
Give your form a name:
<div ng-controller="MyCtrl">
<form name="myForm">
<input name="myInput" />
</form>
</div>
So you can access your form validation status on your scope.
app.controller('MyCtrl', function($scope) {
$scope.myForm.$valid // form valid or not
$scope.myForm.myInput // input valid or not
// do something with myForm, e.g. display a message manually
})
angular doc
There is no way to trigger browser form behavior outside of a form. You have to do this manually.
Since my form fields only show validation messages if a field is invalid, and has been touched by the user:
<!-- form field -->
<div class="form-group" ng-class="{ 'has-error': rfi.rfiForm.stepTwo.Parent_Suffix__c.$touched && rfi.rfiForm.stepTwo.Parent_Suffix__c.$invalid }">
<!-- field label -->
<label class="control-label">Suffix</label>
<!-- end field label -->
<!-- field input -->
<select name="Parent_Suffix__c" class="form-control"
ng-options="item.value as item.label for item in rfi.contact.Parent_Suffixes"
ng-model="rfi.contact.Parent_Suffix__c" />
<!-- end field input -->
<!-- field help -->
<span class="help-block" ng-messages="rfi.rfiForm.stepTwo.Parent_Suffix__c.$error" ng-show="rfi.rfiForm.stepTwo.Parent_Suffix__c.$touched">
<span ng-message="required">this field is required</span>
</span>
<!-- end field help -->
</div>
<!-- end form field -->
I was able to use this code triggered by a button to show my invalid fields:
// Show/trigger any validation errors for this step
angular.forEach(vm.rfiForm.stepTwo.$error, function(error) {
angular.forEach(error, function(field) {
field.$setTouched();
});
});
// Prevent user from going to next step if current step is invalid
if (!vm.rfiForm.stepTwo.$valid) {
isValid = false;
}
I am trying to set the focus of an input field inside my form when I reveal a modal using ZURB Foundation framework. I am really truly sorry if this question has been asked before I've been having problems finding a solution to this for a while.
This is what I have:
<div id="myModal" class="reveal-modal" data-reveal>
<form action="php_scripts/post_message.php" method="POST" name="modalForm" id="modalForm">
<label for="curse">Пиши си овде:</label>
<textarea type="text" name="curse" id="curse" placeholder="Напиши што ти душа сака.." required="true"></textarea>
<input type="submit" name="submit" class="button secondary tiny right" value="OK">
</form>
<a class="close-reveal-modal">×</a>
</div>
Everytime I click a button this modal pops up and I want my input field (textarea) to be in focus when I do that. I tried adding the autofocus attribute and I also tried using javascript to set the focus when I click the button or when this div shows or loads (onshow and onload methods). Nothing seems to work for me so any help will be much appreciated.
I think you'll have to use JS or jQuery to handle the opened event like this..
$(document).on('opened.fndtn.reveal', '[data-reveal]', function () {
var modal = $(this);
modal.find('[autofocus]').focus();
});
Demo: http://codeply.com/go/Ahs4oZDsWn
With Foundation 6 the event name has changed:
$(document).on('open.zf.reveal', '[data-reveal]', function () {
console.log('asdfasdfsadf')
var modal = $(this);
modal.find('[autofocus]').focus();
});