We Keep Coding

Is there a way to submit a form that's loaded from a separate page via ajax within the same window?

I have this form:
<form method="post" action="/cart" id="ajax">
{...}
<div>
{{ product.option | hidden_option_input }}
</div>
<button name="submit" type="submit" title="add to cart">Add to Cart</button>
</form>
The form is being loaded to the page via ajax, and its action page also preloaded via ajax in a different link in the navbar. I'd like to submit the form but prevent it from opening a new page when submitted. How can I go about this? I've tried:
Add to Cart
to replace the button, but even though I've attempted to negate the default behavior with "return false;" it still reloads a new page on click. I can see the linked popup window just before the new page load, but it does not submit until the new page appears. I believe it's because the form is being loaded via ajax when a user clicks the link to it, therefore I cannot attach a script to it specifically because until it's on screen, it does not technically exist.

If I understand your question, you would like to just update a portion of the current page. If so, you will have to use AJAX for this:
Keep the "submit" button but make it a standard button and give it an id such as "submit":
<button id="submit" name="submit" title="add to cart">Add to Cart</button>
Then your JavaScript would handle the click event on the button as follows:
$(function() {
let submit = $('#submit');
submit.click( function() { //
submit.prop('disabled', true); // prevent a re-submission
var form = $('#ajax');
var request = $.ajax({
url: form.attr('action'), // get the action from the form
type: form.attr('method'), // get the method from the from
dataType: 'html', // the assumption is that we are dealing HTML here
data: form.serialize()
});
request.done(function(ajaxResult) {
// update the DOM with the results
$('#some_div').html(ajaxResult); // replace contents of <div id="some_div"></div> with new html
submit.prop('disabled', false); // re-enable the submit
});
});
});
You have to arrange for the results sent back to be just the HTML that is required to be updated.
Update
Since responding, you have added a comment with a link that suggests I may have misunderstood your intent. The phrase you used, "submit the form but prevent it from opening a new page when submitted" definitely can lead one to my original interpretation.

Including imagegrabscreen php function to a button onclick without refreshing the page

I'm trying to create a button with an onclick function that activates the imggrabscreen php function. Problem is, I've done several codes and so far the only function that I was able to use was a submit input type in which this refreshes the page. I tried using button as an input type but unfortunately, it does not save any screenshots upon clicking the button. Here's the code that I'm using so far.
if(isset($_POST['btnscreen']))
{
$im = imagegrabscreen();
imagepng($im, "screenshot.png");
}
ob_end_flush();
?>
<form method="post" action="" enctype="multipart/form-data">
<br>
<input type="submit" value="Click to Screenshot" id="btnscreen" name="btnscreen"></center>
<br><br>
</form>

php is parsed and executed server side (pre-processing) so you cannot call any php functions after the page has been sent to the browser. The only way to do this is to make a new request to the server (ajax).
I can't quite grasp what your function does (php cannot make a screenshot of what your browser is displaying as it has no information of how it has been rendered - please note different browsers may display the page differently).
I would try reading up on html5 canvas element which can achieve that (e.g. https://html2canvas.hertzen.com/).
Hope this helps

Page transition on form button?

I'm trying this on my site
http://www.fasw.ws/demos/transitions1/slide1.html
everything is working good but not when i add data-ftrans="slide" to a form button.
example:
<form action"http://google.com"> <button data-ftrans="slide" type="submit" style="height:50px; font-size:20px;">Submit</button>
What does i need to change to get this working ?

I think you must change your button to a depend on the context.
And must have 2 attribute 'href' and 'data-ftrans'. It'll run function slideTo(href, effect, pushstate) in the context.
href: one html page
data-ftrans: transition type
Maybe, you want to submit then change to another page (but not submit page)
<form action="your server script" method="post">
<button click="ajax_submit"></button>
Hide
</form>
<script>
function ajax_submit(){
//do some ajax code
//when success
//a.click();
}
</script>

Ajax on button click, but no forms involved

I would like to make an Ajax call on a button click, but I do not want the button placed within a form. Is this possible?

Yes, Ajax doesn't involve forms. It's basically a request that you create yourself to the server - either GET or POST. Make the request and pass whatever data you need to

Use this bit of code
<button onclick=function()>Button</button>

It is possible:
<form action="example.com" method="post">
...
</form>
<button name="button" id="button">Submit</button>
Way 1: use jquery selector and bind an event.
$('#button').click(function(e) {
//--> actions here
});
Way 2: or call a function in the button:
<button name="button" onclick="javascript:action();">Submit</button>
There's a lot to choose from.

Page refresh with post request

In our application, we need to refresh the page. Now I am using the onclick() event to call the below javascript method.
function refresh() {
document.getElementById('Question-Preview-ComboBox').style.display='none';
document.getElementById('Question-Preview-RelatedSRTicketDetails').style.display='none';
document.getElementById('Question-Preview-SignoffdetailControl').style.display='none';
document.getElementById('Question-Preview-RelatedTicketDetails').style.display='none';
document.getElementById('Question-Preview-PerformedBy').style.display='none';
document.getElementById('Question-Preview-TextBox').style.display='none';
document.getElementById('Question-Preview-CheckBoxMatrix').style.display='none';
document.getElementById('Question-Preview-Radio').style.display='none';
document.getElementById('Question-Preview-CheckBoxMatrixWOT').style.display='none';
document.getElementById('Question-Preview-MultiLineText').style.display='none';
if (windowDirty == true) {
showModal('doyouwanttosave');
}
else {
self.location = 'CreateQuestionnaireForm.html';
}
}
The above script will ask users before they refresh the page "Do you want to save" and will make a GET request to call the controller method to reload the page. But our requirement is to change the GET request to POST for the above same functionality. Please suggest how can I change a GET request to POST?

You will need to create a hidden form, add it to the document and then submit it by calling the .submit() on the form's DOM object.

Include the form tag and specify the action method as post
<form action="destination_url" METHOD=Post>
....
<input type=submit value="Submit" />
</form>

you need to create a form and submit it - than you'll have post request.