setting variable from input field - javascript

I have a form that contains an input field for an email address. The form doesn't have a submit button. Instead it has the Stripe checkout.js script which provides a button that triggers a roundtrip to Stripe (to process a credit card) before submitting the form. The checkout.js script allows an optional variable data-email which makes it possible to pass a preset email address to the Stripe checkout form. I'd like to set the data-email variable with the value of the email address input field on my own form.
Here's the form and the script:
<form role="form" class="new_user" id="new_user" action="/users" method="post">
<label for="user_email">Email</label>
<input class="form-control" type="email" value="" name="user[email]" id="user_email" />
<script src="https://checkout.stripe.com/v2/checkout.js"
class="stripe-button"
data-email=document.getElementById('user_email').value
data-key="stripe_key"
data-description="Product"
data-amount="500">
</script>
</form>
I know I need to use:
data-email=document.getElementById('user_email').value
But the data-email isn't getting set. Do I need to add an onchange property to the input field? What would that look like? Do I need more than that?

If the user is entering his email on the page, you might as well just update the script as they type:
var stripe = document.getElementById("stripe");
document.getElementById("email").onkeypress = function () {
stripe.setAttribute("data-email", this.value);
}
<input id="email">
<script id="stripe"></script>
If you run the snippet and inspect the input element, then type, you'll see the data-email attribute update for the given stripe script tag. You should be able to adapt this to your form.

Related

Execute Javascript Fetch() Request After PHP Code Executes Successfully

I have a form for resetting a user email which currently consists of a password input element, and a 'Change email address' email input.
<form method="post">
<div id="form-row-password" class="form-row">
<label for="password">Enter Password</label>
<input class="input-gateway" type="password" name="password" id="password">
</div>
<div id="form-row-email" class="form-row">
<label for="email">Change Email Address</label>
<input type="email" name="email" id="email">
</div>
<div class="form-row form-row-submit">
<input type="submit" name="update-email" id="button" value="SEND ACTIVATION LINK">
</div>
</form>
With this current form you enter your password and the email address, and then you get emailed a link to confirm your new/change of email address and it all works as desired.
The current PHP process is as follows:
Santisation and validations of inputs
PDO Prepared Statments that update the mysql database
What I Wish To Achieve
What I want to do is have it so this process is split over two stages using AJAX/fetch() in javascript.
The first step would be the user entering their password, and when verified with the database this input disappears and is replaced with the 'new email address' input element.
I've set up some test javascript that fetches this second input element using a 'test' button.
What I want to do is have this fetch() javascript code trigger when then first stage is successful in the PHP code. But I cannot work out how to do this?
The PHP that processes the inputs I will included in the HTML partials that get added and removed by the fetch() javascript so I'm not concerned about that side of things.
Will I use a 'submit' event listener or an 'onchange' event listener and how will the javascript know that the password submission has been successful when this is done in PHP?
// PSEUDO JAVASCRIPT
let button = document.getElementById('button'),
formRowPassword = document.getElementById('form-row-password'),
formRowEmail = document.getElementById('form-row-email');
var filePath = "modals/email-reset-modal.php";
// what type of event listener is best to use ??
button.addEventListener('click', function(){
fetch(filePath)
.then((response) => {
return response.text();
})
.then((data)=>{
formRowPassword = '';
formRowEmail.textContent = data;
})
.catch((error => {console.log(error)}))
})
Is there a built-in PHP function that can effectively talk to javascript so it executes once the password input (1st stage) has been successful?
Any help would be amazing.
Anna

How to customize default browser error message on field type validation?

I have a form with an input of type=url. I want to show a custom message when the user tries to submit an invalid URL.
But, I don't want to re-check the url validity with custom javascript. I want the browser to validate, but I want a custom message. Is there an event I could listen to or some other property I could customize?
You can set the title with the pattern validation:
<form action="" method="get">
<input id="myURL"
name="myURL"
type="url"
required
pattern=".*\.myco\..*"
title="The URL must be in a Myco domain">
<input type="submit">
</form>

