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 do i make the width of the label on free contact form wider?

I got a form for a website from freecontactform.com how do I make it so that their is more space by Full Name: and all the rest of the fields as I have edited it and made my own custom fields, but it goes onto the next line when it is too long so it would look like this:
(more text) Full N
ame:
the code is here for the html
<tr>
<td valign="top">
<label for="Full_Name" class="required">Full Name<span class="required_star"> * </span></label>
</td>
<td valign="top">
<input type="text" name="Full_Name" id="Full_Name" maxlength="80" style="width:230px">
</td>
</tr>
please note I have spent over an hour trying to google and work out how to do this

Provided no widths are set on the label or the table cell, you could use
/*obviously you can use any selector here that gets the job done*/
label
{
white-space: nowrap;
}
Or simply put a non-breaking space ( ) in the text:
<label for="Full_Name" class="required">Full Name<span class="required_star"> *</span></label>
That is essentially what nowrap does, is converts all the spaces to be non-breaking.
Obviously if the width is restricted for the label or the table cell you may need to adjust those.
For reference:
nowrap Sequences of whitespace will collapse into a single whitespace. Text will never wrap to the next line. The text continues on the same line until a <br> tag is encountered
https://www.w3schools.com/cssref/pr_text_white-space.asp
Personally I would go the CSS route, it's a bit cleaner and easier to read then putting all over the place.
Enjoy.

Update background color jquery input inside td tag

I have a table with tr that have this pattern
<tr>
<td width="37" align="left"></td>
<td width="200" align="left">
<input type="submit" name="s1" onclick="ChangeThis(this);" value="Update Color" id="s1" class="btn-blue">
<input name="info1" type="text" maxlength="6" id="info1" style="color:Red;background-color:#FFFFFF;font-weight:normal;width:90px;">
</td>
<td width="340" align="center">
<input name="extra1" type="text" maxlength="200" id="extra1" style="width:330px;">
</td>
<td class="hide"></td>
</tr>
What I want to do is onclick on this button which will have the same sequence matching the input example button id=s1 input id =info1
I want to change the background color. I prefer jquery or javascript is fine. I thought about the regex with starting with .. ^ ..
function ChangeThis(x) {
$(this).closest('td').find('input[type="text"]').css('backgroundColor', 'Yellow');
}
That doesn't work, I tried tr instead of td
UPDATE/EDIT
So Essentially what I want is that When the button is clicked that there are predefined things to change in the text
Font Color
Bold or not
Background Color

