Onclick fill form fields in third party form iframe - javascript

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.

Related

How to select a hidden submit button

If a website that has a property to hide a form, how could I be able to press submit? This form has a hidden submit button, but if certain parameters are not correct, it automatically hides this form.
I can see it for a split second until it goes white. I tried firefox inspect element, and it's there, but is there a way to press submit while hidden? I tried pressing tab and hopefully selecting it, but it won't do it.
I'm sure there is a way to basically "push" the submit button while hidden.
Thanks
In jQuery that would be
$("name_of_form).submit();
In vanilla Javascript it should be
document.getElementById(id).submit();
or
document.forms.form_name.submit();
Of course, to retrieve the name you'd open up the browser's dev tool, there's usually an arrow you can click to find the element on the page, or just read the html and find it, and then you'll know the name of the form. This is also where you'll run the command.
Here's an example:
<form action="/weather/searchauto" method="POST" id="latlongForm">
<input id="lat" name="lat" type="hidden" value="">
<input id="long" name="long" type="hidden" value="">
</form>
So in this case the name is "latlongForm", so you can type in the console:
document.forms.latlongForm.submit()
See if that works!

Can you split one typeform in two pages?

I'm implementing a typeform and I want to customize it a bit. I want the users to submit their emailadress on the homepage and complete the other questions on another detail page. I'm passing the emailadress via the url right now, but I can't send it to the TypeForm iframe. Anyone who has done this before?
<form class="form-inline" action="join.html" method="GET">
<div class="form-group">
<input type="text" class="form-control" id="exampleInputEmail2" placeholder="angel.investor#example.com" name="email">
</div>
<input type="submit" class="btn btn-default reverse" value="Join now!"></input>
</form>
My url is something like this: somethinglikethis.com/join.html?email=john.doe#something.com
And jQuery on join.html:
$("div.typeform-widget div.input input[type='text']").val(window.location.search);
$('iframe').css('display', 'none');
I tried a lot of other things as well, but I can't make it work...
So the idea is, Set the email in the JavaScript variable, And then access the variable from within the iframe and set it to an hidden field of the iframe.
To save the variable into JavaScript global scope do this.
$('form[action="join.html"]').on('submit',function(){
window.ClientEmailId = $('#exampleInputEmail2').val();
//save the email id into a variable in the window scope (global scope)
});
Then inside your iframe you can extract the value like below,
var emailId = parent.window.ClientEmailId;
// you can save to any hidden input and use this value further
You need to start from the iframe parent, that would be the main window and then access the value from there.
NOTE: This will work if both iframe and your main page are under the same domain.
let me know if this helps

Can't assign a new value to my autocomplete box

I've created a search page that can be toggled between french and english. So when the user searches a record and toggles to french it displays the same record they were viewing on the english page.
What I want to do is display the record name in the search box when the page is toggled.I assumed it was as simple as doing a $('#inputID').val(record); but it doesn't seem to be working. I've alerted the record name and it works fine, so I'm stumped. All the scripts are linked correctly as well so that's not the problem.
Autocomplete Box Code
<div id="ui-widgit">
<label for="searchParams">
<h1>Search All Programs (By Screen Number or By Error Code):</h1>
</label>
<input type="text" id="inputID" name="inputID" value="" class="ipt_Design" style="width:255px;" />
<input type="button" value="Search" name="searchBtn" class="btn_Design" onclick="showSearch(inputID.value)"/>
</div>
Try to change the value of inputID with this
$('#inputID').val(recordToggle);
also have tried this:
$('#inputID input').val(recordToggle);
It is hard to tell with your presented markup but I am assuming you are trying to change the value of $('#inputID') after the page refreshed. It is important where you put this code. If it is placed before <input type="text" id="inputID" name="inputID" value="" class="ipt_Design" style="width:255px;" /> you will not return anything with $('#inputID') so you will change the value of nothing to your text. It will give no error. To fix this you can use:
$( document ).ready(function(){
$('#inputID').val(recordToggle);
});
Be sure to read about jQuery's ready function because load may be the better choice.
If this doesn't fix your problem let me know. I will update my answer.

Javascript/jQuery Change variable of checkbox

I have a webpage that I want to connect though an IFRAME. There is a checkbox on the page which I need to change the value of.
My IFRAME is connecting to:
<iframe id="intranet" src="http://webmail.ucn.dk" width="100%" height="90%"></iframe>
Here's the checkbox:
<input id="chkBsc" name="chkBsc" type="checkbox" class="rdo" onclick="clkBsc()" value="1" disabled="">
This one as well...
<input id="chkBsc" name="chkBsc" type="checkbox" class="rdo" onclick="clkBsc()" value="1" enabled="">
I'm really stuck with this problem, I hope someone can guide me through to solve it.
I read somewhere on the internet that Ii can change the variable with a jQuery but I couldn't find an answer.

Javascript Form Input Retrieval

Why is it that in a form that contains a Text Box and a Submit Button, I can Alert what has been typed in the text box by the user, but can't print it on the page? What am I doing wrong?
Here's the code
<form name="Serb" action="" method="get">
<input name="Name" type="text" size="15" maxlength="20" />
<input name="Join" type="submit" value="Join" onClick="serb(this.form)" />
<script type="text/javascript">
function serb(form){
var x = document.Serb.Name.value;
alert(x); \\this alerts
document.write(x); \\this should print on page
}
</script>
For some reason, the alert works fine and displays exactly what the user typed in the username box after pressing 'Join'. However, it won't print the information on the page. Why is that?
It does work. The value in the textbox is printed on the page.
BUT:
\\ do not mean anything in Javascript. Comments begin with //. This is most likely the reason why you are not seeing the value being written
document.write replaces whatever is in the HTML page with its argument. (If it is called after the document is loaded). So unless you are trying to learn Javascript this is not a very good idea.
Actually it is not a very good idea to use it even when learning Javascript, unless you are trying to learn how document.write works.
There are flexible (and better) ways to manipulate the content of a page, starting from the humble getElementById to complex DOM manipulation
It is not a good idea to use document.write() after the page has been loaded/parsed. At that point, it will overwrite the page HTML with new content. document.write() is generally used while the page is being loaded to insert content at a particular point into the page as it's being loaded.
If you want to put the value into some item on the page, then you need to use appropriate DOM methods for that, putting the value into an input field, setting the innerHTML on a div, etc...
You can read about document.write here: https://developer.mozilla.org/en/document.write.
Here's an example of fetching the value from the field and putting it in another object on the page without using document.write(): http://jsfiddle.net/jfriend00/dU8Sr/.
HTML:
<form name="Serb" action="" method="get">
<input name="Name" type="text" size="15" maxlength="20" />
<input name="Join" type="button" value="Join" onClick="serb(this.form)" />
</form>
<br>
<br>Output: <span id="output"></span>
Javascript:
function serb(form) {
var x = document.Serb.Name.value;
document.getElementById("output").innerHTML = x;
}

Categories