Run PHP script and also submit form to URL - php

Question

I have a HTML registration form, that adds users to the content management system using PHP. I need to integrate this into my a Customer Relationship Management tool (AgileCRM).
This code here will allow a user to register, which will submit the form and create the user using PHP.
<?php
if ($input->post->submit) {
//create user
}
?>
<form action='./' accept-charset='UTF-8' autocomplete='off' method='post'>
<input type='text' name='username' placeholder='Username'>
<input type='text' name='email' placeholder='Email'>
<input type='password' name='password' placeholder='Password'>
<button type='submit' name='submit' value='register'>Register</button>
</form>
Then this code will do what I want in the CRM
<link href="https://s3.amazonaws.com/agilecrm/forms/v1/agile-form-min.css" rel="stylesheet">
<form class="form-view " id="agile-form" action="https://agiledomain.agilecrm.com/formsubmit" style="max-width:450px;" method="post">
<fieldset>
<!-- Form Name -->
<legend class="agile-hide-formname">Registration Form</legend>
<p class="agile-form-description"></p>
<div style="display: none; height: 0px; width: 0px;">
<input type="hidden" id="_agile_form_name" name="_agile_form_name" value="Registration Form">
<input type="hidden" id="_agile_domain" name="_agile_domain" value="AGILECRMDOMAIN">
<input type="hidden" id="_agile_api" name="_agile_api" value="AGILECRMAPIKEY">
<input type="hidden" id="_agile_redirect_url" name="_agile_redirect_url" value="#">
<input type="hidden" id="_agile_document_url" name="_agile_document_url" value="">
<input type="hidden" id="_agile_confirmation_msg" name="_agile_confirmation_msg" value="Thank you for signing up!">
<input type="hidden" id="_agile_form_id_tags" name="tags" value="">
<input type="hidden" id="_agile_form_id" name="_agile_form_id" value="AGILECRMID">
</div>
<!-- Text input-->
<div class="agile-group required-control">
<label class="agile-label" for="username">Username<span class="agile-span-asterisk"> *</span></label>
<div class="agile-field-xlarge agile-field">
<input maxlength="250" id="username" name="Username" type="text" placeholder="" class="agile-height-default" required="">
</div>
<div class="agile-custom-clear"></div>
</div>
<!-- Text input-->
<div class="agile-group required-control">
<label class="agile-label" for="email">Email<span class="agile-span-asterisk"> *</span></label>
<div class="agile-field-xlarge agile-field">
<input maxlength="250" id="email" name="email" type="email" placeholder="" class="agile-height-default" required="">
</div>
<div class="agile-custom-clear"></div>
</div>
<!-- Password input-->
<div class="agile-group required-control">
<label class="agile-label" for="password">Password Input<span class="agile-span-asterisk"> *</span></label>
<div class="agile-field-xlarge agile-field">
<input maxlength="250" id="password" name="password" type="password" placeholder="" class="agile-height-default" required="">
</div>
<div class="agile-custom-clear"></div>
</div>
<!--recaptcha aglignment-->
<!-- Button -->
<div class="agile-group">
<label class="agile-label"> </label>
<div class="agile-field agile-button-field">
<button type="submit" class="agile-button">Submit</button>
<br><span id="agile-error-msg"></span>
</div>
</div>
</fieldset>
</form>
<script type="text/javascript">
(function(a){var b=a.onload,p=true;isCaptcha=false;if(p){a.onload="function"!=typeof b?function(){try{_agile_load_form_fields()}catch(a){}}:function(){b();try{_agile_load_form_fields()}catch(a){}}};var formLen=document.forms.length;for(i=0;i<formLen;i++){if(document.forms.item(i).getAttribute("id")== "agile-form"){a.document.forms.item(i).onsubmit=function(a){a.preventDefault();try{_agile_synch_form_v5(this)}catch(b){this.submit()}}}}})(window);
</script>
So basically I'd like to join the functionality of these two forms together, so submit the form to AgileCRM and also run the PHP code.

Answer 1

You can do this with jQuery ajax
and give your first form an id then it will be submitted after agile form.
$('#agile-form').submit(function(){
// show that something is loading
$('#response').html("<b>Loading response...</b>");
/*
* 'post_receiver.php' - where you will pass the form data
* $(this).serialize() - to easily read form data
* function(data){... - data contains the response from post_receiver.php
*/
$.ajax({
type :'POST',
url : "https://agiledomain.agilecrm.com/formsubmit",
async: false,
data: $(this).serialize()
})
.done(function(data){
//give your first form an id and submit it for eg:firsForm
$('#firstForm').submit();
})
.fail(function() {
// just in case posting your form failed
alert( "Posting failed." );
});
// to prevent refreshing the whole page page
return false;
});