I am trying to post the form from modal. To keep the current page, I target post to the iFrame.
Which trigger is triggered after posting the form? Or any other solution to close modal after post?
OnSubmit, as seen in the code, do not work.
<div class="modal-body">
<form method="post" id="modalForm" action="/Test/TestForm" target="myframe">
<input type="text" name="id" required />
<input type="text" name="name" required />
<input type="submit" value="Post" onsubmit="alert('after post - close modal!');" />
</form>
</div>
You can post form via Ajax and get the begin and end request by using the following approach:
<script>
$(document).ajaxStart(function () {
//display loading, etc.
});
$(document).ajaxComplete(function () {
//hide loading, etc.
});
</script>
Related
I'm integrating Adyen 3DSecure payments. I make a request to Adyen with the card details to get the URL of the bank, and then redirect to the bank with a HTTP POST request using a form. The form should be self-submitting. See the Adyen documentation here: https://docs.adyen.com/developers/risk-management/3d-secure#redirecttothecardissuer
At the top of my Angular 4 component I'm using ElementRef to get access to the form submit button:
#ViewChild('submitButton') submitButton: ElementRef;
I then make a request from my Angular 4 component:
Observable.forkJoin([
this.paymentForm.validate(),
this.orderEmailForm.validate(),
])
.catch((e) => {
isValidationError = true;
throw e;
})
.switchMap((result) => {
...
...
this.apiService.startBuyGift(userId, aPayload)
.do((paymentAuthorise: PaymentAuthorise) => {
this.paymentAuthorise = paymentAuthorise;
setTimeout(() => { // need timeout, because HTML is not there yet
console.log('submitButton is ', this.submitButton);
this.submitButton.nativeElement.click();
}, 1000);
})
.finally(() => {
})
paymentAuthorise contains the details to be used in the form to do a POST to the bank e.g. the issuerUrl to be redirected to. My template is:
<div *ngIf="paymentAuthorise">
<form method="POST" action="{{ paymentAuthorise.threeDSecure.issuerUrl }} " >
<input type="hidden" name="PaReq" value="{{ paymentAuthorise.threeDSecure.paRequest }}" />
<input type="hidden" name="MD" value="{{ paymentAuthorise.threeDSecure.md }}" />
<input type="hidden" name="TermUrl" value="{{ paymentAuthorise.threeDSecure.issuerUrl }}" />
<input type="submit" class="button" value="continue" #submitButton />
</form>
</div>
This line this.submitButton.nativeElement.click(); should do the submit and redirect to the issuerUrl. However nothing happens. Even when I actually click the submit button, again nothing happens (the form is populated correctly with the correct action etc).
It's as if a traditional form with an action and a submit button does not work in modern day Angular. Any ideas?
EDIT
After rendering, the HTML looks like this:
<form _ngcontent-c2="" method="POST" novalidate="" action="https://test.adyen.com/hpp/3d/validate.shtml " class="ng-untouched ng-pristine ng-valid">
<input _ngcontent-c2="" name="PaReq" type="hidden" value="eNpVUttygjAQ/RXrB5AQrjJrZiLMWB9QbOlzh4lbZUZAA1Tt1zfBW5unPXv2ejaQ7xRi8o6yV8ghxbYttjgqN9NxFIaOxwLb9VwaUBpOxhwy8YZHDt+o2rKpuW1RiwG5Q52u5K6oOw6FPM4WS+7ZzHGB3BBUqBYJz7HtsqoS8tiXChWQqxvqokL+IT5F/BLFe9RV5+VXF69SIAMFsunrTl24E+imdwC92vNd1x3aiJDT6WTJIXWrUy3ZVEAMD+Q5WtYbq9X1zuWGr5LtzzJfOGm+tpeJcNJEuKu1MG8KxETApuiQM2qH1GPuiAYRdSIWABn8UFRmED6fZSPftia+3vbqgYNpJK7Atw3z1wNacYW1vPCQaeqBAM+HpkYdoZd82ECeY8evRl/Zac08ZgT2/CCc0LvUA2GqlFodPXQ4lDEAiEkltyOS27G19e8T/AIBp600">
<input _ngcontent-c2="" name="MD" type="hidden" value="djIhOGZGVHMzNXVGMmNBYit4Vk1QWTVOQT09IXSU4cnFE9pTy1vmgpKOm7wF7CWsmu+z6CnBoBKAFMyo9Phpfuv9NljsAKOcpfrK98lwuFF0ZtOyg6pO366T0Hkb2hObYrn58Moq1hRoLtpZL+yBQE6I2ckKR9xErkyqqofXDJdhovfAe7lzDKzbu38jv7jzYKjh6pZGhSXUxMVr+iHJsLskllfIrghEOdkWYNe0FzmNsA43Cmceq0lQrCmlMBz9HnYP8WG5IETkEFk81qisvqqw7q7mIcSqRLcR1TBSn1ZKyaAajazFe0Hx7Y9yc67MeoSw6zNhq8UHqPOvDKytHmQlJaflk4FyhnkqH0OAtGJx">
<input _ngcontent-c2="" name="TermUrl" type="hidden" value="https://test.adyen.com/hpp/3d/validate.shtml">
<input _ngcontent-c2="" class="button" type="submit" value="continue" ng-reflect-class-base="button">
</form>
When I click this button, nothing happens. When I copy this to it's own separate HTML page, when I click, I get redirected to https://test.adyen.com/hpp/3d/validate.shtml as expected.....
Programatically submitting the form rather than clicking the button worked:
this.issuerForm.nativeElement.submit();
My JS is not that great so I have been fiddling with this for a while now.
I have a form which is being POST to another file when the submit button is clicked. When it is clicked I also want to show an alert then redirect the user back to a URL.
The redirecting code works just fine on a button where I call the function "onclick" like so:
<button onclick="test()">Return</button>
But I don't want to have an extra button for this...I want the form to POST then show an alert box then go to URL specified but I get not a function error from console, thanks.
<iframe name="noreloadhack" style="display:none;"></iframe>
<form action="http://www.example.com/test.php" onsubmit="return test();" method="post" target="noreloadhack">
JS:
<script>
function test() {
alert('Hello World');
var return_url = document.getElementById('return_url').value;
window.location.href= return_url;
}
</script>
If it makes a difference I have the form target set to a hidden iframe as a hack to not reload page on submit (I know, not the best method). I'm pretty much using 4 form attributes here.
I have some old code that I used to solve a similar situation. Where I wanted to submit a form but not reload the page, here it is. Since there were only 4 input fields I just grabbed the values using jquery.
Javascript:
function processForm() {
var teamMembers=new Array();
console.log($("#"));
var schoolName=$("#schoolname").val();
var teamMembers=new Array();
teamMembers.push($("#contestant1").val());
teamMembers.push($("#contestant2").val());
teamMembers.push($("#contestant3").val());
$.ajax({
method: "POST",
url: "php/register.php",
data: { schoolname: schoolName, teammembers:teamMembers.toString()}
})
.done(function( msg ) {
alert( "Your team is now registered " + msg );
$('#register').hide();
location.reload();
});
// You must return false to prevent the default form behavior
// default being reloading the page
return false;
}
HTML:
<form id="registration_form" onsubmit="return processForm()" method="POST">
<p style="margin:0px;">School Name:</p>
<input type="text" id="schoolname" name="schoolname" autocomplete="off" class="input" required>
<hr>
<p style="margin:0px;">Contestants</p>
<div id="teammembers">
<input type="text" id="contestant1" name="contestant1" autocomplete="off" class="input" required>
<p></p>
<input type="text" id="contestant2" name="contestant2" autocomplete="off" class="input" required>
<p></p>
<input type="text" id="contestant3" name="contestant3" autocomplete="off" class="input" required>
</div>
<input type="submit" id="registered">
I'm adding some content through form to the database and then reload this part of page to update the content. And then I want to add the next content and again reload but the .submit method I use, sends undefined instead of the written content. Here's the HTML code:
<form id="addForm" method="post" action="/addContent">
<input type="text" id="content" name="name" value="" placeholder="New content" required/><br/><br/>
<input name="submitted" id="submitted" value="Add content" class="submit" type="submit" />
</form>
And here's JS:
<script>
$('#addForm').submit(function() {
$.post('/addContent', {
data: $('#addForm').serializeArray(),
}, function(response) {
$('#contentPart').html(response);
});
return false;
});
</script>
Can anyone help me? I'll be gratefull.
You need to assign your event on any addForm form that may appear in DOM in the future:
$(document).on('submit', '#addForm', function() {
...
});
I have multiple forms in my php file for different buttons. So, if I click on Back button, ramesh.php script should be called and so on. This is the code.
<form action="ramesh.php">
<input type="submit" value="Back" />
</form>
<form action="process.php" method="post">
<input name="rep_skyline" type="text" />
<input type="submit" />
</form>
<form action="update.php" method="post" >
<button type="submit">Update</button>
</form>
However, I need to pass some data to server from my client side on form submit just for the update button. I have a javascript function to send the data to server side as below.
<script type="text/javascript">
$(document).ready(function() {
$('form').submit(function(e) {
var mydata = 3;
if ($(this).is(':not([data-submit="true"])'))
{
$('form').append('<input type="hidden" name="foo" value="'+mydata+'">');
$('form').data('submit', 'true').submit();
e.preventDefault();
return false;
}
})
})
</script>
If I click on the update button, the javascript function is working fine. However, if I click on Back or Submit button, I should not be calling the javascript function. Is there someway to do this?
Give your form an id:
<form action="update.php" method="post" id="update-form">
Then use a more specific selector:
$("#update-form").submit(function() {
// Code
});
I'm not quite sure why you need JavaScript to dynamically add data to your form, however. You should just use an <input type="hidden" /> directly.
type=submit will always load the form's action. Try to specify wich form to submit.
<form name="backForm" id="backForm" action="ramesh.php">
<input type="submit" value="Back" />
</form>
<form name="form2" id="form2" action="process.php" method="post">
<input name="rep_skyline" type="text" />
<input type="submit" />
</form>
Now you can access the form via document.backForm or document.getElementById("backForm") and than use submit(); like document.getElementById("backForm").submit();
I have a form within a SimpleModal modal, but when I try to use serialize with jQuery, the form data is always blank. The form serialize works outside of the modal, so theres something preventing the serialize from grabbing the form data. This is the code I am using:
<div id="address_form" style="display:none">
<div id="contact-area">
<form id="address_form" action="submit" method="POST">
<label for="Street">Street:</label>
<input type="text" name="Street" id="street" />
<input type="submit" name="submit" class="submit-button" />
</form>
</div>
</div>
$("#address_form").submit(function(){
var data = $(this).serialize();
alert(data)
return false;
});
You have two elements with the id of address_form. Change the id on the DIV with that id and it will work.