We Keep Coding

How to use focus in this satisfaction survey

I need to use focus for this satisfaction survey, but I don't know how to use it, help me!
I need to select one of the faces for a satisfaction survey. I send the satisfaction survey of example. I am working in Angular, so if it's possible, I need the typescript. This was my attempt, but I can't get the svg RELLENO to highlight. I don't know where to put the focus. I don't know if the structure used is the right one.
Images face are in SVG example Cara-muy-feliz Relleno
<form action="/action_page.php" class="form-satisfaction">
<div class="items-calification row align-items-start">
<input id="test" class="calification" type="image"
src="./assets/images/page/dashboard/satisfaction-survey/Cara-triste.svg">
<div id="scripted" class="circle">
<img src="./assets/images/page/dashboard/satisfaction-survey/Relleno.svg">
</div>
<label class="face">
<h3>
Deficiente
</h3>
</label>
<input class="calification" type="image"
src="./assets/images/page/dashboard/satisfaction-survey/Cara-neutra.svg">
<div id="circle" class="circle">
<img src="./assets/images/page/dashboard/satisfaction-survey/Relleno.svg">
</div>
<label class="face">
<h3>
Regular
</h3>
</label>
<input class="calification" type="image"
src="./assets/images/page/dashboard/satisfaction-survey/Cara-feliz.svg">
<div id="circle" class="circle">
<img src="./assets/images/page/dashboard/satisfaction-survey/Relleno.svg">
</div>
<label class="face">
<h3>
Bueno
</h3>
</label>
<input class="calification" type="image"
src="./assets/images/page/dashboard/satisfaction-survey/Cara-muy-feliz.svg">
<div id="circle" class="circle">
<img src="./assets/images/page/dashboard/satisfaction-survey/Relleno.svg">
</div>
<label class="face">
<h3>
Excelente
</h3>
</label>
</div>
</form>
document.getElementById('test').onclick = () => {
document.getElementById('scripted').focus();
console.log('SÍ');
};
.form-satisfaction
overflow: hidden
.items-calification
position: relative
top: 90.76px
width: 1080px
height: 244.24px
left: 200px
.calification
position: relative
margin-left: -90px
.circle
img
z-index: -1
visibility: hidden
position: relative
left: -166px
.img:focus
visibility: visible

Write field value to embedded form

I would have thought that this would be an easy task but for some reason I can't get it working. I have a FormCraft form embedded in my webpage which contains a hidden field. I would like to write the value of that field from a variable.
HTML of the form:
<div class="form-page form-page-1 form-page-last elements-count-17" style="">
<div class="is-page ">
<div class="form-element form-element-type-text required-false default-visible " data-field="field33" style="width: 100%; flex-basis: 100%;">
<div class="form-field"><input type="hidden" class="trigger-logic " name="field33" value="" autocomplete="off"><div class="text-cover-compile "><p class=""><img src="https://formcrafts.com/file/view/d0b2560bd4dad6910239825c34e51adb/Application%20header" alt=""></p></div></div>
</div><div class="form-element form-element-type-one-line-text required-true default-visible " data-field="field15" style="width: 50%; flex-basis: 50%;">
<div class="form-field"><label class=""><span class="label-cover"><span class="label ">First Name<span class="asterisk "></span></span><span class="sub-label "></span></span><span class="field-input-cover"><input aria-label="First Name" type="text" class="trigger-logic " name="field15" tooltip="" title="" placeholder="" data-input-validate="none" data-input-mask=""></span></label></div>
</div><div class="form-element form-element-type-hidden required-false default-visible " data-field="field23" style="width: 100%; flex-basis: 100%;">
<div class="form-field"><div class="field-input-cover "><span class="label ">utm_campaign</span><span class="sub-label">Hidden Field</span><input type="hidden" class="trigger-logic trigger-math" name="field23" value="" autocomplete="off"></div></div>
</div><div class="form-element form-element-type-submit required-false default-visible " data-field="field12" style="width: 100%; flex-basis: 100%;">
<div class="form-field"><button aria-label="CONTINUE" type="submit" class="button form-button submit-button "><span class="submit-button-text trigger-math ">CONTINUE</span><span style="border-color: ; border-left-color: transparent" class="loader loader-white"></span></button><div class="submit-response "></div></div>
</div>
</div>
</div>
<div class="rg-right"><span></span></div><div class="rg-left"><span></span></div></div>
And I'm trying to populate the field 'utm_campaign' using this simple script:
<script>
document.querySelector("[data-field='field23']").value = {{cookie - utm_campaign}};
</script>
I've tried a number of methods and I can't get it to work. I can see that the script is firing and that the variable is properly assigned. It just isn't making its way into the field for form submission.
Any advice would be greatly appreciated.

