AutoFill first/last name - swiftui

I recently setup associated domains and added password autofill, but I am now wondering how I can autofill their first and last name as seen on some webpages such as below in HTML:
<!DOCTYPE html>
<html>
<head>
<script>
function formSubmit() {
document.forms["myForm"].submit();
}
</script>
</head>
<body>
<h1>The form name attribute</h1>
<form name="myForm" action="/action_page.php" method="get">
<label for="fname">First name:</label>
<input type="text" id="fname" name="fname"><br><br>
<label for="lname">Last name:</label>
<input type="text" id="lname" name="lname"><br><br>
<input type="button" onclick="formSubmit()" value="Send form data!">
</form>
<p>Notice that the JavaScript in the head section uses the name of the form to specify which form to submit.</p>
</body>
</html>
If you are on iPhone and tap in the textbox above, it shows you your first name in some cases for a quick autofill. Now my questions is, how can I use swiftUI to produce to same concept as above.
Here is my code in SwiftUI so far:
#State var displaynamefirst = ""
TextField("First Name",text:self.$displaynamefirst)
.autocapitalization(.words)
.padding()
.background(RoundedRectangle(cornerRadius:6).stroke(Color("Dominant"),lineWidth:2))
.padding(.top, 0)
.submitLabel(.done)

For TextField you can use the .textContentType(_:) modifier.
documentation
One of the content types available in the UITextContentType structure that identify the semantic meaning expected for a text-entry area. These include support for email addresses, location names, URLs, and telephone numbers, to name just a few.
list of possible contentTypes
Example:
TextField("First Name",text:self.$displaynamefirst)
.autocapitalization(.words)
.padding()
.textContentType(.givenName)
.background(RoundedRectangle(cornerRadius:6).stroke(Color("Dominant"),lineWidth:2))
.padding(.top, 0)
.submitLabel(.done)

Related

Jinja templating not working in script.js

I need to include jinja templating in element.innerHTML but jinja is not working.
Code script.js:
contentDiv.innerHTML = getContent(fragmentId);
function getContent(fragmentId) {
var pages = {
quad1: `
<form class="form-inline" method="POST" id="form1">
<h3>
<input type="number" id="quad_a1" name="input_a" class="form-control mx-2 col-1" placeholder="a">
<b>x² +</b>
<input type="number" id="quad_b1" name="input_b" class="form-control mx-2 col-1" placeholder="b">
<b>x +</b>
<input type="number" name="input_c" class="form-control mx-2 col-1" placeholder="c">
<b>=</b>
<input type="number" name="input_d" class="form-control mx-2 col-2" placeholder="Default(0)">
<button type="submit" class="btn btn-primary float-right mr-5" onclick="return empty_quad()">Solve</button>
</h3>
</form>
{{ sol }}
`,
.
.
.
};
return pages[fragmentId];
}
But the output is literally {{ sol }}, not the value of sol:
So how to access the variable sol passed through flask's render_template() in script.js?
You can't use jinja2 template in your js file.
First method: You have to use inline javascript in html file using <script></script> tag, and then you can access the sol variable by assigning it to javascript variable
<script> sol = "{{sol}}" </script> // {{sol}} should be between quotation marks
Second method: If you have seperate js file. you can make a div tag, define it's class and set it's id to {{sol}}. get the element by class name and then get it's id.
Html
<div class="myclass" id="{{sol}}" style="display:none"></div>
javascript
elem= document.getElementsByClassName("myclass") ;
console.log(elem.id) // this is the sol value.
json_script
Safely outputs a Python object as JSON, wrapped in a <script> tag, ready for use with JavaScript.
Argument: HTML “id” of the <script> tag.
For example:
{{ value|json_script:"hello-data" }}
If value is the dictionary {'hello': 'world'}, the output will be:
<script id="hello-data" type="application/json">{"hello": "world"}</script>
The resulting data can be accessed in JavaScript like this:
const value = JSON.parse(document.getElementById('hello-data').textContent);
XSS attacks are mitigated by escaping the characters “<”, “>” and “&”. For example if value is {'hello': 'world</script>&'}, the output is:
<script id="hello-data" type="application/json">{"hello": "world\\u003C/script\\u003E\\u0026amp;"}</script>
This is compatible with a strict Content Security Policy that prohibits in-page script execution. It also maintains a clean separation between passive data and executable code.
django doc

Fancybox to open on link click only first time then go to page url

