Where can I find onSubmit form field check using Firefox DevTools? - javascript

I integrated the Google reCaptcha into a website form. Before, on form submit the webapp checked if all form filed were filled in. After I integrated the reCaptcha, this form check does not run anymore and the form ist send even when the fields are empty.
I tried to find the javascript that does the checks but could not find it. I ran the Firefox DevTools Runtime Analysis and checked the Flame Chart to see the javascript call stack. There I found some jquery functions but afaik that can not be the whole story, as form field checks are not done by jQuery.
By what menas can I find out, what javascript function is called to do the check? Or could the checks be done elsewhere, e.g. in CSS.
Strange too: The posted error message "Please fill in this field" can not be found anywhere in the entire project code. I checked in my IDE.
The Webpage uses twitter Bootstrap, jQuery 1.12.4 and runs on Silverstripe CMS 3.6 with userforms module (although this particular form appears in the correseponding page template).
I appreciate any hint. I allready spent hours with this issue.

I had 2 problems there:
- first: I had a submit button with id="submit" as in Google reCaptcha documentation example (https://developers.google.com/recaptcha/docs/invisible). However, this can cause "confusing failures" if used with jQuery (http://api.jquery.com/submit/). So I renamed the button id="submit_button" and the form was submitted.
- second: Form validation was done by HTML5 which I did not know exists.This was activated with the "required" attributes is the input form fields. Shame on me!
My form now works and looks like this:
<h2>Anfrage</h2>
<form action="formaction.php" method="post" id="form-offer" class="form-std form-offer" enctype="multipart/form-data" >
<fieldset>
<label>Firma * <input name="firma" required="" type="text"></label>
<select name="anrede" required="">
<option value="">Anrede *</option>
<option value="Herr">Herr</option>
<option value="Frau">Frau</option>
</select>
<label>Name und Vorname Kontaktperson *<input name="vorname" required="" type="text"></label>
<label>PLZ & Ort *<input name="ort" required="" type="text"></label>
<label>Adresse *<input name="adresse" required="" type="text"></label>
<select name="land" required="">
<option value="">Land *</option>
<option value="Afghanistan">Afghanistan</option>
<option value="Ägypten">Ägypten</option>
<option value="Aland">Aland</option>
<option value="Albanien">Albanien</option>
</select>
<label>E-Mail *<input name="email" required="" type="email"></label>
<label>Telefon *<input name="telephone" required="" type="text"></label>
</fieldset>
<div class="g-recaptcha"
data-sitekey="sdfsdfsdfsdfsdf"
data-size="invisible"
data-callback="formSubmit">
</div>
<button id="submit_button">Send<i class="icon icon-chevron-right"></i></button>
<input name="block" value="167" type="hidden">
<input name="locale" value="de_DE" type="hidden">
</form>
<link rel="stylesheet" type="text/css" href="body.min.css">
<script src="jquery-12.js"></script>
<script defer="" src="main.js"></script>
<script src="https://www.google.com/recaptcha/api.js"></script>
<script>
(function($, document, undefined){
$('#form-offer').submit(function (event) {
event.preventDefault();
grecaptcha.reset();
grecaptcha.execute();
});
})(jQuery, document, undefined);
function formSubmit(response) {
// submit the form which now includes a g-recaptcha-response input
var myForm = document.getElementById("form-offer");
myForm.submit();
}
</script>

Related

Value from a dynamic JS computed value returns NULL when php gets the input value [duplicate]

I have some disabled inputs in a form and I want to send them to a server, but Chrome excludes them from the request.
Is there any workaround for this without adding a hidden field?
<form action="/Media/Add">
<input type="hidden" name="Id" value="123" />
<!-- this does not appear in request -->
<input type="textbox" name="Percentage" value="100" disabled="disabled" />
</form>
Elements with the disabled attribute are not submitted or you can say their values are not posted (see the second bullet point under Step 3 in the HTML 5 spec for building the form data set).
I.e.,
<input type="textbox" name="Percentage" value="100" disabled="disabled" />
FYI, per 17.12.1 in the HTML 4 spec:
Disabled controls do not receive focus.
Disabled controls are skipped in tabbing navigation.
Disabled controls cannot be successfully posted.
You can use readonly attribute in your case, by doing this you will be able to post your field's data.
I.e.,
<input type="textbox" name="Percentage" value="100" readonly="readonly" />
FYI, per 17.12.2 in the HTML 4 spec:
Read-only elements receive focus but cannot be modified by the user.
Read-only elements are included in tabbing navigation.
Read-only elements are successfully posted.
Using Jquery and sending the data with ajax, you can solve your problem:
<script>
$('#form_id').submit(function() {
$("#input_disabled_id").prop('disabled', false);
//Rest of code
})
</script>
To post values from disabled inputs in addition to enabled inputs, you can simply re-enable all of the form's inputs as it is being submitted.
<form onsubmit="this.querySelectorAll('input').forEach(i => i.disabled = false)">
<!-- Re-enable all input elements on submit so they are all posted,
even if currently disabled. -->
<!-- form content with input elements -->
</form>
If you prefer jQuery:
<form onsubmit="$(this).find('input').prop('disabled', false)">
<!-- Re-enable all input elements on submit so they are all posted,
even if currently disabled. -->
<!-- form content with input elements -->
</form>
For ASP.NET MVC C# Razor, you add the submit handler like this:
using (Html.BeginForm("ActionName", "ControllerName", FormMethod.Post,
// Re-enable all input elements on submit so they are all posted, even if currently disabled.
new { onsubmit = "this.querySelectorAll('input').forEach(i => i.disabled = false)" } ))
{
<!-- form content with input elements -->
}
If you absolutely have to have the field disabled and pass the data you could use a javascript to input the same data into a hidden field (or just set the hidden field too). This would allow you to have it disabled but still post the data even though you'd be posting to another page.
I'm updating this answer since is very useful. Just add readonly to the input.
So the form will be:
<form action="/Media/Add">
<input type="hidden" name="Id" value="123" />
<input type="textbox" name="Percentage" value="100" readonly/>
</form>
Semantically this feels like the correct behaviour
I'd be asking myself "Why do I need to submit this value?"
If you have a disabled input on a form, then presumably you do not want the user changing the value directly
Any value that is displayed in a disabled input should either be
output from a value on the server that produced the form, or
if the form is dynamic, be calculable from the other inputs on the form
Assuming that the server processing the form is the same as the server serving it, all the information to reproduce the values of the disabled inputs should be available at processing
In fact, to preserve data integrity - even if the value of the disabled input was sent to the processing server, you should really be validating it. This validation would require the same level of information as you would need to reproduce the values anyway!
I'd almost argue that read-only inputs shouldn't be sent in the request either
Happy to be corrected, but all the use cases I can think of where read-only/disabled inputs need to be submitted are really just styling issues in disguise
I find this works easier. readonly the input field, then style it so the end user knows it's read only. inputs placed here (from AJAX for example) can still submit, without extra code.
<input readonly style="color: Grey; opacity: 1; ">
Simple workaround - just use hidden field as placeholder for select, checkbox and radio.
From this code to -
<form action="/Media/Add">
<input type="hidden" name="Id" value="123" />
<!-- this does not appear in request -->
<input type="textbox" name="Percentage" value="100" disabled="disabled" />
<select name="gender" disabled="disabled">
<option value="male">Male</option>
<option value="female" selected>Female</option>
</select>
</form>
that code -
<form action="/Media/Add">
<input type="hidden" name="Id" value="123" />
<input type="textbox" value="100" readonly />
<input type="hidden" name="gender" value="female" />
<select name="gender" disabled="disabled">
<option value="male">Male</option>
<option value="female" selected>Female</option>
</select>
</form>
In addition to Tom Blodget's response, you may simply add #HtmlBeginForm as the form action, like this:
<form id="form" method="post" action="#Html.BeginForm("action", "controller", FormMethod.Post, new { onsubmit = "this.querySelectorAll('input').forEach(i => i.disabled = false)" })"
Define Colors With RGBA Values
Add the Following code under style
<!DOCTYPE html>
<html>
<head>
<style>
#p7 {background-color:rgba(215,215,215,1);}
</style>
</head>
<body>
Disabled Grey none tranparent
<form action="/Media/Add">
<input type="hidden" name="Id" value="123" />
<!-- this does not appear in request -->
<input id="p7" type="textbox" name="Percentage" value="100" readonly="readonly"" />
</form>
result
I had exactly the same problem, but did not work for me, because I have select HTML element, and it's read-only state allowed to change its value.
So I used select in one condition and input in another:
<% If IsEditWizard Then %>
<%For Each item In GetCompaniesByCompanyType("ResponsibleEntity")%>
<% If item.CompanyCode.EqualsIgnoreCase(prCompany.GetAsString("LinkedCompany")) Then %>
<input type="text" value="<%: item.CompanyName %>" tabindex="3" size="12" maxlength="12" readonly="readonly" />
<input type="hidden" id="LinkedCompany" name="LinkedCompany" value="<%:item.CompanyCode %>" tabindex="3" size="12" maxlength="12" />
<%End If %>
<%Next %>
<%Else %>
<select id="LinkedCompany" name="LinkedCompany" class="w-auto" <%= If(IsEditWizard, "disabled", "") %>>
<option value="">Please Select</option>
<%For Each item In GetCompaniesByCompanyType("ResponsibleEntity")%>
<option value="<%:item.CompanyCode %>" <%: IIf(item.CompanyCode.EqualsIgnoreCase(prCompany.GetAsString("LinkedCompany")), "selected", String.Empty) %>><%: item.CompanyName %></option>
<%Next %>
</select>
<%End If %>
use
<input type="textbox" name="" value="100" disabled/>
or
<input type="textbox" name="" value="100" readonly/>
if your are using framework like PHP Laravel, element without name attribute will read as unset
<input type="textbox" value="100" disabled/>
You can totally avoid disabling, it is painful since html form format won't send anything related to <p> or some other label.
So you can instead put regular
<input text tag just before you have `/>
add this
readonly="readonly"
It wouldn't disable your text but wouldn't change by user so it work like <p> and will send value through form. Just remove border if you would like to make it more like <p> tag

Javascript handle 2 forms in one page

I have 2 forms. I ask for an API-KEY int he first form to load values account in some inputs of the second form and submit it.
The first form:
<form id="formAPI" name="formAPI">
<label for="" >API-KEY</label>
<input type="text" class="form-control" id="inputApi" placeholder="XXX-XXX>
<input id="continue" type="submit" value='Continue' onclick="submit_api()"/>
</form>
The second is like this:
<form id="form2" >
<label for="inputName3" >Name</label>
<input type="text" id="inputName3">
<label for="selectDevices" >Device</label>
*here devices have to be loaded automatically due to the API KEY*
<select class="form-control" name ="device_s" id="id_devices">
<option value="1"> Device 1 </option>
<option value="2">Device 2</option>
<option value="3">Device 3</option>
</select
<input id="rule1" type="text" placeholder="Give a rule" />
<input id="btn2" type="submit" value='Submit' />
</form>
I have no choice if the page is reloaded outright or not. the essential is to preload some data from the second form via the API KEY of the first form.
You can use LocalDB js in your form1.
Create a js to write your api values and when submit the form2... receive this infos and fill where you need it.
Localdb support refresh and don't loose data.
Example:
https://www.codeproject.com/Tips/1021483/Localdb-js

Trying to make multiple variables in prompt box show at one time

So basically I have a function in JavaScript. Its a function where when a button is clicked it brings up a promptBox which asks you to to type an input. Ive declared multiple variables but you have to do one variable at a time. How do I get it to where all variables pop up in my promptBox() at the same time
JavaScript Code:
function promptBox()
{
var name = prompt ("Your Name");
var dateOfBirth= prompt ("Date of Birth");
var password= prompt("Password");
}
Html Code:
<button class = "submit" onclick="promptBox();">Sign Up</button>
What can I do in either html,JavaScript or CSS to fix my problem
The prompt dialog can only accept one string each time it is called.
Have you considered creating a <form> with all of the fields needed and letting the user enter them on the page instead of from prompt dialogs?
label {
display: block;
}
<form>
<label>Name:
<input name="name">
</label>
<label>Age:
<input name="age">
</label>
<label>Address:
<input name="address">
</label>
<label>City:
<input name="city">
</label>
<label>State:
<input name="state">
</label>
<label>Zip:
<input name="zip">
</label>
</form>
How could a prompt box possibly do this? It's meant for a single value. You're going to have to use some custom library - jQuery UI dialog maybe.
If you are stuck with vanilla JS, you're going to have to do some overlay DIV or something.
You should probably get more specific about what it is your want
<!-- Simple pop-up dialog box, containing a form -->
<dialog open id="favDialog">
<form method="dialog">
<section>
<p><label for="favAnimal">Favorite animal:</label>
<select id="favAnimal">
<option></option>
<option>Brine shrimp</option>
<option>Red panda</option>
<option>Spider monkey</option>
</select></p>
<p><label for="favFish">Favorite fish:</label>
<select id="favFish">
<option></option>
<option>Shark</option>
<option>Tuna</option>
<option>Seamonkey</option>
</select></p>
</section>
<menu>
<button id="cancel" type="reset">Cancel</button>
<button type="submit">Confirm</button>
</menu>
</form>
</dialog>
<menu>
<button id="updateDetails">Update details</button>
</menu>
For diversity's sake, here's something from MDN you could probably use if you dont want to bother using sweetalert :)
You'll still need to do the legwork either way.

Paypal Upload Command - How to encrypt/secure dynamically generated payment amounts?

Alright so I saw a question similar to this but thought my situation was a little different and warranted a question. So I am working on a site that allows you to select from two dropdowns. I'm using jQuery to keep track of when these drop downs change. Then based off of the change I update the PayPal hidden form(Cart Upload Command).
Then once the user is done selecting the options they click the checkout button which takes them to the PayPal page that shows them the items they selected and they can begin the checkout process through PayPal. It sounds so easy when I say it like this but then I read that it needs to be encrypted. My question is how do I go about encrypting a dynamically generated form. They suggest using the PayPal button creation tool. Well that would make sense if I had a static amount, but I do not.
HTML
<label for="space-selector">Select Space</label>
<select class="form-control" id="space-selector" name="space-selector">
<option value="150">10' x 10'</option>
<option value="225">20' x 10'</option>
<option value="300">30' x 10'</option>
<option value="500">Custom</option>
</select>
<label for="parkingpass-selector">2 Day Parking Pass - $50</label>
<select class="form-control" id="parkingpass-selector" name="parkingpass-selector">
<option value="0">No</option>
<option value="50">Yes</option>
</select>
<form action="https://www.paypal.com/cgi-bin/webscr" method="post">
<input type="hidden" name="cmd" value="_cart">
<input type="hidden" name="upload" value="1">
<input type="hidden" name="business" value="jestewart.11#gmail.com">
<input type="text" name="item_name_1" value="Space Selected" readonly>
<input type="text" name="amount_1" value="1.00"readonly>
<input type="hidden" name="shipping_1" value="1.75">
<input type="text" name="item_name_2" value="Parking Pass" readonly>
<input type="text" name="amount_2" value="2.00" readonly>
<input type="hidden" name="shipping_2" value="2.50">
<input type="submit" value="Checkout">
</form>
jQuery
$(function (){
//space selector change
$("select[name=space-selector]").change( function () {
//update the hidden form values based off of selectors
$("input[name=item_name_1]").val($(this).find(":selected").text());
$("input[name=amount_1]").val($(this).find(":selected").val());
});
//parking pass selector change
$("select[name=parkingpass-selector]").change( function () {
//update the hidden form values based off of selectors
$("input[name=item_name_2]").val($(this).find(":selected").text());
$("input[name=amount_2]").val($(this).find(":selected").val());
});
});
Here is the fiddle to show you functionality. Fiddle
You do not need encrypting the amount and others. The only important thing is to make ALL verifications on the server.
Paypal has an API who permise that. IPN
Some links :
https://developer.paypal.com/webapps/developer/docs/classic/products/instant-payment-notification/
http://www.micahcarrick.com/paypal-ipn-with-php.html

HTML single-page Landing page with input fields that transition

My landing page has two steps (one for selecting an option from a dropdown menu and pressing 'send', and one for entering your email and pressing 'send'). These steps appear to be controlled either by javascript or html5, something I am not used to. I need to add a third "step" to the system.
Here is the site link: you will see that after selecting an answer and entering something in the email field you are back to the first selection.
the section of code in index.html appears like this:
'<!-- Step 1 -->
<div class="steps step-1">
<p>STEP 1: Answer this question</p>
<form action="#" method="post">
<div class="select-holder">
<label>Who is giving this away the awesome thing that you're about to download?</label>
<div class="select-wrap">
<select name="" >
<option selected="selected" value="Select Your Answer">Select Your Answer</option>
<option value="LeadBrite, Duh!">LeadBrite, Duh!</option>
<option value="Lady Gaga">Lady Gaga</option>
<option value="Santa Claus">Santa Claus</option>
</select>
</div>
</div>
<input type="submit" value="Submit Answer" class="submit-button" />
</form>
<div class="contest-ends">
<p><span>Contest Ends</span></p>
<p>Month 00, 00:00 AAA</p>
</div>
</div>
<!-- END Step 1 -->
<!-- Step 2 -->
<div class="steps step-2">
<p>STEP 2: Your details</p>
<form action="#" method="post">
<input type="text" class="field" value="Enter your email address" title="Enter your email address" />
<input type="submit" value="Send" class="send" />
</form>
<div class="contest-ends">
<p><span>Contest Ends</span></p>
<p>Month 00, 00:00 AAA</p>
</div>
</div>
<!-- END Step 2 -->'
As I said, I want to add a step three but I do not know how to move forward. The source files include an HTML5 file and others that I believe I'd have to connect step-3 to in order for it to function properly.
I appreciate any help. Thanks.
Hoping to simplify this by creating a sample to work with. If you check out http://jsfiddle.net/fgAUQ/, you can see the form listening for the submit during the email question.
$(document).on('submit', 'form', function (e) {
// Check email address
// if email address ok
$('.step-2').hide();
$('.step-3').fadeIn(800);
e.preventDefault();
// else
// alert
// e.preventDefault();
// end if
});
You'll still need to follow this through with storing / processing the email and handling the form upload.

Categories

Resources