I am having this problem where we have a payment page that we only allow you to submit once.
And on iOS if you enter a credit card it will ask you if you would like to save it (Safari feature not ours). However this is called after our javascript validation assigns the boolean to disallow resubmition.
The Safari popup stops page propagation and nothing happens.
I was wondering if there was a way to use a callback or hook into when the user submits this value and continue with form submission.
Note: I have already tried autocomplete="off" on the form and the input to have this popup not appear. Which does not work.
Edit: I discovered that the reason the form does not submit after clicking not now is because we make use of Recaptcha (which is hidden behind the popup in the picture).
Surprisingly I had a difficult time getting the AutoFill dialog to pop up. It seems that Safari needs some type of clue that you're submitting credit card info. If you want the dialog to just go away and you control the name of the form elements, then name the elements to something unrelated to a credit card:
This prompts autofill:
<form action="test" method="post" id="credit">
Name:<input type="text" name="cardholder" />
<br/>
Credit Card Type:
<select name="cardtype" >
<option></option>
<option value="amex">amex</option>
<option value="visa">visa</option>
<option value="mastercard">mastercard</option>
</select>
<br/>
Credit Card:<input type="text" name="cardnumber" />
<br/>
Expiration:<input type="text" name="expirationdate" />
<br/>
<input type="submit">
</form>
This does not prompt:
<form action="test" method="post" id="credit" autocomplete="off" >
Name:<input type="text" name="h" autocomplete="off" />
<br/>
Credit Card Type:
<select name="t" autocomplete="off" >
<option></option>
<option value="amex">amex</option>
<option value="visa">visa</option>
<option value="mastercard">mastercard</option>
</select>
<br/>
Credit Card:<input type="text" name="n" autocomplete="off" />
<br/>
Expiration:<input type="text" name="d" autocomplete="off" />
<br/>
<input type="submit">
</form>
This is a variant on Sam Nunnally's answer.
I was in a situation where I was working with a Python package and couldn't edit the name of the credit card, so I had to rename fields on the fly with jQuery. This may or may not work for others depending on how they need to use the submitted form data.
Here's most of the relevant code that worked for me with some comments. I needed to rename the field and detach the label from the input (when there was a label for the input that said "Credit Card", iOS sniffed it out), and I threw in autocomplete="off" for good measure.
var iOSCheck = false;
var cardField = $("#id_card_number");
if (navigator.userAgent.match(/(iPod|iPhone|iPad)/)) { // This could be more elegant; should sniff iOS 7.x specifically
iOSCheck = true;
}
if (iOSCheck == true) {
$("#id_card_number").attr('id','workaround-one'); // Rename ID. Nondescript name.
$('#workaround-one').attr('autocomplete','off'); // Turn off autocomplete (not sure if necessary)
$("#w1-label").after('<div class="simulate-label">Credit Card</div>'); // Kill the label. Append the text,
$("#w1-label").remove(); // Then remove the label. That way the text in the label doesn't link to the CC field.
cardField = $('#workaround-one'); // Redefine our credit card field so we can reference it later in the script.
}
Related
I have a specific situation and I'll give my best to explain it.
On page I have a select field, inside it I have two choice for user, that looks like this:
<select id="payment_type" name="payment_type">
<option>Select a payment type...</option>
<option value="Income">Income</option>
<option value="Expense">Expense</option>
</select>
Now I have a JS code that show form for income or expense, depends which one user has selected:
$('#payment_type').on('change', function() {
var val = $(this).val();
$('#Income').hide();
$('#Expense').hide();
$('#' + val).show();
});
So if user has selected Income from dropdown list I will show him this form:
<form action="#" id="Income" class="hidden" th:action="#{/api/transaction/saveIncome/{walletId} (walletId=${id})}"
th:object="${transaction}" method="POST">
<label for="amountIncome" class="col-form-label">Amount</label> <input
type="text" th:field="*{amount}" class="form-control"
id="amountIncome" placeholder="amount"> <span
th:if="${#fields.hasErrors('amount')}" th:errors="*{amount}"
class="text-danger"></span>
<input type="text" th:field="*{note}" placeholder="Enter note" class="form-control mb-4 col-4">
<input type="date" th:field="*{date}" class="form-control mb-4 col-4">
<select th:field="${transaction.incomeCategories}">
<option value="0">Select income category</option>
<option
th:each="incomeCategories : ${incomeCategories}"
th:value="${incomeCategories}"
th:text="${incomeCategories.displayName}"
></option>
</select>
<button type="submit" class="btn btn-info col-2"> Save Wallet</button>
</form>
Now, If the user entered wrong value for amount I will provide him error, and that works fine. But what is the problem, I will provide you a use case:
Here user pick the transaction type:
Now, user has selected Income for example, and I provide him form for Income:
Now, If user for field amount insert -1 I will provide him an error, but I'm redirected to this page again:
And when I select again Income only then I can see the error:
While I want to display him immediately form that he picked from list. So if he choose Income but made error on form, display him again Income form without having to choose again from dropdown menu.
The only solution so far that I have on my mind is to create a totally separated HTML pages with form, but I think that there is for sure a way to solve this on another way without that.
I give my best to explain problem and added picture for better understanding, for anything else I'm here to explain or to provide more information. Thank you and also sorry for my bad English.
I'm creating a google add on for sheets. The sidebar I'm working on is intended to be sort of help ticket submission, but way before I can develop that part of things, I'm not getting the submit button in the form to call the javascript function I want to build.
I've removed all of the form data from the html button call to activate a Logger.log. No dice.
I created a completely separate (and very simple) button to call a different function to call Logger.log. This also did not work.
I've double checked the form data, the send call, and the function.
I made sure the name of the function (sendMsg) is unique.
I think that the issue may not be in my code but in some other way the html and javascript (.gs) are connected.
here is the html form:
<div class="block form-group">
<form>
<label for="reason">Purpose of Contact</label>
<select id="reason">
<option selected>Help Request</option>
<option>Feature Request</option>
<option>Error Report</option>
<option>Other</option>
</select>
<label for="email">Email</label>
<input type="text" id="email" style="width: 200px;">
<label for="phone">Phone</label>
<input type="text" id="phone" style="width: 120px;" value = "optional">
<br>
<label for="translated-text">
<b>Message</b></label>
<textarea id="userMsg" rows="15" cols="35">
</textarea>
<br>
<input id="app" name="appSrc" type="hidden" value="COE">
<input type="button" class="action" name="helpRequest" value="SEND" onClick="google.script.run.sendMsg(
document.getElementById('reason').value,
document.getElementById('email').value,
document.getElementById('phone').value,
document.getElementById('userMsg').value,
document.getElementById('appSrc').value
)" />
</form>
</div>
and here is the function called:
function sendMsg(appSrc,reason,email,phone,userMsg) {
appV = appSrc;
reasonV = reason;
emailV = email;
phoneV = phone;
userMsgV = userMsg;
Logger.log('cheese');
}
Right now the form should simply result in a Logger.log message. At this point nothing happens.
In your situation, when "SEND" button is clicked, the script of sendMsg() at Google Apps Script side doesn't work.
You want to run sendMsg().
If my understanding is correct, how about this modification?
Modification point:
When I saw <input id="app" name="appSrc" type="hidden" value="COE">, appSrc is not id. By this, an error occurs at document.getElementById('appSrc').value, and sendMsg() didn't work. So if your script is modified, for example, please use app.
From:
document.getElementById('appSrc').value
To:
document.getElementById('app').value
Or
From:
<input id="app" name="appSrc" type="hidden" value="COE">
To:
<input id="appSrc" name="appSrc" type="hidden" value="COE">
If I misunderstood your question and this was not the result you want, I apologize.
In case anyone has the same issue as I had... onpress doesn't seem to work here. I had to change it to onclick.
Good Evening Everyone. I need some help with an auto login procedure.
Specific Question = How can I get initiate a 2nd form action within the same html page? I also need to create a 5 second delay so the 1st action can complete
The Result I'm looking for = I want to double click on saved .html file and then get automatically logged into my email
The Website =
HTML Code:
https://login.live.com/login.srf?wa=wsignin1.0&rpsnv=13&ct=1489346474&rver=6.7.6640.0&wp=MBI_SSL&wreply=https%3a%2f%2foutlook.live.com%2fowa%2f%3fauthRedirect%3dtrue%26nlp%3d1&id=292841&CBCXT=out&fl=wld&cobrandid=90015
How did I get this URL? = msn.com>clicked on outlook>clicked on sign in
The problem =
I have created a javascript function within a saved html page and I can get past the login in page. The issue is that I cannot get my password to be correctly placed in the password field and the submit button to work. For my live.com account it is a 2 page authentication. The first page is where you place your username and click next and then the 2 page is where you enter your password and click sign in.
What I have tried =
(1)Because there is a placeholder text, I've tried a POST method, but
I can't get it to work. POST would be best, but I can't figure it
out.
(2) I've tried get element by id and that does not work because
my password is just written on top of the placeholder text and does
not get replaced
(3) CURRENT STATE. What I have written now is 2 form
actions. The 1st form action (logonForm) enters my username and the
2nd form action (passForm) is supposed to enter my password and then
log me in. Is 2 form actions the best way to accomplish this?
WHAT I HAVE SO FAR =
<html>
<body style="display: none">
<form action="https://login.live.com/login.srf?wa=wsignin1.0&rpsnv=13&ct=1485483982&rver=6.7.6640.0&wp=MBI_SSL&wreply=https%3a%2f%2foutlook.live.com%2fowa%2f%3fnlp%3d1&id=292841&CBCXT=out&fl=wld&cobrandid=90015" method="POST" name="logonForm" ENCTYPE="application/x-www-form-urlencoded"
id="loginForm">
<input type="hidden" name="destination" value="https://login.live.com/login.srf?wa=wsignin1.0&rpsnv=13&ct=1485483982&rver=6.7.6640.0&wp=MBI_SSL&wreply=https%3a%2f%2foutlook.live.com%2fowa%2f%3fnlp%3d1&id=292841&CBCXT=out&fl=wld&cobrandid=90015">
<input type="hidden" name="username" value="this is my username#live.com" >
<input type="hidden" name="passwd" value="this is my password">
<input type="hidden" name="flags" value="4">
<input type="hidden" name="forcedownlevel" value="0">
<input type="radio" name="trusted" value="4" class="rdo" checked>
<input type="hidden" name="isUtf8" value="1">
</form>
<form action="https://login.live.com/login.srf?wa=wsignin1.0&rpsnv=13&ct=1485483982&rver=6.7.6640.0&wp=MBI_SSL&wreply=https%3a%2f%2foutlook.live.com%2fowa%2f%3fnlp%3d1&id=292841&CBCXT=out&fl=wld&cobrandid=90015" method="POST" name="passForm" ENCTYPE="application/x-www-form-urlencoded"
id="passwordForm">
<input type="hidden" name="destination" value="https://login.live.com/login.srf?wa=wsignin1.0&rpsnv=13&ct=1485483982&rver=6.7.6640.0&wp=MBI_SSL&wreply=https%3a%2f%2foutlook.live.com%2fowa%2f%3fnlp%3d1&id=292841&CBCXT=out&fl=wld&cobrandid=90015">
<input type="hidden" name="username" value="This is my username#live.com" >
<input type="hidden" name="passwd" value="this is my password">
<input type="hidden" name="flags" value="4">
<input type="hidden" name="forcedownlevel" value="0">
<input type="radio" name="trusted" value="4" class="rdo" checked>
<input type="hidden" name="isUtf8" value="1">
<input type="hidden" name="data-bind" value="this is my password">
</form>
<script type="text/javascript">
document.forms["logonForm"].submit();
document.forms["passForm"].submit();
</script>
</body>
</html>
I am a new student to java and I'm ambitious about coding, developing, and learning. I just can't seem to get this figured out. I'm sure my html/java looks like a jumbled mess but that's because I've been trying all types of things to see if anything would work and I got excited when i was able to get past the login page.
I do apologize for the long post, I just wanted to get as much info as I have out. I'm trying to be as specific as I can be. This is my first post in stack overflow and I couldn't be more excited to be part of this community.
Thanks in advance for your help!
TechStudent01
You cannot do this.
Once a <form> is sent (either as GET or POST), which is a synchronous action, your script basically stops executing, and unless the targeted webpage fails to load (and the browser doesn't display an error page, which can happen with severe network issues), .submit() is a no-return function : if it executed properly, you're not on the same page any more.
Letting you run scripts from a webpage onto a newly loaded other would be the open door to loads of security issues, so this, by design, is not allowed. As such, you can't get your password to be typed in automatically into the log-in form.
In addition, Microsoft account forms are subject to CSRF verification, preventing you from logging in from a page not sent by Microsoft, i.e. your HTML file.
Also, what you are trying to achieve is exactly the purpose of password managers that provide some sort of browser integration.
I want to create a variable value by appending two different values without page reloading
Code:
{exp:safecracker channel="blending_log" return="sthome/blending/ENTRY_ID"}
<h3>Select and enter data</h3>
{!--------Receive data to create value--------}
<input type="hidden" name="title" value="" />
<br /><br />
Organic Or Conventional:
{field:org_con}
Agent Number:
{field:agent_number}
{!-----END Receive data to create lot number-------}
field type Organic or conventional is a select box.
User can select O (Organic) OR C (Conventional)
Agent Number is a text field user enter something like 018.
As soon as user select O OR C from Organic or conventional
and entered Agent number it should append value in hidden field.
eg:
<input type="hidden" name="title" value="O018" />
OR
<input type="hidden" name="title" value="C018" />
This should happen without page reloading
I googled and tried some JavaScript and Ajax codes.
But never work.
Sorry, I am a JavaScript and Ajax Noob.
Any help please.
<input type="hidden" name="title" value="C018" id="newVal"/>
This can be used to set the value
document.getElementById("newVal").value="newValue";
Give the hidden field an Id eg:
<input type="hidden" name="title" value="" id="hiddenField"/>
then I would assume that you want the value of the hidden field to be after they fill out the number
(although you could check if both are filled out before adding the value to the hidden field)
**jQuery**
$('#Id_of_agent_number_HTMLElement').change(function () {
$('#hiddenField').val($('#Id_of_org_con_HTMLElement').val() + $(this).val());
});
Easiest solution is to use SafeCracker's dynamic_title parameter:
{exp:safecracker channel="blending_log" return="sthome/blending/ENTRY_ID" dynamic_title="[org_con][agent_number]"}
You can then remove your hidden "title" input.
I have a ticket form and when they click buy, I would like it to be saved and shown in another div as "user's ticket information" plus they are also able to buy a new ticket and add to the old one after. It doesn't have to be saved in a database or anything, for example when you click refresh all info would go away and you can start from fresh. Another example of how I do it is when I sign up, the user information will go to my memory class. Any javascript/jquery/html will help. Bellow is a start of what im working at. Thanks ^^
<html>
<body>
<form id="buyTicket" action="" method="POST">
<div id="ticketHeader">Buy Your ticket here</div><br></br>
<div>Number of persons :<input type="number" required id="numberOP" value="" placeholder="number of persons"/></div>
<div>Flight Destination:<input type="text" required id="destination" value="" placeholder="hawaii/thailand/spain"/></div>
<div>Depature :<input type="text" required id="depature" class="datepicker" value="" placeholder="enter depature date"/></div>
<div>Return :<input type="text" required id="return" class="datepicker" value="" placeholder="enter return date"/></div>
<div><button type="submit" class="button" id="buttonTicket">Buy Ticket</button></div>
</form>
</body>
</html>
Like ben said use .val() http://api.jquery.com/val/ to get the values. Here is a working example http://jsfiddle.net/YNez9/
You will have the div, which shows the selected values floating to the right
<div id="result" style="float:right;">
</div>
and on submit you want to add the values entered\ or have a placeholder that you can set its value then make it visible
$('#buyTicket').submit(function() {
$('#result').append('<div>Number of persons :'+$('#numberOP').val()+'</div>');
//.....
//return false;
});
You can use the val() function to get the values from the form once the button is clicked. Api documentation available here: http://api.jquery.com/val/. Perhaps in something a bit like this:
$('#buttonTicket').click(function() {
$('#ticketinfoheader').text($('#numberOfPersons').val());
});