Make a submit <button> work outside of <form> block? [duplicate] - javascript

This question already has answers here:
Submit form using a button outside the <form> tag
(15 answers)
Closed 8 years ago.
I want to place a submit <button> outside of a <form> block. How to make a submit that can execute method="post" action="/order/setup" from form block`?
<form id="order-form" role="form" method="post" action="/order/setup">
<input type="text name="first_name" />
</form>
<div class="details-section-button row">
<button type="submit" class="btn btn-block btn-dark right shadow arrow">Next <i class="icn btn-right-arrow"></i></button>
</div>

In browsers that support the new form attribute from HTML 5:
<button form="order-form">…</button>
… but don't. Adjust your design so that form controls are inside the form they are associated with. It doesn't make semantic sense to split them up.

$("form#order-form").submit();
http://api.jquery.com/submit/

Try something like this, giving your submit button an id of submitButton:
<div class="details-section-button row">
<button id="submitButton" type="submit" class="btn btn-block btn-dark right shadow arrow">
Next
<i class="icn btn-right-arrow"></i>
</button>
</div>
Then with jQuery:
$("#submitButton").on("click", function () {
$("form#order-form").submit();
});

Related

Dynamic form action,is it possible?

I have 3 buttons on my toolbar (delete,block,unblock). Сan i change form action dynamically
<form action="/users/groupUnblock" method="POST">
<button type="submit" class="btn btn-danger btn-sm">Delete</button>
</form>
Tried to write a func,but its not working
If you don't want to use JavaScript at all, this can be done with pure HTML5. You can specify the action of each button with the formaction attribute.
Example:
<form>
<button type="submit" formaction="http://firsttarget.com">Submit to first</button>
<button type="submit" formaction="http://secondtarget.com">Submit to second</button>
</form>
Read more about this attribute here

hiding div on load and displaying after button click

im currently learning css/js/php
everytime i click the button it shows the div by split second and the hides it again immediately
can someone help
this is the part of the code that im talking about
function showError() {
document.getElementById('error').style.display = "block";
}
<form>
<input type="password">
<div id="error" style="display: none;">Invalid Password</div>
<br/>
<button type="submit" onclick="showError()">LOG IN</button>
</form>
<form>
<input type="password">
<div id="error" style="display: none;">Invalid Password
</div>
<button type="button" onclick="return showError()">LOG IN</button>
</form>
<script>
function showError(){
document.getElementById('error').style.display="block";
}
</script>
There are couple of mistakes first the span tag should be removed since its not closed properly and div should be closed correctly and button should be outside the div tag and mostly importantly button type should not be submit it should be button if its submit the form will be submitted and page will reload as a result it will show the div again

How can I add action = "/#" to a button without using <form>?

How can I add action = "/#" to a button without using <form>?
For example, I want to do
<button type="submit" action = "/logout" class="btn btn-default">Logout</button>
instead of:
<form action = "/logout">
<button type="submit" class="btn btn-default">Logout</button>
</form>
Here is the current code:
<div class="navbar-form navbar-right btn-group">
<button type="button" class="btn btn-default">Score</button>
<button type="button" class="btn btn-default" href="#menu-toggle" id="menu-toggle">Favorites</button>
<button type="submit" class="btn btn-default">Logout</button>
</div>
You can't use action attribute on a button it only works with HTML form. type="submit" is used on a form element to submit the form data. An element with this type will appear as a button by default.
If you don't want to use HTML form you can use anchor tag to send user on any page. You can also do it with JavaScript or jQuery

How can you use javascript and JQuery together to make an IF Else statement for a DIV? [closed]

Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 6 years ago.
Improve this question
In the original code you would click a checkbox that would enable a button that was disabled.
This is using Bootstrap 3. I was having problems with 2 JQuery elements (a slider with many js elements) getting in the way of a code that worked well on it's own, here is the example:
http://www.bootply.com/AlUZOz0zXB
Because of these Java scripts being used for a sliding carousel:
<script src="js/flexslider.js"></script>
<script src="js/carousel.js"></script>
<script src="js/jquery.cslider.js"></script>
<script src="js/slider.js"></script>
It gets in the way of the JQuery for some reason. So I wanted to design the code to work possible with pure javascript:
http://www.bootply.com/SToIs8u2gM
you need to pass some sort of a value to the button to indicate wheather it needs to be enabled or not. You can do that by leveraging ng-model attribute on the checkbox, and bounding it's value to the disabled attribute on the button.
Do this, and it will work
<div class="modal-footer">
<div class="checkbox">
<label>
<input class="check_list" name="check_list[]" type="checkbox" ng-model="checkboxModel.value1">
I accept the Terms
</label>
</div>
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary" id="btn1" disabled={{checkboxModel.value1}}>Accept Terms</button>
</div>
http://tutorialsplane.com/runtest/try.php?trycode=bootstrap-disable-enable-button-jquery&post_code=code7&
I basically did this that worked. I thought it would conflict but it didn't:
Javascript:
<script type="text/javascript">
function enable(){
$("#myBtn").removeAttr("disabled");
$('#myBtn').removeClass('disabled');
$("#myBtn1").attr("disabled", true);
$('#myBtn1').addClass('disabled');
}
</script>
HTML:
<div class="modal-footer">
<div class="checkbox">
<label>
<input type="checkbox" class="btn btn-danger " onclick="enable()" id="myBtn1" value="Enable Button" />
I accept the Terms
</label>
</div>
<input type="button" class="btn btn-danger disaabled" disabled id="myBtn" value="Disabled Button" />
<br>
</div>

Why this Javascript form submission script don't work?

I am very new in JavaScript and I have the following problem.
I have this form:
<form id="actionButton" action="salwf.do?serv=1" method="post">
<button id="accept" name="ctrl" value="Accept" type="submit" class="acceptButton" onclick="sottometti(this)">ACCEPT ICON BUTTON</button>
<button id="cancel" name="ctrl" value="Cancel" type="submit" class="cancelButton" onclick="sottometti(this)">CANCEL ICON BUTTON</button>
<button id="sap" name="ctrl" value="SAP" type="submit" class="sapButton" onclick="sottometti(this)">SAP ICON BUTTON</button>
<input id="testId" name="test" type="hidden">
</form>
As you can see this form contains 3 different button. Clicking on one of this button it is performed the sottometti(this) Javascript script, that have the following code:
function sottometti(obj){
//document.getElementById('testId').value = obj.value;
document.getElementById('testId').value = obj.value[id]
document.getElementById('actionButton').submit()
}
This script should submit the previous form (the id of the clicked button) but it don't work. Why?
I think that it is trying to retrieve an actionButton that is not present in my form code.
Can you help me to make it work?
replace obj.value[id] with obj.id.
Try this alternative:
<form id="actionButton" action="salwf.do?serv=1" method="post">
<button name="ctrl" value="accept" type="submit" class="acceptButton">ACCEPT ICON BUTTON</button>
<button name="ctrl" value="cancel" type="submit" class="cancelButton">CANCEL ICON BUTTON</button>
<button name="ctrl" value="sap" type="submit" class="sapButton">SAP ICON BUTTON</button>
</form>
I have basically just removed all the JavaScript and the hidden input.
Now, on the server side, test it by simply outputting the value of the ctrl POST variable.
You should clearly see accept, cancel or sap according to the button that the user clicked. No JavaScript required, it's built-in, default functionality :)

Categories

Resources