Develop Reference

How to call function in another page?

I created a link https://www.sefaz.rs.gov.br/NFE/NFE-CCC.aspx?ErrKey=true&iCodUf=0&lCnpj=00110612000137 To fill the input field CNPJ.
This is fine. However, I need to run the function preencheParametros('CNPJ') together above link.
So, I tried something like this https://www.sefaz.rs.gov.br/NFE/NFE-CCC.aspx?ErrKey=true&iCodUf=0&lCnpj=00110612000137&exec=preencheParametros('CNPJ')
And not worked. How handle this?
First Way: Not Worked
GET method
<form method="post" action="https://www.sefaz.rs.gov.br/NFE/NFE-CCC.aspx?ErrKey=true&iCodUf=0" name="nForm" id="nForm">
<div class="CInput" id="CCnpj">
<input type="text" name="lCnpj" id="lCnpj" value="00110612000137">
</div>
</form>
Result: open new tab, like https://www.sefaz.rs.gov.br/NFE/NFE-CCC.aspx?ErrKey=true&iCodUf=0&lCnpj=00110612000137
Second Way: Not Worked
Read GET method in JS
Input values:
<input type="text" name="lCnpj" id="lCnpj" value="00110612000137">
<input type="button" value="Get Input Values" id="retrieveInputValuesButton" />
<script>
var cnpj = document.getElementById("lCnpj");
var element = document.getElementById("retrieveInputValuesButton");
element.onclick = function() {
window.open("https://www.sefaz.rs.gov.br/NFE/NFE-CCC.aspx?ErrKey=true&iCodUf=0" + cnpj.value + "&exec=preencheParametros('CNPJ')");
};
</script>
Result: open new tab, like https://www.sefaz.rs.gov.br/NFE/NFE-CCC.aspx?ErrKey=true&iCodUf=0&lCnpj=00110612000137&exec=preencheParametros('CNPJ')

I'm sorry, but there is no way to pass in executable instructions to a website like that (unless they specifically provide you a way to do so). That would be a huge security risk if anyone could just inject code.
You could however try cooking something up with a Greasemonkey script.
It's called Greasemonkey for Firefox, or Tapermonkey for Chrome

Run ResponsiveVoice speech on page load

This works properly, it speaks the text area on click, but how can I change it to speak onload?
<script src="http://responsivevoice.org/responsivevoice/responsivevoice.js"></script>
<script src="http://code.jquery.com/jquery-git2.js"></script>
<textarea id="text" cols="45" rows="3"> HHHH</textarea>
<select id="voiceselection"></select>
<input onclick="responsiveVoice.speak($('#text').val(),$('#voiceselection').val());" type="button" value="Play" />
<br>
<button id="isPlaying">Playing:</button>
<p id="r">?</p>
Text area just says four letters now.
I imagine this is the key part, but can not fit it into anything properly to execute:
responsiveVoice.speak($('#text').val(),$('US English Female').val());
I tried:
var voicelist = responsiveVoice.getVoices();
var vselect = $("#voiceselection");
$.each(voicelist, function() {
vselect.append($("<option />").val(this.name).text(this.name));
});
// Yours
$('#isPlaying').on('click', function() {
$('#r').text(window.speechSynthesis.speaking)
})
$(document).ready(function() { //short code: $(function() { ... });
responsiveVoice.speak($('#text').val(), $('US English Female').val());
});
<script src="http://responsivevoice.org/responsivevoice/responsivevoice.js"></script>
<script src="http://code.jquery.com/jquery-git2.js"></script>
<textarea id="text" cols="45" rows="3">It reads this</textarea>
<select id="voiceselection"></select>
<script>
</script>
<input onclick="responsiveVoice.speak($('#text').val(),$('US English Female').val());" type="button" value="Play" />
But I get a "No voice found for: undefined" error.

Hook into the OnVoiceReady handler, then try to speak once the default voice, etc. is loaded:
responsiveVoice.OnVoiceReady = function() {
console.log("speech time?");
responsiveVoice.speak($('#text').val());
};
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="//responsivevoice.org/responsivevoice/responsivevoice.js"></script>
<textarea id="text" cols="45" rows="3">one two three</textarea>

