Develop Reference

How to change form action when a 'preview' button is clicked

I am trying to get a different page, preview.php to show when the Preview Button is clicked, by changing the action of the form.
The preview button should lead to another page where I can view the inputs from the file and maybe have options to submit or go back.
The other buttons, submit and clear work however the preview button does not seem to be working. It stays on the same page even after clicking the button.
As a test I put in some alerts. 'here1' and 'here2' alerts work, but 'here3' alert does not work, making me believe the changeAct() function is not reached.
How can I fix this so the form action can be changed?
const wrapper = document.getElementById('blog-btn');
wrapper.addEventListener('click', (event) => {
const btn = event.target.nodeName === 'BUTTON';
if (!btn) {
return;
} else {
processClick(event.target.id)
}
});
function processClick(id) {
alert("Id is "+ id);
if(id == "pre")
{
alert("here 1");
document.getElementById('pre').addEventListener('click', changeAct);
alert("here 2");
}
}
function changeAct()
{
alert("here 3");
document.getElementById('frm1').action="preview.php";
}
<form id="frm1" name="post_form" action="addEntry.php" method="post">
<div id="blog-btn">
<!--Post & Clear Form Buttons-->
<button type="button" value="Preview" id="pre" >PREVIEW</button>
<button type="submit" value="Submit" id="sub">SUBMIT</button>
<button type="reset" value="Reset" id="clear">CLEAR</button>
</div>
</form>

Clarification wanted in the difference between input of type button vs input of type submit when calling jquery form.submit

This code should perform the following when clicked:
submit the form
disable the button to prevent double clicks
add a spinner to the button to notify the user something is happening
if the form is invalid, stop the form submission, remove the spinner, and enable the button.
While writing this code, I found that it will perform validation and form submission only when the button type is set to submit. If the button type is button, the form.submit in the button click event does not submit the form. Processing of the form halts, no validation occurs, no form submission. I set up break points inside the jquery #myForm.submit, and they are never hit. Does anyone have an explanation for this behavior?
frameworks: jquery 3.4.1, bootstrap 4
<form action="doSomething" id="myForm">
...
<!-- this performs validation and submits the form -->
<button type="submit" id="aButton" class="btn btn-primary" data-validate="true">
Save
</button>
<!-- this does not perform validation nor submits the form -->
<button type="button" id="bButton" class="btn btn-primary" data-validate="true">
Save
</button>
</form>
Javascript
removeSpinnerFromButton = function (btn) {
var span = btn.find('span[id="spinner"]');
span.remove();
btn.removeAttr('disabled');
btn.removeClass('cursor-wait');
};
addSpinnerToButton = function (btn) {
btn.attr('disabled', 'disabled');
btn.addClass('cursor-wait');
$("<span/>", {
class: 'spinner-border spinner-border-sm',
id: 'spinner',
role: 'status',
aria_hidden: 'true'
}).appendTo(btn);
};
$('button[data-validate="true"]').click(function () {
var $self = $(this);
$('#myForm').submit(function (event) {
addSpinnerToButton($self);
if ($(this).valid()) {
return true;
} else {
event.preventDefault();
removeSpinnerFromButton($self);
return false;
}
});
});
Edit
this bit of code aides in understanding what is happening.
$(function(){
$('#myInputSubmit').click(function(){alert('input of type submit clicked');});
$('#myInputButton').click(function(){alert('input of type button clicked');});
$('#myButtonSubmit').click(function(){alert('button of type submit clicked');});
$('#myButtonButton').click(function(){alert('button of type button clicked');});
$('form').submit(function(e){alert('form submitted');e.preventDefault();});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form>
<input type="button" id="myInputButton" value="input button" />
<input type="submit" id="myInputSubmit" value="input submit" />
<button type="button" id="myButtonButton">button button</button>
<button type="submit" id="myButtonSubmit">button submit</button>
</form>

input or button type="submit" has a default behaviour: Submit the form
button type="button" (or no type at all) doesn't have a default behaviour and you should add it with a listener, as you're already doing for click event. Inside that function you should validate and, if it's the case, submit the form with $('#myForm').submit();, with no params
With this piece of code, you're adding a submit listener to the form instead of submit it:
$('#myForm').submit(function (event) {
addSpinnerToButton($self);
if ($(this).valid()) {
return true;
} else {
event.preventDefault();
removeSpinnerFromButton($self);
return false;
}
});
When button is clicked, do your validations and then submit the form. Right now, you need a plugin to validate with $(this).valid(), otherwise, an error will be thrown.
$('button[data-validate="true"]').click(function () {
var $self = $(this);
addSpinnerToButton($self);
if ($(this).valid()) {
$('#myForm').submit();
} else {
removeSpinnerFromButton($self);
}
});

How to disable two submit buttons when one of them is clicked

I have two submit buttons in a cshtml file.
<button type="submit" name="SubmitButton" value="accept" id="buttonAccept">Accept</button>
<button type="submit" name="SubmitButton" value="refuse" id="buttonRefuse"Refuse</button>
I am trying to disable these two buttons when either one of them is clicked.
Is there a way to do so?

You can use the similar code for both buttons. onClick on one button disable the other button and so.
<button type="submit" name="SubmitButton" value="accept" id="buttonAccept" onclick="return foo();">Accept</button>
function foo() {
document.getElementById("buttonAccept").disabled = true;
document.getElementById("buttonRefuse").disabled = true;
return true;
}

you can use javascript (especially jQuery) to reach your purpose.
but, actually when you submit your form, it means your form is sent to your server and it returns new result of your view, so the next steps will happen in the backend, your backend will be responsible to render the result in the way you want.
$('#buttonAccept').on("click",function() {
$('#buttonRefuse').attr("disabled", "disabled");
});
$('#buttonRefuse').on("click",function() {
$('#buttonAccept').attr("disabled", "disabled");
});

This should do it:
document.getElementsByName("SubmitButton")[0].disabled = true;
document.getElementsByName("SubmitButton")[1].disabled = true;
I wouldn't use the index directly though.

You can Do like this.
For Disabling the Button in Front-end using Pure JavaScript
<button onclick="document.getElementById('ButtonTwo').disabled = true;" type="submit" name="ButtonOne" id="ButtonOne">First</button>
<button onclick="document.getElementById('ButtonOne').disabled = true;" type="submit" name="ButtonTwo" id="ButtonTwo">Second</button>

firstly add jquery if your page don't have one
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js">
then add on click event like this
<button type="submit" name="SubmitButton" value="accept" id="buttonAccept" onclick="EnableDisable()">Accept</button>
<button type="submit" name="SubmitButton" value="refuse" id="buttonRefuse" onclick="EnableDisable()">Refuse</button>
then you can disable both submit button on any of there click event like this
function EnableDisable() {
$(':input[type="submit"]').prop('disabled', true);
}

How to 'Disable submit button after clicking it' [duplicate]

This question already has answers here:
How to disable HTML button using JavaScript?
(9 answers)
Disable submit button ONLY after submit
(14 answers)
Closed 3 years ago.
I have a page which has a form. When I click the submit button, I need to display a message prompt if continue submit or not. If the user clicks continue submit, I need to disable the submit button while the page is submitting.
The code below does not work.
<form action="action_page.php" method="post">
<button type="submit" id="subbutton" name="submit_page[]" onclick="return confirm('Are you sure of your choices?'); this.disabled=true;">Submit </button>
</form>
The code below is from my action_page.php
if(isset($_POST['submit_page'])){
}

Just set the pointer-events and opacity accordingly:
#subbutton {
"pointer-events" : "none",
"opacity" : 0.5
}
To reenable the button:
#subbutton {
"pointer-events" : "auto",
"opacity" : 1
}
Using JavaScript:
function set_submit(type) {
if(type == 'disable') {
document.getElementById('divsubbutton').style.pointerEvents = "none";
document.getElementById('divsubbutton').style.opacity = 0.5;
} else {
document.getElementById('divsubbutton').style.pointerEvents = "auto";
document.getElementById('divsubbutton').style.opacity = 1;
}
}
Use as needed:
set_submit('disable')
set_submit('enable')