I'm trying to gate a link using fancybox and cookies to show a form the first time the link is clicked and then once the form is submitted the popup form would no longer pop up but instead would open to the page url. Here is my code but so far all I can do is get the popup form to show on link click. How do I tell fancybox to not show if the cookie is present and instead go to a page link?
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title></title>
<link href="http://intercross2.com/CPS_landing_page/assets/fancybox/dist/jquery.fancybox.min.css" rel="stylesheet" />
</head>
<body>
<a class="fancybox" data-fancybox data-src="#donation-info" href="thankyou.html" alt="">Fancybox</a>
<div style="display:none">
<div id="donation-info">
<h2>Answer a few short questions to continue</h2>
<form id="gate" method="post" action="sendmail.php">
<label for="name">Your Name</label><br>
<input type="text" name="name" title="Enter your name" class="required"><br>
<label for="phone">Daytime Phone</label><br>
<input type="tel" name="phone" class="required"><br>
<label for="email">Email</label><br>
<input type="email" name="email" title="Enter your e-mail address" class="required email"><br>
<input type="submit" name="submit" class="submit-link" id="submit" value="Submit" />
</form>
</div>
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-cookie/1.4.1/jquery.cookie.min.js"></script>
<script src="http://intercross2.com/CPS_landing_page/assets/fancybox/dist/jquery.fancybox.min.js"></script>
<script>
$(function () {
// Define cookie name
var cookieName = 'hide_form';
// Configure fancyBox
$('.fancybox').fancybox({
autoDimensions: false,
autoSize: false,
height: 'auto',
padding: 20,
width: 650,
afterClose: function() {
// Set cookie to hide fancybox for 1 day
$.cookie(cookieName, true, { expires: 1 });
}
});
// Handle submit click event
$('a#submit').on('click', function (event) {
event.preventDefault();
// Hide fancybox and set cookie to hide fancy box for 7 days
$.fancybox.close();
$.cookie(cookieName, true, { expires: 7 });
});
</script>
</body>
</html>
If you need to do check if cookie exists, then use something like:
if (!!$.cookie(cookieName)) { /* Open fancyBox here */ }
The rest is up to you.

How to identify button selected in cakephp 3.x?

I viewed the answer Which Submit Button was Clicked in CakePHP?. That situation doesn't apply to me, because I have the same action for each button.
I want to reuse a bootstrap modal and I want to know which item was selected when the modal was invoked. Very simply, I have a table with grades for each school object. When the user clicks the add button, I want to invoke the modal and add a grade for that object. I want to know which object was selected, because I want to reuse the modal for all objects. How can I do that in cakephp 3.x ?
After a teacher wants to add a grade and press the + button how do I know if he/she selected Mathematics or English if I use the same modal for grade saving? .
okey, most simple way is in modal to have hidden field, which contains a subject. I think this has not much to do with cakephp.
Example should look like this:
function modalopen(subject) {
$('#modal #subject').val(subject);
$('#modal').modal('toggle');
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js" integrity="sha384-b/U6ypiBEHpOf/4+1nzFpr53nxSS+GLCkfwBdFNTxtclqqenISfwAzpKaMNFNmj4" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/js/bootstrap.min.js" integrity="sha384-h0AbiXch4ZDo7tp9hKZ4TsHbi047NrKGLO3SEJAg45jXxnGIfYzk4Si90RDIqNm1" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" integrity="sha384-/Y6pD6FV/Vv2HJnA6t+vslU6fwYXjCFtcEpHbNJ0lyAFsXTsjBbfaDjzALeQsN6M" crossorigin="anonymous">
</head>
<body>
<button type="button" class="btn btn-info" onclick="modalopen('english')">+</button>
<button type="button" class="btn btn-info" onclick="modalopen('math')">+</button>
<div class="modal fade" id="modal" tabindex="-1" role="dialog" aria-labelledby="" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title" id=""></h4>
</div>
<div class="modal-body">
sub (will be hidden):<br>
<input type="text" name="subject" id ="subject" value="" placeholder="will be hidden"><br>
Mark:<br>
<input type="text" name="mark" id ="mark" value="" placeholder="mark">
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save</button>
</div>
</div>
</div>
</div>
</body>
</html>
The only way of determining which button was pressed is to use Javascript. This means not using the html-tag-option based method on the button to launch the modal, ie:
<!-- Button trigger modal: CAN *NOT* USE THIS TECHNIQUE!! -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal">
Launch demo modal
</button>
I assume the form inside your modal is a cake-generated form, and the submit button is a normal form submit, which triggers a redraw of the page, effectively killing the modal (IE there's no "modal takedown").
To keep as close as possible to Cake's paradigm, I would send it back to the server in a hidden form field.
Something like:
on the cake side in your ctp while creating your form:
// HTML WRAPPER FOR MODAL
<?= $this->Form->create(yourentity); ?>
(your form stuff)
<?= $this->Form->hidden("subject_id",["id"=>"subject-id-field"]);
(end of form stuff including submit)
<?= $this->Form->end(); ?>
// HTML WRAPPER FOR MODAL
This will generate something in your form like
<input type="hidden" name="subject_id" id="subject-id-field"/>
We'll need to grab this hidden field in Javascript, so I'm giving it both a name (form-specific) and an id (global), since I prefer referring to everything with #id-syntax, but you could also use form[name=subject_id] and get rid of the id clause
On the browser side in HTML, to create your buttons:
<button type="button" class="btn btn-primary" onclick="launch_dialog('MATH')">Add Math</button>
On the browser side in javascript, the function to call when the button is clicked, which sets the subject id in the form and then launches the modal/form:
<script>
function launch_dialog(subject) {
$("#subject-id-field").val(subject); // use the id of the hidden field
$("#your-modal").modal("show"); // or whatever you do to launch the modal
}
</script>
On the server side in the function that the form targets:
# in your controller php file
function formAction() {
if($this->request->data["subject_id"]=="MATH") { // use the name of the hidden field
// do math record
}
// etc
}
Another note - if your grade record really does have a subject_id field which belongsTo a Subject record, you can have the button's onclick function call the launch_dialog function with that constant, and then you won't need any IF function inside the server action code. Just make sure to use the original record to generate the id, eg:
In controller before render:
$this->set("subjects",$this->[entity]->Subjects->find("list");
In ctp file, something like:
<?php foreach($subjects as $id=>$name): ?>
<button type="button" class="btn btn-primary"
onclick="launch_dialog(<?= $id ?>)">Add <?= $name ?></button>
<?php endforeach; ?>

Grails- How to render a view with a selected template?

I created different tabs in a view with the following code:
<!doctype html>
<html>
<head>
<meta name="layout" content="main-redesign" />
<title>Account Settings</title>
</head>
<body>
<%-- global header --%>
<%-- tab navigation your network --%>
<g:render template="accountSettingNavigation"/>
<%-- main content area --%>
<div class="container account-setting">
<div class="row">
<div class="col-md-10 col-md-offset-2">
<h3 class="page-title">ACCOUNT SETTINGS</h3>
<%-- your network tab containers --%>
<div class="tab-content mb-100">
<div class="tab-pane active" id="personalInformation">
<g:render template="personalInfo"
model="[user:user,editable:editable]" />
</div>
<div class="tab-pane" id="changePassword">
<g:render template="changePassword"/>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
In the changePassword template I have a form which includes 3 fields:
Current password
New password confirmation
After the user clicks on the "update password" the form is submitted to a controller to save the new password.
In have to render the view and to ensure that the changePassword template will be selected- How?
Provide in your model, what tab is active and by that means decide, where to put the active css class.
first add hidden fields into the templates, which mark the tab
(let say name="tabName" value"personalInformation")
in the controller you can access this field in
params (params.tabName)
at the end of the controller put this
field into the model
use this field in the gsp to decide what tab
is active

How to get use ng-pattern

I have a simple text input in which I only want to allow floats and ints (watch out: jade)
input.form-control(type="text", ng-model='usd', ng-pattern="nums",ng-change='convert_to_btc()', placeholder="USD")
However it doesn't work, I can always insert any character in the input (do I need to do more in order to display something? e.g. a red border if it's incorrrect? or should then just those characters not even be able to be entered?)
The pattern is a regex and thus not a string, so that should be fine???
Here's the controller:
app.controller("AppCtrl", function AppCtrl($scope, $http, $interval ) {
//lots of other stuff
$scope.nums = /^\-?\d+((\.|\,)\d+)?$/; //note no string, it's a regex
}
This is the generated HTML. Could this be the problem? The generated HTML actually has a string, not a regex!?
<input type="text" ng-model="usd" ng-pattern="/^\-?\d+((\.|\,)\d+)?$/" ng-change="convert_to_btc()" placeholder="USD" class="form-control ng-dirty ng-valid-parse ng-touched ng-invalid ng-invalid-pattern">
I hope this is what you are trying to do.
Please have a look at the below link
http://plnkr.co/edit/BGzLbQHy0ZtHYmom8xA3
<!DOCTYPE html>
<html ng-app="">
<head>
<script data-require="angular.js#1.3.x" src="https://code.angularjs.org/1.3.13/angular.js" data-semver="1.3.13">
</script>
<style>
.ng-invalid-pattern {
border:1px solid #f00;
}
</style>
</head>
<body>
<p>Hello</p>
<form name='myform'>
<input type="text" name='ip' ng-model="usd" ng-pattern="/^\-?\d+((\.|\,)\d+)?$/"
ng-change="convert_to_btc()" placeholder="USD"/>
<p ng-show='myform.ip.$invalid'>Error</p>
</form>
</body>
</html>
If you are trying to block the user from being able to enter character/letters and only allowing them to enter numbers into the input, then change the <input type="text" to <input type="number"
Here's a link to the Angular Doc page on inputs that should only allow numbers: input[number]