Thanks for using ResponsiveVoice!
You should attach to the OnReady event using this code:
responsiveVoice.addEventListener("OnReady", myInitFunction);
as it's not enough to wait until page load. You need to wait until voices are loaded.
why wont this run on iphone safari?
Apple prevents any speech to be initiated without a user action. So you would need to trigger speak() after a button click, for example.
also why does it stop working after after 4 or 5 refresh after 10
seconds on android broswer?
ResponsiveVoice has some issues on Android devices. We're working on fixing it. We recommend using our latest release which you can find here:
https://code.responsivevoice.org/develop/responsivevoice.js

Don't use inline event handling. Use abstracted events. It makes for easier to understand/read code.
$(document).ready(function() { //short code: $(function() { ... });
responsiveVoice.speak($('#text').val(),$('#voiceselection').val());
});
The document ready event is triggered when the DOM is finished loading.
No jQuery version:
window.onload, using the new ES6 standard arrow function. No jQuery needed!
window.onload = () => {
responsiveVoice.speak(document.getElementById("text").value, document.getElementById("voiceselection").value);
}

According to the official site, the second argument must be a valid voice type, but in your example, the element voiceselection has no values, then the API fails. If you try with the default voice, the API will succeed!
var text = $('#text').val(),
voice = $('#voiceselection').val();
//success
responsiveVoice.speak(text); //HHHH
//fails
responsiveVoice.speak(text, voice); //HHHH, ""
//Uncaught TypeError: Cannot read property 'mappedProfile' of null(…)

Retrieving data from a form loaded with jQuery and passing it to a parent page

I have a 'parent' page that is using the following bit of code to pull in a form from a different page on the same domain. There are reasons why I can't just place the form directly on the 'parent'.
<script type="text/javascript">
jQuery("#ai_temp_profile_edit").load(
"https://example.com/form/ #profile-edit-form",
function() {}
).hide().fadeIn(1000);
</script>
The form that is pulled in looks like this:
<form action="https://example.com/form/" method="post" id="profile-edit-form" class="standard-form base" target="hiddenFrame">
<label for="field_1">Name</label>
<input id="field_1" name="field_1" type="text" value="Joey-Jojo Jr. Shabadoo">
<input type="submit" name="profile-group-edit-submit" id="profile-group-edit-submit" value="Save Changes " />
<input type="hidden" name="field_ids" id="field_ids" value="1" />
<input type="hidden" id="_wpnonce" name="_wpnonce" value="a62f8d5fec" />
<input type="hidden" name="_wp_http_referer" value="/form/" />
</form>
When 'submit' is clicked, https://example.com/form/ is opened in a hidden iframe and the user name gets properly saved. This all works well.
I would like the user name on the currently loaded 'parent' page to update via jquery, so that the user has some immediate visual feedback that the name change has taken place.
My approach has been to try and take the value out of the 'field_1' input when 'submit' has been clicked, and pass that variable onto a div in the parent page with an id of 'display_name'.
$(document).ready(function(){
function nameUpdate(){
$("#profile-group-edit-submit").click(function () {
var updateName = $("#field_1").val();
$("#display_name").text(updateName);
});
}
nameUpdate();
});
I've also tried adding window.parent.
before the the #display_name selector section and it didn't change anything.
I've used this approach on another button/div combo on the same page and it works, the difference is that that particular button is in an iframe, not loaded by jquery. So I'm guessing my problem is related to that fact.
I've googled around, but have run out of ideas of how to phrase my question, what to look for, etc...
Any help would be greatly appreciated. Thanks!
Edit: For clarity, the div w/ id #display_name won't update.

