We Keep Coding

Onclick fill form fields in third party form iframe

since last two days i've been trying to achieve to auto fill fields in third party form in iframe exactly like this
$("#btn1").click(function() {
$("#test1").val("10");
$("#test2").val("1.5");
$("#test3").val("1000");
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<p>Formula 1:
<input type="text" id="test1" value="">
</p>
<p>Formula 2:
<input type="text" id="test2" value="">
</p>
<p>Formula 3:
<input type="text" id="test3" value="">
</p>
<p>What the answers to these formulas?</p>
<br>
<button id="btn1">Hint</button>
I have gone through so many tutes that i even forgot where i had started.
I have gone through this solution but it is not what exactly i want.
Another similar solution is here Fill input field inside an iframe when link outside of iframe is clicked
but the user is using her/his own javascript as jquery.postmessage.min.js
Any idea about how to achieve this?

You can access the inner HTML of an iframe using something like this
document.querySelector('iframe').contentWindow.window.document.querySelector('Tag you wanna select')
You might encounter this error blocked a frame of origin null from accessing a cross-origin frame . A fix to this is already answered here.
While this might just selected the select the element in the iframe, I'm still unsure if you can actually fill the form in the iframe.
Edit- Just tried it, you actually can alter the innerHTML of frame this way. Hope this helps.

how to add/remove change 'disabled' or 'checked' attribute using angular.js

I was looking to toggle a switch(also disable) using check box,and I came across html attributes checked/enabled, it works fine if I type it into the code it works well, but I am not able to figure out is how to control it dynamically using angularjs. I tried the code below for disabling I used
<input type="checkbox" value={{light.status}} ng-click="toggle(light.status)" enabled />
for checked I used,
<input type="checkbox" value={{light.status}} ng-click="toggle(light.status)" checked/>
I tried
<input type="checkbox" value={{light.status}} ng-click="toggle(light.status)" {{status}}/>
angular part of the same
function toggelingtype(type){
if(type==1}$scope.status="checked";
if(type==2) $scope.status="";
if(type==3)$scope.status="disabled;
this function is called when some http request I received

Simply use attributes like ng-checked and ng-disabled
<input type="checkbox" ng-checked="light.checked" ng-disabled="light.disabled" />
EDIT: Alternative
<input type="checkbox" ng-model="light.status" ng-disabled="!light.status" />
Now if you set light.status = false;, the checkbox will be both unchecked and disabled.
Hope it helps.

JQuery Checkbox list problem in IE? Values saved as on,on,on should be 10,12,13 etc

I've a list of checkboxes that get rendered out using javascript.
<input type="checkbox" name="sportType" id="sportType11" value="11" />Golf
<input type="checkbox" name="sportType" id="sportType12" value="12" />Tennis
<input type="checkbox" name="sportType" id="sportType13" value="13" />Football
<input type="checkbox" name="sportType" id="sportType14" value="14" />Cricket
On submitting the form I can pickup the selected values in ASP.NET by using:
Request.Form["sportType"]
In firefox this works and returns something like 11,12,13,14 (Assuming all are checked)
In IE however it returns on,on,on,on
Has anyone encountered this before and hopefully solved it?
Thanks
Having dug a little deeper I've discoved that in IE Jquery render the input box like so:
<input propdescname="sportType" id="sportType11" type="checkbox" jQuery1288622120804="10" value="on"/>
Which give explains the on,on,on value thats been retured? Can anyone shed any light on how to correct this, I assume jquery does this so it can consistantly keep track of selected checkboxes.
Thanks
Kevin
Solved, kind of
Value of jQuery generated checkbox in IE8 is stored as "on" rather than actual value?

Try changing the name to name="sportType[]" and see what happens, what I would do in PHP at least.

How to make .focus() work on a radio button array?

I am trying to get the .focus() working in IE, it works in chrome etc. My form is called:
<form name="feedbackform" action="feedback.asp" target="_self" onsubmit="return
validate_txt(this)" method="post" style="margin: 0;">
my radio buttons:
<input type="radio" name="fb_commentype" value="Comment" />Comment
<input type="radio" name="fb_commentype" value="Complaint" />Complaint
<input type="radio" name="fb_commentype" value="Request" />Request
in my javascript I am trying to call using this line:
document.forms["feedbackform"].elements["fb_commentype"][0].focus();
As I said, it works in chrome, firefox blah blah blah but in IE 8 I am getting nada, zip and I don't know why, nor can I find a satisfactory answer, is there a way around it?

<input type="radio" name="fb_commentype" value="Comment" />Comment
<input type="radio" name="fb_commentype" value="Complaint" />Complaint
<input type="radio" name="fb_commentype" value="Request" />Request
Simple, look at your radio button as an array, you can focus any radio button of the array by pointing to the right index, see below.
document.getElementsByName('fb_commentype')[0].focus();
that way the "Comment" radio button will be focused...
Happy coding!!

Are you calling focus when the page just loads (e.g. body's onload)?
This thread might help - it may get called in your code before DOM finished loading
Also, this page has a good test for focus() behavior:
http://hardlikesoftware.com/projects/IE8FocusTest.html

This might be that IE does not understand the .[0].focus() syntax. You may want to try something like this:
document.forms["feedbackform"].elements["fb_commentype"][0].focus();
document.forms["feedbackform"].elements["fb_commentype"].focus();

In javascript how do I refer to this.form.checkbox[5].checked?

I have a series of checkboxes and input type="text" areas, wherein I need to have the state of the checkbox set to true when the value in the text area changes. Simple enough. I've done this successfully:
<input name="fixed" type="checkbox">
<input name="stuff" type="text" onchange="this.form.fixed.checked=true">
Which works fine. You have to edit the field then click out of it, but that is fine for my needs:
...but when I switch to this:
<input name="fixed[0]" type="checkbox">
<input name="stuff" type="text" onchange="this.form.fixed[0].checked=true">
<input name="fixed[1]" type="checkbox">
<input name="stuff" type="text" onchange="this.form.fixed[1].checked=true">
I get no change to my checkboxes when I edit:
My only javascript know-how comes from googling this sort of thing, I'm afraid. Anyone have any better info on this than the Oracle of Google on The Mountain has in store?
thanks...

Switch from dot notation to bracket notation!
this.form['fixed[0]'].checked

It might be that you're mixing some shady practices in HTML, and when you do it in javascript, they're breaking.
So this.form.fixed[1] in javascript really says "The second item in the array this.form.fixed. So I think that's the problem. try naming your elements fixed0 and fixed1 and see if that works.
Edit: You could also use bracket notation, as illustrated by Peter, which should solve the problem without editing the names of the inputs.

Make life easier on yourself.
Create unique ID's for the elements you are trying to reference and refer to them from the elements to which you bind your events:
<input name="fixed[0]" type="checkbox" id="fixed_0">
<input name="stuff" type="text" onchange="document.getElementById('fixed_0').checked=true">
<input name="fixed[1]" type="checkbox" id="fixed_1">
<input name="stuff" type="text" onchange="document.getElementById('fixed_1').checked=true">