It is due to preceding return statement which interrupts the onclick function prior reaching this.disabled=true; Simply remove the statement keyword return.
< ... onclick="confirm('Are you sure of your choices?'); this.disabled = true;">Submit</button>

I would define a function to handle the submit and disable the button. In fact, if you disable the button when it's clicked, the form won't be submitted; so you need to disable the submit button only after submission happens (i.e. within onsubmit event)
function onSubmit() {
document.getElementById("subbutton").disabled = true;
}
your html will look like:
<form action="action_page.php" method="post" onsubmit="return onSubmit()">
<button type="submit" id="subbutton" name="submit_page[]" onclick="return confirm('Are you sure of your choices?');">Submit </button>
</form>

Fairly simple - just add an if statement:
<button type="submit" id="subbutton" name="submit_page[]" onclick="if(confirm('Are you sure of your choices?')) this.disabled = 'disabled'">Submit </button>

How to click on an input type"submit" button without submiting the whole form

I am trying to click the following line of code:
<input title="Add To Cart" name="pdp_addtocart" value="Add To Cart" type="submit" class="active_step">
I have tried the .click() form and it doesnt work. I need the code in javascript.

With Jquery:
var my_btn = $('input[name="pdp_addtocart"]');
my_btn.click(function(event){
event.preventDefault(); //This avoid the default behavior of the button
//Your Stuff
});
In case your form still sending add this line:
$('form').submit(function(event){
event.preventDefault(); //This avoid the behavior of sending the form
});

Try adding the onclick event to the button:
<input onclick="return false;".... />
return false in the event will halt the form submission.
or using pure javascript:
theButton.onclick = function() {
return false;
};
Edit:
jQuery version:
$theBtn.click(function() {
return false;
});

Does it have to be a <input type="submit" />?
You could use a <input type="button" /> instead.