Disabling HTML5 popup form validation messages

Let's say that i have in my form:
{{ Form::email('fieldname', null, array()) }}
I fill this input as following :
thisisntanemailadress
After clicking on the submit button, a popup appears and says that this is not a valid email address, which prevents my form to get submitted.
How can i disable/configure all popup messages like that, except using Form::text() ?
This isn't caused by Laravel. It's actually the browser attempting to validating the input fields value before allowing the user to submit the form. This is triggered when you use a HTML5 input type, these include email, url, number, tel, date, and several others.
The Form helper method you are using will generate the following HTML:
<input type="email" name="fieldname">
Most modern browsers will see the type="email" and attempt to validate any input before allowing you to submit the form.
If you don't want the browser to validate a specific field you can add the novalidate attribute to that fields input tag. For the form helper method you are using this can be done via the third parameter.
{{ Form::email('fieldname', null, array('novalidate'=> 'novalidate')) }}
Alternatively you can disable browser validation for an entire form by adding the novalidate attribute to the Form tag.
<form method="" action="" novalidate> ... </form>

jQuery Validation Plugin not validating fields in a hidden div

I have the following div block which i'm trying to validate using the jQuery validation plugin
<div class="row" id="signupaddress1" hidden>
<label for="id-31"><span>Address 1:</span><span class="mark">*</span></label>
<input type="text" class="required" id="id-31" name="address1"/>
</div>
Then using
$("#form").validate(...);
to validate the form. But if this div is hidden it appears to ignore the field when validating. The form uses a postcode lookup to populate the address fields and then displays the div when this has been populated but, as a result, if only the postcode is entered the form can be submitted without validating address1 contains anything.
I guess you are using the new validator plugin which ignores hidden fields by default. To overwrite that just use this and it will work.
ignore:""
You can refer to the Github repo for the change Changeset
You are telling jQuery to validate the form but where is your form tag you should do something like this
<form><div class="row" id="signupaddress1" hidden>
<label for="id-31"><span>Address 1:</span><span class="mark">*</span></label>
<input type="text" class="required" id="id-31" name="address1"/></div></form>
than use
$("form").validate(...);

jQuery: how to submit a form with edited user inputed values?

So for example I have a simple HTML form:
<h3>
Login
</h3>
<div id="tabs-login">
<form method="get" action="./dev.html">
<fieldset>
<legend>
Email:
</legend>
<input type="text" class="required email" name="login" />
</fieldset>
<fieldset>
<legend>
Password:
</legend>
<input type="password" class="required" name="pass" />
</fieldset>
<input type="submit" value="Submit" />
</form>
</div>
And I use jQuery to validte it:
<script>
$(document).ready(function() { $("form").validate(); });
</script>
I want on form submition to take user inputed password value and take SHA256 from it via this jQuery plugin and submit email=user-inputed-value and pass=sha-value. How to access validated values via jQuery and change them and send to original form destination?
First -- I want to point out that I don't think this is a good idea. It's generally a bad idea to implement password hashing on the client side. Instead, the pass should be sent in plain text (over HTTPS) to the server, where it is then hashed using your preferred algorithm before storage. This has the added benefit of not advertising to potential attackers which hashing method is used, since that code exists only on the server.
That said: you're going to want to calculate that SHA value prior to form submit.
You could bind an event handler to the password field's blur event to update a hidden field's value with the new hash. Or you could add the update logic to the validation code.
Regardless of where the extra code goes, it will be much easier for you to prepare the hash prior to the form submit than it will be to send a second submission chasing after the first.
E.g.
<!-- add this to the form -->
<input type="hidden" name="sha_pass" value="" />
// add this to the document ready handler
$('[name=pass]').blur(function() {
$('[name=sha_pass]').val($.sha256($(this).val());
});

Categories

Resources