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>
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 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.
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 have 2 buttons - Delete and Submit. Submit button is disabled initially. I am trying to enable Submit button whenever the user clicks on Disable button. I am using AngularJS 1.3.15 for this project.
main.html
<body>
<button ng-disabled="isItemDeleted" ng-init="isItemDeleted=true"
class="btn btn-lg btn-primary create-txn-button" ng-click="submit()">Submit Transaction</button>
deleteController.js
angular.module('myApp').controller('myCtrl',
function{};
$scope.deleteItem = function(item)
{
$scope.isItemDeleted = false;
var modalScope = $scope.$new(true);
modalScope.message = 'Why would you like to delete this item?';
modalScope.item = item;
modalScope.transaction = $scope.transaction;
};
But, even after setting the $scope.isItemDeleted to false, the submit button is not enabled. I believe the issue is connecting to the controller. I have to connect my div tag to the controller. But if I do it, the entire page is changed. Any clue?
Update: deleteItem() function is getting called by Delete Button.
DeleteButtonTabView.html
<div ng-controller="myCtrl">
<button ng-click="deleteItem(item)" class="btn btn-info btn-sm">Delete</button>
</div>
Please find the link to JSFiddle: https://jsfiddle.net/L1bnv9fr/
I am trying to copy the content of a button in a html page to another button, I tried the following code, it doesn't work, it can only copy text from one input field to another, how to do the same for buttons ?
<!DOCTYPE html>
<html>
<body>
Field1: <input type=text id=field1 value="Hello World!"><br>
Field2: <input type=text id=field2><br><br>
<button id=BT_1 type=button onclick=myFunction()>ABC</button><br>
<button id=BT_2 type=button onclick=myFunction()>123</button>
<P>
<button onclick="myFunction()">Copy Text</button>
<script>
function myFunction()
{
document.getElementById("BT_2").value = document.getElementById("BT_1").value;
document.getElementById("BT_2").value = document.getElementById("field1").value;
document.getElementById("field2").value = document.getElementById("field1").value;
}
</script>
</body>
</html>
Prefer to have something like the following :
<button id=BT_1 type=button onclick=myFunction(BT_1)>ABC</button>
function myFunction(From_BT)
{
document.getElementById("BT_2").value = document.getElementById(From_BT).value;
}
Is this what you have in mind?
https://jsfiddle.net/jimedelstein/asfh2q2c/4/
The value of the button is not the same as the innerHTML.
Another solution would be to leave your javascript as is, but use
<input type="button" value="Button Text" id="BT_1" onclick='myFunction()' ></input>
See here for an example of both: http://permadi.com/tutorial/jsInnerHTMLDOM/
You can also create a function, let's call it copy_button_text that accepts two parameters the source button and target button, which we would call like so onclick='copy_button_text("BT_1", "BT_2")'. You will see in the fiddle, the myFunction() works, but each button actually uses this function to apply it's text to the other button.