Jquery validation engine wrong position

I have been facing this issue. I tried many things but no one worked. My validation error on this page always visible on left side. This is my vaildation engine jquery. Please help.
$("#register_form").validationEngine({
showOneMessage: true,
scroll : false,
maxErrorsPerField: 1,
promptPosition: "bottomLeft",
updatePromptsPosition: true,
autoPositionUpdate: true,
});
});
HTML
This is my form.
<form action="<?php echo htmlspecialchars($_SERVER['PHP_SELF'])?>" method="post" id="register_form">
<div class="col-100">
<input type="text" class=" twidh validate[required, minSize[2]] " maxlength="60" placeholder="Your Name" name="name" id="rname" />
<span id="runame" class="errroes"></span> </div>
<div class="col-100">
<input type="text" class=" twidh validate[required, custom[email]]" maxlength="100" placeholder="Your Email Address" name="remail" id="remail" onblur="validateEmail()" />
<span id="runame" class="errroes"></span> </div>
<div class="col-100">
<input type="password" class=" twidh validate[required, minSize[6]]" placeholder="Your Password" name="password" id="rpassword" />
<span class="errroes" id="rpwd"></span> </div>
<div class="col-100">
<input type="text" class=" twidh validate[required, custom[onlyNumber] ,minSize[10],maxSize[10]]" maxlength="10" maxlength="10" placeholder="Enter Mobile Number" name="mobile" id="phone" />
</div>
<div class="col-100">
<div class="text-hea" id="gender">Gender</div>
<div class="twidh">
<div class="names">
<input type="radio" class="radioo" value="M" id="male" name="sex" /> Male </div>
<div class="names">
<input type="radio" class="radioo" value="F" id="female" name="sex" checked="checked" /> Female
</div>
</div>
</div>
</div>
<div class="link" style="text-align:left !important"> By clicking Register, you agree to <strong>Terms of Use</strong> and <strong>Privacy Policy.</strong>
</div>
<div class="col-100">
<div class="col-md-2">
<input type="submit" class="ss1 st" name="register" value="Register Now" />
</div>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
</section>

I found your HTML on your website. The problem is caused by a style position: relative on your .link class. You have applied it on your OR block, just above the form.
You can fix this quite easily by apply another position: relative style on your form element. So it would become like this:
<form action="/sregister.php" method="post" id="register_form" style="
position: relative;
">
I just tested this on your live website, and it works pretty well.

Checked issue on your site. You are using below inline styling.
opacity: 0.87;
position: absolute;
top: 241px;
right: initial;
margin-top: 0px;
display: block;
left: 489.5px;
but in this case "left" is not recognized as already this property is given important in strap.css.
check below code in strap.css
.formError {
left: 30px !important;
}
Now you can update your inline styling as
opacity: 0.87;
position: absolute;
top: 241px;
right: initial;
margin-top: 0px;
display: block;
left: 489.5px !important;
It will work.

Submit Button not disappearing with ng-disabled