Use jquery to handle the form submission.
$(document).ready(function(){
$('#profile-edit-form').submit(function(){
var updateName = $("#field_1").val();
$("#display_name").text(updateName);
});
});
EDIT:
Due to your loading the form dynamically you need to bind the submit function after the load. So...
$(document).ready(function () {
var formLoaded = function () {
$('#profile-edit-form').submit(function () {
var updateName = $("#field_1").val();
$("#display_name").text(updateName);
});
};
$("#ai_temp_profile_edit").load(
"https://example.com/form/ #profile-edit-form",
formLoaded
).hide().fadeIn(1000);
});

If I am understanding it correctly, your problem is "display_name" field is not getting updated with the latest value.
If this is the problem then can you try below thing?
Instead of
$("#display_name").text(updateName);
try using-
$("#display_name").val(updateName);
As per the documentation on jQuery site Val() works well with form Elements whereas text won't.
More on Val() method- https://api.jquery.com/val/#val2

jquery .click form submit not working in ie8 or below-

im having trouble with a form submit script im using with javascript and jquery- its a form i have loaded into a facebook tab which when submit should pass a variable to another tab.
it works in ie9, chrome, ff and safari but client is stuck on ie 7 and 8. I dont know what the problem is- I have tried replace the button with a div and image incase .click wouldnt overwrite the submit function.
this should be a common problem with fix? or what am i doing thats completely wrong?
<script>
$('document').ready( function(){
$('#my_button').click(function (e) {
//this.form.onsubmit();
var_app = "444444";
url = "http://www.facebook.com/tab/?sk=bladadasd&app_data=" + var_app;
parent.window.location.replace(url);
e.preventDefault();
return false;
});
});
</script>
<form id="submit" method="POST" >
<ul>
<li><span>Photo code <sup class="required">*</sup></span><input id="barcode" name="barcode" type="text"/></li>
<li><span>First name</span><input id="firstName" name="firstName" type="text"/></li>
<li><span>Last name</span><input id="lastName" name="lastName" type="text"/></li>
<li><span>Email address</span><input id="optional_email" name="optional_email" type="text"/></li>
</ul>
<a class="help">Need help?</a>
<input value="" type="submit" id="my_button" />
</form>
edit the form bounces on to the correct page in normal browsers but in ie8 it just submits upon itself going nowhere and displaying the same again

If it is a submit button , then instead you should be working with onsubmit even on that form.
P.S. why is your var_app variable in global scope ?

Try the submit event instead of click event.
$('#my_button').submit(function(event) {
event.preventDefault();
});
You are also missing an action for your form.
I wonder if you should also specify the script type

Declare var_app & url variables.
var var_app = "444444";
var url = "http://www.facebook.com/tab/?sk=bladadasd&app_data=" + var_app;

The error lay with the line
parent.window.location.replace(url);
internet explorer only allowed the following statement and would throw a permission error
parent.location.replace(url);
nothing to do with jquery or my form syntax :( only realised this when i ran the code on a different machine in ie7

How do I use a link instead of the browse button to attach a file?

I have a form like the following:
<form id="submit_idea" name="submit_idea" method="post" action="">
<a class="attach" title="Attach a file" onclick="clickAttachment()"
href="javascript:void(0)">Attach File</a>
<span id="id_filename"/>
<input id="id_attachment" type="file" name="attachment"/>
<input class="submit_btn" type="image" alt="Submit Idea" src="/static/img/submit_idea.png"/>
</form>
And the associated javascript that goes along with it.
function updateAttachment() {
var val = $("#id_attachment").attr("value");
if (val) {
var name = val.split('\\');
$("#id_filename").html(name[name.length - 1]);
}
else {
setTimeout(updateAttachment, 500);
}
}
function clickAttachment() {
jQuery('#id_attachment').click();
setTimeout(updateAttachment, 500);
}
This works great for IE, but does not work at all for FireFox 3.5.1. Is there another way to get the same result in FF 3.5.1 or later with just using dhtml/javascript (no Flash, etc.)?
We can use CSS to dress up the "Attach File" link, but we can't change the layout of the browse button FireFox puts up for the form. The IE solution lets us via a proxy click the button to browse for a file, but that does not work under FireFox.
Thanks in advance, -peter

Here's what you're looking for, I believe
Styling an input type="file"