Submit two forms sequentially with AJAX - ajax

I'm trying to implement the answer from this thread, however I've never used AJAX.
The first form sets a variable required in the second form, once this has been set I'd like it to then redirect as per the second form (so I'm guessing the alert wants to come out of the AJAX?)
After updating with charles babbage's answer the first form Submits.
Thanks for any help, it's greatly appreciated!
<script>
$(document).ready(function() {
$("#subbut").click(function() {
$.post($("#priceselect").attr("action"), $("#priceselect").serialize(),
function() {
$.post($("#globaliris").attr("action"), $("#globaliris").serialize(),
function() {
alert('Both forms submitted');
});
});
});
});
</script>
I've put this in the head with the aim of first submitting
<form name="priceselect" id="priceselect" method="post">
<select name="price" id="mySelect" onchange="document.getElementById('selectedValue').innerHTML = this.value;">
<option value="100">Option 1</option>
<option value="120">Option 2</option>
<option value="115">Option 3</option>
<option value="135">Option 4</option>
<option value="80" >Option 5</option>
</select>
<input value="Continue" id="subbut" type="Submit" />
</form>
which should then
(isset($_POST['price']));
$price = $_POST['price'];
in the same page before redirecting to a 3rd party with the submission of
<form id="globaliris" action="https://redirect.globaliris.com/epage.cgi" method="post" class="select">
<input type=hidden name="MERCHANT_ID" value="<?=$merchantid?>">
<input type=hidden name="ORDER_ID" value="<?=$orderid?>">
<input type=hidden name="CURRENCY" value="<?=$curr?>">
<input type=hidden name="AMOUNT" value="<?=$amount?>">
<input type=hidden name="TIMESTAMP" value="<?=$timestamp?>">
<input type=hidden name="MD5HASH" value="<?=$md5hash?>">
<input type=hidden name="AUTO_SETTLE_FLAG" value="1">
<br />
<br />
</form>

In order to trigger the action that you have specified in the Form tag on click of a button, the button should be of type Submit and also it should be inside your form. The position of Submit button is important.
<input type="submit" value="something" id="something">
Edit(as per your new question)
If you want two form's content to be submitted to one action, just add the serialises as below:
$.post($("#priceselect").attr("action"),$("#priceselect").serialize()+$("#globaliris").serialize() ,
function() {
alert('Both forms submitted');
});
});

Related

Handling multiple forms on a single page

I have a page with a select option
<div class="col-md-7">
<select class="selection" name="selection">
<option value="ab">Form One</option>
<option value="ad">Form Two</option>
<option value="nq">Form Three</option>
</select>
</div>
<div id="content"></div>
For my JQuery, I just listen for the change
$(".selection").on("change", function(e){
if($(this).val() == "ad"){
$("#content").append(data);
}
});
Now where this blade template lives (resources/views/customer), I have created a forms folder. In this folder are form1.blade.php and two more templates for the other forms.
How would I go about added the form template into the div with the id content?
Or is there a better way of handling multiple forms for a single page?
Suppose, you have two forms like this:
View :
<form action="/url" method="post">
<input name="some_field" value="1">
<button type="submit" name="form1">Submit 1</button>
</form>
<form action="/url" method="post">
<input name="some_field" value="1">
<button type="submit" name="form2">Submit 2</button>
</form>
Now in Controller :
if ($request->has('form1')) {
//handle form1
}
if ($request->has('form2')) {
//handle form2
}
Source: https://laracasts.com/discuss/channels/laravel/two-form-on-one-page-both-submit
Assign values to submit and check to see if $request->has() the value. Then use logic inside the controller.
Just add an id to the form you wanna submit.
<script>
$(document).on("click","#formPass",function() {
$(this).parents("form").submit();
});
</script>

Assign Values to Drop-Down Menus in PayPal Third-Party Carts