UPDATE
Ok, I think I understand what you'd like.
Let me know if this fiddle solves it:
https://jsfiddle.net/14ymd0pd/
Based on your description, I'm a little confused as to what you'd like.
I've created a JSFiddle with what I think is the intended functionality.
https://jsfiddle.net/tvu08yrm/
The main differences involved separating out the JavaScript, using the jQuery on event handler:
$('.color-btn').on('click', function(){
adding a new class (color-btn) so the buttons could be targetted and changing the functions which trraverse the DOM Elements.
A couple of notes:
You should not be using inline JavaScript. I've separated out the JavaScript in my fiddle.
Since I can only see a small section of code it's hard for me to say, but if the page isn't going to be displaying tabular data then don't display it in a table...use a div or ul or another relevant element, just not a table.
I haven't done it in my fiddle, but you should also move the inline css out of the markup and into an external css file.
The JavaScript is dependant on the structure of the table, if you change its structure you'll also need to update the jQuery selectors. This can be avoided by following a naming convention in the table rows and using these to target the appropriate elements instead of their relative positions.
Let me know if the fiddle answered your question :)

There are many solutions to get your code working.
First solution: use x instead of this inside the function
pro: code works
contra: bad coding style and you should not use inline javascript.
Second solution: change onclick="changeThis(this)" to onclick="changeThis.call(this)"
pro: the code works, and you can use this in function context
contra: you use this in function context... there are only a few situation to do that. this is not such a situation. and again: inline-javascript
Third solution: don't use onclick.
<tr>
<td width="37" align="left"></td>
<td width="200" align="left">
<input type="submit" name="s1" value="Update Color" id="s1" class="btn-blue">
<input name="info1" type="text" maxlength="6" id="info1" style="color:Red;background-color:#FFFFFF;font-weight:normal;width:90px;">
</td>
<td width="340" align="center">
<input name="extra1" type="text" maxlength="200" id="extra1" style="width:330px;">
</td>
<td class="hide"></td>
</tr>
$('input:submit[name="s1"]/* or a different selector... depends on your logic */').click(changeThis);
you should use the third one.

jQuery's $(form).submit() not firing for IE only (MVC3 app)

I've been scouring the internet (including SO), and I can't find anything to help me out with my situation, so hopefully I can get some help from you guys.
Basically, like the title says, the .submit() is NOT firing in IE. All other browsers work fine, but in IE (8, 9, 10 so far) it just doesn't fire the submit.
Here's the view code:
<form id="#formId" method="post" enctype="multipart/form-data" action="#Url.Content("/ActivityEvent/SubmitCheckpointApproval")">
<table id="checkpoint-approval" style="width:100%" align="center" class="noBorders">
<tr>
<td style="width: 520px;">
<div>
Please enter any relevant comments:
</div>
<div style="margin: 10px 0;">
<textarea class="wysiwygSimple" rows="4" cols="60" name="comment" id="checkpoint-comment-#(actTplId)"></textarea>
</div>
</td>
<td style="border: 0; padding-top: 30px; text-align: center; width:70px;">
<img alt="key" src="/Content/Images/checkmarkInCircle.png" align="middle" style="width: 100px;
height: 100px;" /><br />
<p style="text-align: left; margin-top: 10px;">
The notes and resources entered here are shared with the student.</p>
</td>
</tr>
<tr>
<td colspan="2" class="ResourcesUploadList">
Suggest some resources:<br />
<div style="float: left;">
<input class="Multi" type="file" name="resourceFiles[]" /></div>
<div style="float: left; margin-left: 10px; font-style: italic;">
(click browse for each file you want to upload)</div>
<div style="clear: both;">
</div>
</td>
</tr>
<tr>
<td style="border: 0; text-align: center; width:600px;" colspan="2">
#if (hasAdminRights)
{
<input type="button" #Html.Raw(btnStyle) class="activityApprove" name="actionApprove" id="actionApprove" value="Tutor Completion Approval" title = "Approves all activities preceding this checkpoint as complete." onclick="Activity.submitCheckpointApproval('#(formId)', '#(ActivityEvent.EVENT_TYPE_APPROVED)',#(actTplId));" />
<input type="button" #Html.Raw(btnStyle) class="activityAttention" name="actionAttention" id="actionAttention" value="Needs Attention" title = "Notifies the student that this project needs additional work prior to completion." onclick="Activity.submitCheckpointApproval('#(formId)', '#(ActivityEvent.EVENT_TYPE_NEEDS_ATTENTION)',#(actTplId));" />
}
<input type="button" #Html.Raw(btnStyle) value="Cancel" title = "Close this." onclick="javascript:$('#checkpoint-approval#(actTplId)').toggle();" />
</td>
</tr>
</table>
</form>
When the buttons are clicked:
Activity = {
submitCheckpointApproval: function (formId, activityEventStatusId, activityTemplateId) {
var resultsDivId = $("#checkpointResults" + activityTemplateId);
Activity.showCheckpointLoading(resultsDivId); //Just shows a spinner for loading
$("#checkpoint-activityEventStatusId-" + activityTemplateId).val(activityEventStatusId);
$("#" + formId).submit(); //PROBLEM IS HERE??
},
...
};
And finally, the controller:
[HttpPost]
[ValidateInput(false)]
public ActionResult SubmitCheckpointApproval()
//Save everything in here
}
When debugging in IE, I get to the .submit() line in the js, and run it from there. Everything before that works just fine, but then the .submit() comes and it stops doing anything. No javascript errors, nothing in the console, no indication of any issues at all.
In all other browsers, the .submit() fires just fine, and the controller breaks into the method being called.
Any thoughts as to why this is happening in IE? I'm sure someone has come across this before!! Please help, I've been banging my head off my desk all afternoon!
Thanks guys!

I had a similar error. My solution was:
Append the JS form to a div in the DOM, that way IE knows it is there and can submit it.
Hope it helps

You might be best suited to try using the $.trigger() function in jQuery.
Invoke it similarly to the way you are calling .submit():
$('#' + formId).trigger('submit');
Good luck!
Also
There is a bug in IE where the form will not submit properly if there is no
<input type="submit" value="Submit" /> element.
Try adding one and hiding it with CSS.

You can create an input submit inside the form that you like to send and by Jquery click on the button.
It´s works well with IE.
For example:
<form id="#formId" method="post" enctype="multipart/form-data" action="#Url.Content("/ActivityEvent/SubmitCheckpointApproval")">
<input type="submit" class="HiddenBtn" />
</form>
And the JS:
$(".HiddenBtn").click();

Can you please tell me that you are directly working with fileupload control or its hidden and you are triggering/invoking it on another button controls?
Actually I had same issue. My client wanted that we display a fancy button to work as fileupload control. So we added a button and fileupload control with visibility false and on button click we were triggering the fileupload click event and with the help of jquery we were getting the path of the file and saving it in database. Everything was working perfect in every browser except IE as form was not getting submitted in IE like you explained. After working really hard we find the solution and solution was that we showed the fileupload control and placed it exactly on top the button by setting its position and applied the css opacity :0. So now file upload is not visible because of opacity 0 but when user clicks on the fancy button actually he/she clicks on fileupload as its placed on the top of button.
After this solution its working like a charm in every browser. Hope this help you also.