I've set up a form with Angular integrated into it. In this form, I want the final submit button to only show up when the form is valid. There are a number of fields, but the only fields that are required are the one's for a user'a name, email-address, and a checkbox. The form recognizes when a required field is invalid, however I can't get the submit button to disappear (and subsequently reappear).
Here's code for reference:
index.html:
<form name="captions" ng-controller="CaptionCtrl>
<div class="current-page">
<div class="pages">
<div class="page active" id="page1">
<img src="images/blank_image.jpg">
<div class="page-form">
<span>“</span>
<input type="text" ng-model="user.caption1" size="130"
placeholder="Enter your caption here.">
<span>”</span>
<br>
<button class="page-form-submit" ng-click="pageShift(2)">NEXT</button> </div>
</div>
<div class="page" id="page2">
<img src="images/blank_image.jpg">
<div class="page-form">
<span>“</span>
<input type="text" ng-model="user.caption2" size="130"
placeholder="Enter your caption here.">
<span>”</span>
<br>
<button class="page-form-submit" ng-click="pageShift(3)">NEXT</button>
</div>
</div>
<div class="page" id="page3">
<img src="images/blank_image.jpg">
<div class="page-form">
<span>“</span>
<input type="text" ng-model="user.caption3" size="130"
placeholder="Enter your caption here.">
<span>”</span>
<br>
<button class="page-form-submit" ng-click="pageShift(4)">NEXT</button>
</div>
</div>
<div class="page" id="page4">
<img src="images/blank_image.jpg">
<div class="page-form-submit-page">
<h4>TO ENTER YOUR CAPTION IN THE CONTEST, TELL US YOUR NAME AND CONTACT METHOD.</h4>
<input type="text" ng-model="user.name" size="70" placeholder="Name" required>
<input type="email" ng-model="user.email" size="70" placeholder="E-mail Address" required>
<br>
<input type="checkbox" required>I have read and accept the Terms & Conditions
<br>
<input class="page-form-submit-page-submit" ng-disabled="captions | validateFields" ng-click="captionSubmit(user)" type="submit" value="SUBMIT">
</div>
</div>
<div class="page" id="page5">
<img src="images/blank_image.jpg">
<div class="page-form-thankyou">
<span><strong>THANK YOU</strong></span>
</div>
<div class="chapter-two-story-link"><span class="yellow">CLICK TO TELL US YOUR STORY</span></div>
</div>
</div>
</div>
</form>
If you notice towards the bottom, I have a ng-disabled set with "captions | validateFields". I've tried this with a simply truthy statement as well so its not the filter I set up.
Edit: With feedback I've gotten what I initially wanted to do working with ng-show. However, ng-disabled would actually be more appropriate for what I want. I've added relevant css.
style.css
.page-form-submit-page-submit {
display: block;
padding: 5px 15px;
border: none;
border-radius: 2px;
margin: 40px 400px 20px auto;
text-align: center;
background-color: #001F45;
color: #FFD200;
}
.page-form-submit-page-submit:active {
background-color: #0250B0;
}
Can anyone explain how to get the submit button to show only after all fields are valid?

Try ng-enabled="captions.$valid" to disable (visible but not clickable) and ng-show="captions.$valid" to hide the button if the form is invalid.
More about forms in angular: https://docs.angularjs.org/api/ng/directive/form

Not tested, but you can use the $valid property of your form like this:
<input class="page-form-submit-page-submit" ng-disabled="!captions.$valid" ng-click="captionSubmit(user)" type="submit" value="SUBMIT">
But if you want the button to disappear completely, use ng-hide="!captions.$valid" instead of the ng-disabled directive

It's fairly easy
hide completly
<input class="page-form-submit-page-submit" ng-if="captions.$valid" ng-click="captionSubmit(user)" type="submit" value="SUBMIT">
visually disable
<input class="page-form-submit-page-submit" ng-disabled="captions.$invalid" ng-click="captionSubmit(user)" type="submit" value="SUBMIT">

Firing click event on click event, touch screen

HTML:
<footer>
<a href="#"><div class="footbut" id="chooseFile" onclick="">
<div class="done2 gradGreen" data-bind="visible: picsCount(objectInRoute())>0">
<div class="typcn typcn-tick indone"></div>
</div>
<div class="typcn typcn-camera bigblack"></div>
<span data-bind='text: pickONE("aside",18)'></span>
</div></a>
</footer>
<form class="uppform" action="upload.php" method="post" enctype="multipart/form-data">
<input type="file" id="file" name="image" data-bind="value: upload"/>
<input type="hidden" name="imageObject" data-bind="value: objectInRoute()"/>
<div data-bind="if: upload()">
<div class="first stripe40 gradGold tGold">
<h1 data-bind="text: pickONE('aside',41)"></h1>
</div>
<input type="submit" data-bind="value: upload" id="submit" class="gradGreen"/>
</div>
</form>
JS:
$('#chooseFile').click(function(){
alert ("here");
$('#file').click();
});
(CSS:
#file {
display: none;
}​
On PC alert works, clicking at #file (=opening choose file) works.
On my touchscreen (android, mobile phone): alert works, but it does NOT open the popup with camera/documents/gallery....
How can I do it to use on touchscreen or is error somewhere else? Thank you!

If anyone would be interested in this particular situation, it seems that this code solves the problem:
#file {
width: 0;
height: 0;
float: left;
visibility: hidden;
}​
Instead of display: none;
I am not really sure, that it will work on all devices, but on my testing one it does.