I am trying to implement a PayPal cart on a third-party site. Customers are first asked to select a product ("Product") from a drop-down menu and then, optionally, to enter a specific amount ("Additional Costs") into a text field. Both values should finally be sent to PayPal upon submitting.
While everything works fine with two text fields, where amount_1 and amount_2 are clearly defined, I struggle with assigning different values (/amounts, say 10.00 and 5.00) to the options of the drop down and to make the value of the selected option my value amount_1. Here is the code I figured out so far:
<form action="https://www.paypal.com/cgi-bin/webscr" method="post">
<input type="hidden" name="cmd" value="_cart">
<input type="hidden" name="business" value="whatever#gmail.com">
<input type="hidden" name="upload" value="1">
<input type="hidden" name="item_name_1" value="Product">
<input type="hidden" name="on0_1" value="Product">
<select name="os0_1">
<option value="product1">Product 1</option>
<option value="product2">Product 2</option>
</select>
<input type="hidden" name="item_name_2" value="Additional Costs">
<input type="text" name="amount_2" value="0.00">GBP
<br>
<br>
<input type="hidden" name="currency_code" value="GBP">
<input type="image" src="http://www.paypal.com/en_US/i/btn/x-click-but01.gif" name="submit" alt="Make payments with PayPal - it's fast, free and secure!">
</form>
option_select and option_amount do not seem to work with this kind of form. Any help would be greatly appreciated!
I'm assuming this is the select box that is used to select the product amount_1:
<select name="os0_1">
<option value="product1">Product 1</option>
<option value="product2">Product 2</option>
</select>
What you need to do is this:
<input type="hidden" name="item_name_1" value="Product" id="item_name_1">
<select name="amount_1" onchange="changeProductName()" id="amount_1">
<option value="5.00">Product that is a fiver</option>
<option value="10.00">Product that is a tenner</option>
</select>
<script>
function changeProductName() {
var e = document.getElementById('amount_1');
var h = document.getElementById('item_name_1');
h.value = e.options[e.selectedIndex].text;
}
</script>
That will change the item_name_1 to the friendly value of the price option.

Chrome removes form tag in .innerHTML insert

