When I submit the form values to 2check out payment gateway I got PE101 error(i.e Require values not passed).
After debugged my code I come to know that PE101 error causing issue only in IE because of name attribute has empty value.
Same code working in Chrome but when I tried in IE, Edge it's causing the issue.
can anyone please tell me why 2check out payment gateway not taking the form values without name attribute that in from IE.
$("#idNavPremimum").click(function() {
alert("k");
$("input[name*='quantity']").val("88");
$("input[name*='li_0_price']").val("99");
$("input[name*='email']").val("uday.a#gmail.com");
$("#payment").submit();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form id="payment" action='https://sandbox.2checkout.com/checkout/purchase' method='post'>
<div class="form-group">
<label for="quantity" class="col-md-1 control-label">No. of users</label>
<div class="col-md-2">
<!----------------------This control causing the issue--------------------->
<input type="text" maxlength="3" class="form-control specialCharRestrict" id="quantity" name="">
<!----------------------This control causing the issue ends--------------------->
</div>
<label for="ddlPriceCalcMonths" class="col-md-1 control-label">No. of months</label>
<div class="col-md-2">
<select id="ddlPriceCalcMonths" class="form-control clsPriceValDetails" disabled>
<option value="1">1</option>
<option value="3">3</option>
<option value="6">6</option>
<option value="12">12</option>
</select>
</div>
<label for="txtTotalPrice" class="col-md-1 control-label">Total price</label>
<div class="col-md-2">
<input type="text" class="form-control clsPriceVal" id="txtTotalPrice" readonly/>
</div>
<!--<input type='hidden' name='sid' value='901286127' />-->
<input type='hidden' name='sid' value='901286127' />
<input type='hidden' name='mode' value='2CO' />
<input type="hidden" name="currency_code" value="USD" />
<input type='hidden' name='li_0_type' value='product'>
<input type='hidden' name='li_0_name' value='Webstation Premium'>
<input type='hidden' name='li_0_price' value='20'>
<input type='hidden' name='li_0_quantity' value='2'>
<input type='hidden' name='li_0_tangible' value='N'>
<input type='hidden' name='email' value='uday.a#gmail.com'>
<input type='hidden' name='fixed' value='Y' />
<input type='hidden' name='x_receipt_link_url' value='http://webstation.osmosystems.com/' />
</div>
</form>
<div class="form-group">
<button class="button-style btnPos" type='button' data-toggle="modal" data-target="#divwebstationForm" id="idNavPremimum"><i class="fa fa-android fa-fw"></i> BUY NOW <i class="fa fa-cloud-download fa-fw"></i></button>
</div>
This is due to IE implementation of forms behaviour.
As per MS specs name parameter is mandatory for inputs like text.
IE when form is submitted takes into consideration inputs without name property - meaning those are included in the Content-Length header of the Request as well as the FormData contains empty row.
On the other hand Chrome, FF if they encounter input without name they just ignore it.
To sum it up - to make it work on IE you will need to put name property.
Related
We are using a standard PayPal Form to collect payments online and have a field for customers to input a pickup date/time, for this we are using the passthrough variable "invoice" per instructions at PayPal Docs everything worked fine this way until we decided for clarification we would also like to pass along the text "PickUpDate" so its makes sense in the email notifications from PayPal. Instead of just Invoice ID 2021-08-30T12:30 We would like it to read Invoice ID PickUpDate:2021-08-30T12:30 We added some JavaScript to get this to work but no success - Any suggestions anyone, hoping for a simple solution somewhere? - Thanks in advance!
Here is an example of the form as we have it now:
<script type="text/javascript">
jQuery(document).ready(function($){
$('input[type="datetime-local"]').change( function() {
$val = 'PickUpDate:' + $(this).val();
$('#invoice').val($val);
});
});
</script>
<form action="https://www.paypal.com/cgi-bin/webscr" method="post" style="margin:0;padding:0;" target="PayPal">
<input type="hidden" name="business" value="paypal#toolcart.com">
<input type="hidden" name="cmd" value="_xclick">
<input type="hidden" name="notify_url" value="https://develop.toolcart.com/?notify=1" />
<input type="hidden" name="item_number" value="Toolcart Sale of: Grey Steel 48x72x24 Cabinet">
<input type="hidden" name="item_name" value="Purchase of a Grey Steel 48x72x24 Cabinet">
<div class="text-secondary px-3 form-group">
<label class="col-md-3 control-label" for="date">
<small>Pickup times 9:00a-6:00p (Mon-Sat)</small>
</label>
<div class="col-md-3">
<input id="date" type="datetime-local" name="invoice" min="2021-08-26T09:00" class="form-control-sm" id="invoice" required="">
</div>
</div>
<input type="hidden" name="custom" value="Websale|GrSteel48x72x24Cab|587688|1200.00|Tax|06|72|Total|1272.00">
<div class="text-secondary px-3 form-group">
<label class="col-md-3 control-label" for="selectbasic">
<small>Please select a payment option:</small>
</label>
<div class="col-md-3">
<select id="selectbasic" name="amount" class="form-control-sm">
<option selected="true" value="360">Reservation amount: $360.00</option>
<option value="1272">Full Price: $1,200.00 + 72.00 Tax</option>
</select>
</div>
</div>
<input type="hidden" name="currency_code" value="USD">
<input type="hidden" name="receiver_email" value="paypal#toolcart.com">
<input type="hidden" name="return" value="https://develop.toolcart.com/pickup">
<input type="hidden" name="no_note" value="1">
<input type="image" src="/wp-content/themes/develop-toolcart-theme/images/paypal.png" class="img-fluid" border="0" name="submit" alt="PayPal - The safer, easier way to pay online!">
<img border="0" src="https://www.paypalobjects.com/en_US/i/scr/pixel.gif" width="1" height="1">
</form>
I would just like to prepend the text of PickUpDate: before the type="datetime-local" values and submit it along with the form if at all possible?
I've never used jQuery, try using template literal like this:
I don't know if this will work, just try.
<script type="text/javascript">
jQuery(document).ready(function($){
$('input[type="datetime-local"]').change( function() {
$val = `PickUpDate: ${$(this).val()}`;
$('#invoice').val($val);
});
});
</script>
I am having difficulty getting this to work, everything works except the dependent dropdown, am I doing something wrong?
I am trying to add this to a google sheet script working with a sheet, it all seems to work except the dependent dropdown.
This is the error I'm getting:
Uncaught ReferenceError: nameCheck is not defined
if I test this code on an HTML tester it seems to work correctly, however, it does not seem to work in google sheets.
<html lang="en">
<body>
<h4>Add a Customer</h4>
Select a Date: <input type="date" id="date" name="start" class="mb-3">
<div>
Sales Rep:
<select id="rep">
<option>select option</option>
<option>Neil</option>
<option>Dave</option>
<option>Bob</option>
<option>Trick</option>
</select>
</div>
<div class="add-customer-form">
<div class="form-group">
<label for="first-name">Company name : </label>
<input type="text" class="form-control" id="first-name">
</div>
<div>
Product type:
<select id="input" onchange="nameCheck()">
<option>select option</option>
<option>CASH</option>
<option>Training</option>
<option>Optional Modules</option>
<option>Annual Additional Modules</option>
<option>Hosting Existing user moving Licence</option>
<option>Rentals</option>
<option>Existing Customer - Rentals</option>
<option>Existing Customer - CASH</option>
<option>other</option>
google.script.run.nameCheck();
console.log(input);
</select>
<div>
Product:
<select id="output" onchange="nameCheck()">
</select>
</div>
</div>
</div>
<div class="form-group">
<label for="first-name">Quantity : </label>
<input type="number" class="form-control" id="last-name">
</div>
<div class="form-group mt-3">
<label for="phone-number">Previous CAD : </label>
<input type="text" class="form-control" id="phone-number">
<div class="form-group">
<label for="sales-price">Sales Price : </label>
<input type="number" class="form-control" id="salesP">
</div>
<div class="form-group">
<label for="deposit">Deposit : </label>
<input type="number" class="form-control" id="deposit">
</div>
<div class="form-group">
<label for="install">No. Intallments : </label>
<input type="number" class="form-control" id="install">
</div>
<div class="form-group">
<label for="invoice">Invoice Nr : </label>
<input type="text" class="form-control" id="invoice">
</div>
<div class="form-group">
<label for="Notes">Notes : </label>
<input type="text" class="form-control" id="notes">
</div>
<button class="btn btn-primary" id="add-customer-button">Add Customer</button>
</div>
<div class="alert alert-success invisible mt-3" id="save-success-message" role="alert">
Successfully Added!!
</div>
<script>
function nameCheck(){
var a=document.getElementById("input").value;
console.log(a);
if(a==="CASH")
{
var arr=["Cash 1","cash2"];
}
else if(a==="Existing Customer - CASH")
{
var arr=["existing 1", "existing 2"];
}
else if(a==="Training")
{
var arr=["Level 1 Training (in-house)","Level 2 Training (in-house)","Level 3 Training (in-house)","Onsite Training (up to 4 people)","Training Online per hour","Principles of Design (Renee Mascari)","Graham Hayden Sales/Care","KBBConnect training (per hours)","Training Solus (in-house) - 8 people"];
}
var string="";
for(i=0;i<arr.length;i++)
{
string=string+"<option value="+arr[i]+">"+arr[i]+"</option>";
}
document.getElementById("output").innerHTML=string;
}
</script>
</body>
</html>
Screenshot off dialog:
The code in the question have several issues, i.e.:
Bad HTML
Remove google.script.run.nameCheck(); and console.log(input); from
<select id="input" onchange="nameCheck()">
<option>select option</option>
<option>CASH</option>
<option>Training</option>
<option>Optional Modules</option>
<option>Annual Additional Modules</option>
<option>Hosting Existing user moving Licence</option>
<option>Rentals</option>
<option>Existing Customer - Rentals</option>
<option>Existing Customer - CASH</option>
<option>other</option>
google.script.run.nameCheck();
console.log(input);
</select>
The above because JavaScript can't be included that way between HTML tags.
Use of HTML attributes for handling events.
Instead of
<select id="input" onchange="nameCheck()">
Use
<select id="input">
then between <script></script> use something like
document.getElementById('input').onchange = nameCheck;
or use addEventListener
Related
HTML form submits twice if the onsubmit function runs longer than 10 seconds
I am have three servers in three different domains. For example,
google.com
oracle.com
sap.com
I have a combo box with the same values as above. How can I change the form action to change to respective site once it is selected in the combo box?
Here is the code i have tried.
<script src="http://code.jquery.com/jquery-latest.min.js"
type="text/javascript"></script>
<script>
$(document).ready(function(){
$("#serverName").on("change",function(){
alert($(this).val());
if($(this).val().toString===("google"))
$("#dataform").attr('action',"http://google.com");
if($(this).val().toString===("oracle"))
$("#dataform").attr("action","http://oracle.com");
if($(this).val().toString===("sap"))
$("#dataform").attr("action","http://sap.com");
});
});
</script>
My form is like :
<form action="anyaction" name="dataform" method="post" >
<img src="logo.png"><br/>
<label for="email" class="boldtext">Triggered By</label><br>
<input type="text" id="email" name="email" placeholder="Enter your mail id"
required><br/>
<label for="serverName" class="`boldtext`">Server Name</label>
<select id="serverName" name="serverName" >
<option value="selectServer">Select the Server</option>
<option value="google">Google</option>
<option value="oracle" >Oracle</option>
<option value="sap">SAP</option>
</select><br/>
<label for="Clients" name= "Clients"
class="boldtext">Clients</label><br>
<input type="text" id="count" name="count"
placeholder="Enter No Of clients" required>
<br/>
<label for="items" name="items" id="items"
class="boldtext">Items</label>
<textarea id="items" name="items" required rows="3"> </textarea><br/>
<button type="submit">Submit</button>
</form>
Looks like there is some value represented by the name for the form i used "dataform".
Once i change it to dataform123 it worked. also the comparison i have changed from tostring.equals to == / === both of them worked.
Thanks for being there to keep me trying !!
I have the following HTML form code:
<div data-role="popup" id="-add" data-theme="c" class="ui-corner-all" data-dismissible="false" data-overlay-theme="a" style="min-width:550px;">
<div data-role="content"> Delete
<form id="item-form" action="#" formaction="process" data-ajax="false">
<input type="hidden" name="type" value="hidden1" />
<input type="hidden" name="how" value="hidden2" />
<input type="hidden" name="loc" value="hidden3" />
<input type="hidden" name="itemtype" value="hidden4" />
<div align="left">
<h3> Add</h3>
</div>
<div class="popup-hrule"></div>
<div class="ui-grid-a ui-responsive">
<div class="ui-block-a">
<label for="location_name">Name</label>
<input type="text" name="location_name" id="location_name" value="">
</div>
<div class="ui-block-b" data-schema="types">
<label for="type_name">Type</label>
<select name="type_name" id="type_name">
<option data-item=".textarea:name; .value:id; .repeat:true"></option>
</select>
</div>
<div class="ui-block-a">
<label for="address">Address</label>
<input type="text" name="address" id="address" value="">
</div>
<div class="ui-block-b">
<label for="city">City</label>
<input type="text" name="city" id="city" value="">
</div>
<div class="ui-block-a">
<label for="state">State</label>
<input type="text" name="state" id="state" value="">
</div>
<div class="ui-block-b">
<label for="zip">Postal</label>
<input type="number" name="zip" id="zip" value="">
</div>
<div class="ui-block-a">
<label for="_lat">Latitude</label>
<input type="number" name="_lat" id="_lat" value="">
</div>
<div class="ui-block-b">
<label for="_lon">Longitude</label>
<input type="number" name="_lon" id="_lon" value="">
</div>
</div> <a data-role="button" data-inline="true" onclick="$(this).closest('[data-role=popup]').popup('close');">Cancel</a>
<a data-role="button" data-inline="true" data-theme="a" onclick="$(this).closest('form').submit();$(this).closest('form').find('input').val('');$(this).closest('[data-role=popup]').popup('close')">Add</a>
</form>
</div>
</div>
Since this is an ADD form I would like to close the form and clear all the fields except for the hidden ones at the top which are flags that tell me what I have to do with the data. When I execute the code it clears all the data in the form including the hidden fields so the second time I can't add a new record.
A best approach for me would be to close the form completely so I don't have to erase the fields in the form which are going to get new data when I try to open it again.
You're clearing all input elements:
$(this).closest('form').find('input').val('');
If you want to clear only some of them, you need to target specifically the ones you want. For example, if you want to clear all non-hidden input elements:
$(this).closest('form').find('input[type!="hidden"]').val('');
Worst case would be that you have to turn this one line of code into a couple of lines of code to identify the elements you want. But as long as there's some jQuery-selectable pattern to identify the ones you want, that's what you need to do.
A best approach for me would be to close the form completely so I
don't have to erase the fields in the form which are going to get new
data when I try to open it again.
$("#item-form").remove();
If the hidden fields are populated from server, you can reset the form, so all form fields will be reset to value which were there during page reload.
$('#item-form')[0].reset();
The plain JS way of doing it
document.getElementById("item-form").reset();
Updated after discussion with OP
Cancel
function resetForm() {
$('#item-form')[0].reset();
$(this).closest('[data-role=popup]').popup('close');
}
Change this:
<a data-role="button" data-inline="true" data-theme="a" onclick="$(this).closest('form').submit();$(this).closest('form').find('input').val('');$(this).closest('[data-role=popup]').popup('close')">Add</a>
For this:
<a data-role="button" data-inline="true" data-theme="a" onclick="$(this).closest('form').submit();$(this).closest('form').find('input[type!=\'hidden\']').val('');$(this).closest('[data-role=popup]').popup('close')">Add</a>
So that you are selecting just those input elements with type not equal to hidden.
So I'm having some basic html, that contains of a modal box with a <form>, I take that html and append it to a div next to <body>, everything displays correctl only that the form submit doesn't work, it doesn't work via enter or submit button.
$(document).ready(function() {
var windowWidth = (parseInt(window.innerWidth) - 15) + 'px',
windowHeight = $('body').css('height');
$tk = $("#take-survey");
var $html = $tk.css({'width': windowWidth, 'height': windowHeight}).clone();
$tk.remove();
$($html).appendTo(".put-me");
$('body .put-me #take-survey').show();
});
<div id="take-survey" style="width: 1843px; height: 2120px; display: block;">
<div class="modal">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
Dear User,<br><br>
Our goal is to provide the best service possible. Please take a 1 minute to complete the following customer service questionnaire. Your comments will enable us to see how we're doing overall and find out how we can improve.<br> It only takes 1 minute!
</div>
<div class="modal-body">
<form name="newSurvey" action="index.php?id=25&L=1&tx_arxsurvey_fesurvey[action]=create&tx_arxsurvey_fesurvey[controller]=Survey" method="post">
<div style="display: none">
<input type="hidden" name="tx_arxsurvey_fesurvey[__referrer][extensionName]" value="ArxSurvey">
<input type="hidden" name="tx_arxsurvey_fesurvey[__referrer][controllerName]" value="Survey">
<input type="hidden" name="tx_arxsurvey_fesurvey[__referrer][actionName]" value="new">
<input type="hidden" name="tx_arxsurvey_fesurvey[__hmac]" value="a:3:{s:9:"newSurvey";a:4:{s:6:"whyUse";i:1;s:13:"otherServices";i:1;s:11:"suggestions";i:1;s:8:"tellMore";i:1;}s:6:"action";i:1;s:10:"controller";i:1;}77fcb50f86112b3acd1aa7f6eff2b4adeac7a664">
</div>
<label for="userProfile">
What is your user profile? <span class="required">(required)</span>
</label>
<select name="tx_arxsurvey_fesurvey[newSurvey][userProfile]">
<option value="Real Estate Agency">Real Estate Agency</option>
<option value="Real Estate Marketing">Real Estate Marketing</option>
<option value="Floor Drawing Services">Floor Drawing Services</option>
<option value="Project Developers">Project Developers</option>
<option value="Property Management">Property Management</option>
<option value="Interior Design">Interior Design</option>
<option value="Architect">Architect</option>
<option value="Private User">Private User</option>
<option value="Furniture Retailer">Furniture Retailer</option>
</select>
<label>If other please specify:</label>
<input type="text" name="tx_arxsurvey_fesurvey[newSurvey][userProfileOther]">
<label for="useStatus">
How often you use PlanningWiz? <span class="required">(required)</span>
</label>
<div class="hold-radios">
<input type="radio" id="dailyUse" name="tx_arxsurvey_fesurvey[newSurvey][useStatus]" value="Daily">
<label for="dailyUse">Daily</label>
<input type="radio" id="weeklyUse" name="tx_arxsurvey_fesurvey[newSurvey][useStatus]" value="Weekly">
<label for="weeklyUse">Weekly</label>
<input type="radio" id="monthlyUse" name="tx_arxsurvey_fesurvey[newSurvey][useStatus]" value="Monthly">
<label for="monthlyUse">Monthly</label>
<input type="radio" id="rarelyUse" name="tx_arxsurvey_fesurvey[newSurvey][useStatus]" value="Rarely">
<label for="rarelyUse">Rarely</label>
</div>
<label for="whyUse">
Why are you using a room planner? <span class="required">(required)</span>
</label>
<textarea rows="15" cols="40" name="tx_arxsurvey_fesurvey[newSurvey][whyUse]"></textarea>
<label for="otherServices">
Are you using other room planning services as well? If so, why? <span class="required">(required)</span>
</label>
<textarea rows="15" cols="40" name="tx_arxsurvey_fesurvey[newSurvey][otherServices]"></textarea>
<label for="suggestions">
What suggestions for improvement would you have? <span class="required">(required)</span>
</label>
<textarea rows="15" cols="40" name="tx_arxsurvey_fesurvey[newSurvey][suggestions]"></textarea>
<label for="tellMore">
I'd also like to tell you that: <span class="required">(required)</span>
</label>
<textarea rows="15" cols="40" name="tx_arxsurvey_fesurvey[newSurvey][tellMore]"></textarea>
</form></div>
<div class="modal-footer">
<input class="save" type="submit" name="" value="Create new">
<input type="button" value="Skip for now!" class="skip">
</div>
</div><!-- /.modal-content -->
</div><!-- /.modal-dialog -->
</div><!-- /.modal -->
</div>
Submit button not inside the form so close the </form> tag after the submit button
<div class="modal-footer">
<input class="save" type="submit" name="" value="Create new">
<input type="button" value="Skip for now!" class="skip">
</div>
</form> // add form close here
You need to reinitialize the form. Just like this:
$(document).find("form").trigger("create")
"In JQM 1.4 you can simply call $(your_form).enhanceWithin() to have JQM render all elements inside your cloned form. In JQM 1.3.2 this is not available, so I guess you would have to initialize things using trigger("create") for example."
There are a same issue here