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.

How can i make a curl request in laravel without leaving my current page

I am in a Laravel view with an input field and a button, so I want to make a request to an external API.
<input type="text" class="form-control" name="licence" id="licence" />
<button type="submit" class="btn btn-primary">Validate BVN</button>
The CURL request just URL and the licence input field will be submitted.
curl "url" \
-X GET
The curl request returns some variables like first and last name.
Trying to use this ajax request from the laravel view.
I am trying a JavaScript request like this to a route, but I am not able to get it to work.
<script type="text/javascript">
$(document).ready(function(){
$('#getRequest').click(function(){
$.get('getRequest', function(data){
console.log(data);
});
});
});
</script>
While the route is
Route::get('/home/getRequest', 'WalletController#ajaxreq');
How do I send the input field along with the request and return the values of the API from the controller back to the view?

For the page doesn't reload, you must prevent the "submit" event the button, it is reloading your page (because your action form is probably empty and your method form is GET).
$('#getRequest').click(function(event){
event.preventDefault();
$.get('getRequest', function(data){
console.log(data);
});
});

How to redirect to another page after form action?

I am using Simple Form (getsimpleform.com) to email the HTML form contents to my email. The problem I am facing is that the HTML Form action is handled by getsimpleform so when the user clicks on submit button of the form, they are redirected to https://getsimpleform.com/ but I want them to stay be redirected to another page (i.e. contact.html).
So I want the form action to be performed but at the same time, I want the user to be redirected to another web page.
Thanks.

Just fill up your action attribute
<form action="next-page-please-url">
<button>butt</button>
</form>

You can add an action calback on your button, for example :
in yout HTML
<form>
...
<input type="submit" onclick="redirect()">
</form>
and in your javascript :
var redirect = function(){
document.location.href="contact.html"
}

First of all you need to change the action url of the form to your domain name
From
action="https://getsimpleform.com/"
To
action="https://YourDomain.com/"
and then on your php or whatever server side language you are using you can redirect e.g. I will use php example.
header('Location: http://www.YourDomain.com/OtherPage');

Based on their official page recommendation on redirect
<input type='hidden' name='redirect_to' value='https://yourdomain.com/contact.html' />
Try to insert it into the form and see whether it solves your problem.
P.S. don't forget to change [yourdomain] to your actual domain.

How to save data and reload the page with one button (Click)

I am saving a data with this button
<p><input type="Submit" value="Save" id="Save" /></p>
Is this possible that it also reloads the page at the same time.
I am using this code.
<script type ="text/javascript">
$('#Submit').click(function () {
location.reload();
});
</script>
But it is not working. It only saves the data.

You can do this in two ways:
Forget about JavaScript and make the MVC action return a Redirect response to the page you are coming from.
In stead of type="submit" create a button and attach an event handler which makes an AJAX request and reloads the page when the request has completed. Notice that this solution costs an extra server round trip compared to option 1.
Example for option 1:
return Redirect("Controller", "Action", additionalParamsObject);

how to submit a form then redirect as submitting

I have a regular Form in which the user inputs data, although, the Form page "submit.php", actually takes about 6 seconds to complete the form request. Is there any way in JavaScript to redirect the user after they submit the form?
I need something like this, although this does NOT work, because the page is in the process of loading from submitting the form, (the JavaScript does not process while the page is loading, though, I need it to process while the page is loading.)
HTML:
<form>
<input type='text' id='resizer' name=\"ucode\" placeholder='username'>
<input type='password' id='resizer' name=\"pcode\" placeholder='password'>
<input type=\"submit\" src=\"submit.png\" onClick="redirect()">
</form>
Javascript:
<script>
function redirect() {
document.getElementById(\'divid\').innerHTML = \'<META http-equiv=\"refresh\" content=\"0\;URL=something.pl\?ucode=..&pcode=...\">';
}
</script>
<div id=\"divid\"></div>
I'm NOT looking for a way to make my submit form load faster, my problem is that need this to submit to the server then load to a different page without waiting for the servers response.
Please don't tell me that the best way is to make my form load fast, I know it's the best way, though I don't want that.

Send the data through ajax on different page and then after redirect to someother page through location.href="url"

You cannot redirect before data is sent to server, but you might use AJAX to sent data and as soon it happen, on callback, just redirect
in general to redirect use: use location.reload() of location.href = "..."