I have some mvc frameworks that extend my .net application. Their task is mainly to deliver partials to the .net applications interface.
The funny thing is that chrome strips the very necessary
Here is how I fetch and render the data from the framework
$.ajax({
url: "/mvc/UserProfile/AddressForm?datatype=shipping",
dataType: "text", // text html script
method: "get",
cache: false,
success: function (data) {
console.log(data);
//var userProfileAdd = document.getElementById("userProfileAdd");
var userProfileAdd = $("#userProfileAdd")[0];
userProfileAdd.innerHTML = "<div>" + data + "</div>";
}
});
Firefox, IE and so on does retrieve all data. Does anyone know why chrome behaves like this?
Thanks
EDIT
This is the code sent to the data variable printed by console.log
<script src="/scripts/MicrosoftAjax.js" type="text/javascript"></script>
<script src="/scripts/MicrosoftMvcValidation.js" type="text/javascript"></script>
<form OnSubmit="return false;" action="/mvc/UserProfile/AddressFormPost" id="frmUserAddress" method="post"><div class="validation-summary-valid" id="validationSummary"><ul><li style="display:none"></li>
</ul></div>
<input name="__RequestVerificationToken" type="hidden" value="8Vkd039Wc3825G6CTEomJ/aXfrCyjuEY3sV/ty4znHi9yO0Th535p8VNxqvBwhJ12AREQhvTMhRVNEO6Ke3O87jDAjREg3I3dFYp2Y5geutbEOLk6KHmn6hLb4a5CFaZ3uCOm8uYgr/U4au33yaUFw==" />
<div>
Select country:
<select id="Countries" name="Countries"><option value="029">Caribbean</option>
<option value="AE">U.A.E.</option>
<option value="AF">Afghanistan</option>
<option value="AL">Albania</option>
<option value="AM">Armenia</option>
<option value="AR">Argentina</option>
</select>
</div>
<div>
Postal Code
<input class="formField textBox" id="PostalCode" name="PostalCode" type="text" value="" />
<span class="field-validation-valid" id="PostalCode_validationMessage"></span>
</div>
<div>
City
<input class="formField textBox" id="City" name="City" type="text" value="" />
<span class="field-validation-valid" id="City_validationMessage"></span>
</div>
<div>
State
<input class="formField textBox" id="State" name="State" type="text" value="" />
<span class="field-validation-valid" id="State_validationMessage"></span>
</div>
<div>
First name
<input class="formField textBox" id="FirstName" name="FirstName" type="text" value="" />
<span class="field-validation-valid" id="FirstName_validationMessage"></span>
</div>
<div>
Email
<input class="formField textBox" id="Email" name="Email" type="text" value="" />
<span class="field-validation-valid" id="Email_validationMessage"></span>
</div>
<div>
<input type="submit" value="Send!" id="btnAddressForm" class="button" />
</div>
</form><script type="text/javascript">
//<![CDATA[
if (!window.mvcClientValidationMetadata) { window.mvcClientValidationMetadata = []; }
window.mvcClientValidationMetadata.push({"Fields":[{"FieldName":"PostalCode","ReplaceValidationMessageContents":true,"ValidationMessageId":"PostalCode_validationMessage","ValidationRules":[{"ErrorMessage":"Please enter your postal code","ValidationParameters":{},"ValidationType":"required"}]},{"FieldName":"City","ReplaceValidationMessageContents":true,"ValidationMessageId":"City_validationMessage","ValidationRules":[{"ErrorMessage":"Please enter your city","ValidationParameters":{},"ValidationType":"required"}]},{"FieldName":"State","ReplaceValidationMessageContents":true,"ValidationMessageId":"State_validationMessage","ValidationRules":[{"ErrorMessage":"Please enter your state","ValidationParameters":{},"ValidationType":"required"}]},{"FieldName":"FirstName","ReplaceValidationMessageContents":true,"ValidationMessageId":"FirstName_validationMessage","ValidationRules":[{"ErrorMessage":"Please enter your first name","ValidationParameters":{},"ValidationType":"required"}]},{"FieldName":"Email","ReplaceValidationMessageContents":true,"ValidationMessageId":"Email_validationMessage","ValidationRules":[{"ErrorMessage":"Please enter your first name","ValidationParameters":{},"ValidationType":"required"}]}],"FormId":"frmUserAddress","ReplaceValidationSummary":false,"ValidationSummaryId":"validationSummary"});
//]]>
</script>
Chrome will strip out the form element if there is a surrounding form element. JUST the form tag disappears, all of its contents remain.
Check to make sure that there isn't a parentNode for "userProfileAdd" that is a form.

Paypal form submission - mobile

Im using below code to submit values in to Paypal and its working.
<form action="https://www.paypal.com/cgi-bin/webscr" method="post">
<input type="hidden" name="cmd" value="_xclick" />
<h2 style="font-family:Segoe UI;">Your Email :</h2>
<input type="text" name="business" value="youremailaddress#yourdomain.com" style="width:1000px; height:50px; margin-left:30px;"/>
<br />
<h2 style="font-family:Segoe UI;">Driveway Size :</h2>
<input type="hidden" name="item_name" value="" />
<select id="item_price" name="amount" style="width:1000px; height:50px; margin-left:30px;">
<option value="325">Single $325.00</option>
<option value="375">Double $375.00</option>
<option value="400">2.5 $400.00</option>
<option value="425">Triple $425.00</option>
<option value="450">3.5 $450.00</option>
<option value="475">Quad $475.00</option>
</select>
<br />
<input type="submit" value="Buy!" style="margin-top:30px"/>
</form>
But this is desktop version. is there anyway that I can do same thing for mobiles?
Yes you can. You could for example use System.Net.WebClient to make the post towards the URL you have in the action field of the form.
Or, you can have the above HTML code embedded inside a web-browser control in your application.