you need to set type of button/input to submit as follow:
<button type="submit">Submit</button>
<input type="submit" value="submit">Submit</button>

I had the same problem, only in IE 10 and IE 11. For me the solution was to append the form first with following code:
document.documentElement.appendChild(form);
I put that line right before the submit function
form.on("submit", function (event) {
event.preventDefault();
...more code
)}

The exact problem with IE11, at least my build, cause with MS "you never know nothing" if you allow me the street-wise talk.
Is, that when you create a form element like this
var formX = $(document.createElement('form'));
And eventually add some fields like this
field1=$("<input type='hidden' id='myid' name='myid' value='whatever' />");
formX.append(field1);
The element is not really added to the DOM, it remains in some developer purgatory, waiting for you to finally add it to the DOM
$("#formdiv").append(formX);
As Arturo Igualada commented above, you can add it to some div in your HTML, in my example id formdiv
On top of that, the element will not be found in the DOM even after adding it by appending the dynamic form to some DIV. At least if you use JQuery, as regular selectors will look for elements that were present in the DOM when you loaded the page. So you will need to use some sort of selection that will traverse the DOM again in search of newly added elements. I used find, although I guess that using .on should work too.
$(document).find(formX).submit();

Why customized radio buttons are not getting disabled?

I am using this plugin to customize check boxes and radio buttons on a page.
These radio buttons are in a div#Main element which comprise of some other HTML elements also. I need to disable everything in this div on a button click (I am using jQuery). For this I have the following code,
HTML
<input type="button" id="DisableElements" value="Disable elements" />
<div id="Main">
<input type="radio" class="styled" name="reg-all"/>
<input type="radio" class="styled" name="reg-all"/>
<select id="MyList">
<option value="1">Choice-1</option>
<option value="2">Choice-2</option>
</select>
<textarea id="Comments" rows="4" cols="5"></textarea>
</div>
Script
$(function(){
$('#DisableElements').click(function(){
$('#Main').find('*').attr('disabled', 'disabled');
});
});
Issue: Everything got disabled correctly except the radio buttons.
Behind the scenes, the plugin script hides the actual radio button and
put a span over the radio buttons like a blanket. This span has
got a background image sprite with different states (on and off) which
gets updated accordingly on radio button selection. This was the
working of this plugin.
I could have used the inbuilt method of the plugin to disable/destroy the functionality but I did not find any method for this.

images loads with little delay after the DOM has finished loading,
so you can try calling your function in $(window).load().
hope it will help.

The solution i made can be thought of as a patch but works nice (for my scenario at least). What should have been the right approach for this would be using some existing API method to reflect the change, something like disable() or similar but i did not find such method or something like this.
Solution: Making the radio buttons appear like disable (non clickable).
Because i do not want to dig into the plugin js file. For this i made a transparent div with some width and height enough to cover the radio buttons and place it over them like a layer between radio buttons and cursor. This div is hidden by default and show this while making controls disable. keeping it short and sweet, here are the code changes.
HTML
<input type="button" id="DisableElements" value="Disable elements" />
<div id="Main">
<div id="Blanket"></div>
<input type="radio" class="styled" name="reg-all"/>
<input type="radio" class="styled" name="reg-all"/>
<select id="MyList">
<option value="1">Choice-1</option>
<option value="2">Choice-2</option>
</select>
<textarea id="Comments" rows="4" cols="5"></textarea>
</div>
CSS - for blanket div
#Blanket
{
position:absolute; /*Imp: otherwise it will disturb the UI*/
width:100px;
height:100px;
display:none;
/* top/left adjustments, if required! */
}
Script
$(function(){
$('#DisableElements').click(function(){
$('#Blanket').show();
$('#Main').find('*').attr('disabled', 'disabled');
});
});
This solution however needed to drop the fear of what if someone using developer tools to out smart the application but that does not matter any way. Besides, you can-not 100% block the user from using such tools.
Another solution which worked and looks more appropriate: Placing invisible blanket over input controls sounds like a patch and can be easily snapped. The plugin script adds a CSS class named styled and requires to add following styles to achieve customized look and feel.
input.styled
{
display: none; // hides the parent input element
}
Because of this, even if we switch button states to disable, the changes did not reflect because the parent element was hidden making the other listeners difficult to attach. By changing the styles to following, everything worked.
input.styled
{
position: absolute;
opacity: 0;
}
It makes the parent input element invisible but completely active on DOM behind the scenes.