Jquery Validation for Driver Registration HTML Form

Hi make one html from which submitting without refresh by jquery. Problem is that I am beginner and I dont know how to add validation for html form. I need changes in script so first form will validate by jquery or ajax then it will submit by jquery witout page refresh.. have look in my code. Please provide me working solution in that first form validate by ajax jquery then submit by jquery without refresh.. Thanks in advance
JQUERY:
<script type="text/javascript">
$(document).ready(function(){
$("form#form").submit(function() {
// we want to store the values from the form input box, then send via ajax below
var uno = $("#uno").val();
var name = $("#name").val();
var licence = $("#licence").val();
var email = $("#email").val();
var phone = $("#phone").val();
var dataString = 'uno=' + uno + '&name=' + name + '&licence=' + licence + '&email=' + email + '&phone=' + phone;
$.ajax({
type: "POST",
url: "addd.php",
data: dataString,
success: function(){
$('form#form').hide(function(){$('div.success').fadeIn();});
}
});
return false;
});
});
</script>
HTML FORM:
<form id="form" method="post" name="form" action="">
<fieldset id="opt">
<legend>Driver Information</legend>
<label for="choice">Name : </label>
<input type="text" id="name" name="name" value=""> <br />
<label for="choice">Licence No : </label>
<input type="text" id="licence" name="licence" value=""> <br />
<label for="choice">Email : </label>
<input type="text" id="email" name="email" value=""> <br />
<label for="choice">Phone : </label>
<input type="text" id="phone" name="phone" value=""> <br />
<input type="hidden" name="uno" id="uno" value="" />
<br />
</fieldset>
<div align="center">
<input id="button2" type="submit" value="Add Driver" />
<input id="button2" type="reset" />
</div>
</form>
I found multiple errors/mistakes on your HTML form too. some of them I want to mention..
for attribute of label have same value of the next input/select id, read:
http://www.w3schools.com/tags/att_label_for.asp
Dont assign name for name and id attribute, it's misleading.( good practice)
Don't write value ="", if you there is no initial value of any input box.
If u want to validate a hidden field then write some value for that on form intialization, otherwise it wud be always empty and your validation never works.
If u want to validate all input field together for emptyness then use :input selector ,read :
http://api.jquery.com/input-selector/
Don't forget to validate email address
If you want to post a form via ajax then there is no need to write method and action attribute in your form
Your reset button shoud have some value, otherwise its takes default value.
A very useful and handy article for newbie for jquery ajax validation
http://jorenrapini.com/blog/css/jquery-validation-contact-form-with-modal-slide-in-transition
OR you can use jquery validator plugin :
http://bassistance.de/jquery-plugins/jquery-plugin-validation/
here is your neat and clean form
<form id="driverForm" name="driverForm">
<fieldset id="opt">
<legend>Driver Information</legend>
<label for="lname">Name : </label>
<input type="text" id="lname" name="lname" > <br />
<label for="licence">Licence No : </label>
<input type="text" id="licence" name="licence" ><br />
<label for="email">Email : </label>
<input type="text" id="email" name="email" ><br />
<label for="phone">Phone : </label>
<input type="text" id="phone" name="phone" > <br />
<input type="hidden" name="uno" id="uno" /><br />
</fieldset>
<div align="center">
<input type="submit" id="submitForm" name="submitForm" value="Add Driver" />
<input type="reset" value="clear" />
</div>
</form>
Hope this will be useful for you.
UPDATE
put it insdie submit() and before ajax like this
$("form").submit(function() {
if($('#lname').val() == '')
return false;
});
$.ajax({
NOTE: dont create dataString Manually there is inbuilt function in jQuery.
serialize
Please note that ,this is not matter that your form is submitting or not. most thing is it a valid form or not.
Happy to help :)

Resources