So i've been at this for hours and havn't figure it out and I know there is an easy solution so I figured I would ask here. I am trying to pass the value of a text area into a link as part of a twitter share button. I think the problem is with global scopes I am able to get the variable from within my external javascript but not from my main php file. For example.
Here is the html:
<div id="share_twitter">
Friends Twitter Username (optional) <input type="text" name="friends_twitter" value="#" />
<script type="text/javascript">
window.document.write('');
</script>
Then I have the Javascript in extenral.js which is suppose to get the value of "friends_twitter" and send it back to the main page which will allow me to make a dynamic link to that persons twitter.
I tried this var friends_twitter_input = $("input[name=friends_twitter]"); but got undefined if i do window.friends_twitter_input = $("input[name=friends_twitter]"); it works a bit better but still not as intended.
I also wrote code to detect key change which works but only if it's placed inside of external.js
I may be going about this all wrong but I can't seem to get it staight. Anyhelp would be great.
Update
I'm getting the error "friends_twitter_input is not defined" in firebug but not sure why
inside custom.js
$(document).ready(function(){
var friends_twitter_input = $("input[name=friends_twitter]").val();
$(".twitter-share-button").click(function() {
var friends_twitter_input = $('input[name=friends_twitter]').val();
});
}
inside index.php
<script type="text/javascript">
window.document.write('');
</script>
I think i need to not write the share link until the input has a value or define the value as null.
Thanks for all the help.
Not quite sure about the structure of all your code but a few things that may help.
To get the value from the input button this is the code you need.
var friends_twitter_input = $("input[name=friends_twitter]").val();
Also make sure that the code that tries to read the value of the input text is executed after the input text is in place.
To execute your javascript after the page load use this:
$(document).ready(function() {
//All your javascript here.
});
To hook up to the oncahnge event of the input text do this (inside the ready handler)
$("input[name=friends_twitter]").onchange(function() {
var friends_twitter_input = $(this).val();
});
Please note that the code in the onchange event is just for demo purposes you should probably want to use onblur or better hook up in the onclick event of the submit button.
Related
I've been working on this issue for days and feel like I'm at a dead end so hoping someone can help out.
I have a form that's used to log calls. The form has two drop downs Reason and Resolution which are created using an array.
When a call is dropped for whatever reason I want the user to click a button called Lost Call and have it fill out the form with specific information.
It works for every field but the Resolution field. I can't get that one to populate.
The lost call button calls a function using onClick.
<Input type="button" value="Lost Call" onClick="LostCall()" />
All my code is HTML5 and JavaScript.
Here is my HTML code:
<select id="Reason"><option value=" "></option></select>
<select id="Resolution"><option value=" "></option></select>
The script I use to create the drop downs I got from here:
http://jsfiddle.net/bdhacker/eRv2W/
Other then changing the Variable names to suit my form and less options the code is the same.
The Question is how can I make it to where someone clicks lost call the form is filled out including the Reason and Resolution with specific values when the Resolution values are dynamically generated?
Here is the script for the Lost Call Button:
function LostCall() {
var Reason = document.getElementById("Reason");
Reason.Value = 'Misc/Other';
var Resolution = document.getElementById("Resolution");
Resolution.Value = 'Lost Call';
Using the above Reason is populated but not Resolution. Also note both Misc/Other and Lost Call are options available in the array I'm using.
EDIT: Updated fiddle.
Hmm, your code is working, as I've tried it in this quick fiddle
Are you simply missing a closing } or was that just a simple mistake when typing this question?
if the value you are assigning in the list of options, try this approach:
function LostCall() {
document.getElementById("Resolution").selectedIndex = "2";
}
check out the following resource (press the "try it yourself" button) : http://www.w3schools.com/jsref/prop_select_selectedindex.asp
-
I am making an order form with a review page.
when order form is fully filled, then it automatically send each data to
each div on the review page. This is what I want.
I know I can copy a data into another div by using javascript like
<script>
function filling() {
var something = $('#input').val();
document.getElementById("divbox").innerHTML = something;
}
</script>
but when it's not a data that can be displayed with text(for example, an image or a video), then how can I send the data into another div?
Thanks to digging really hard the internet, I found an open source contact form with the image attachment function. what's cool about this is, when I attach an image, it resizes and show to client-side.
(http://webreflection.blogspot.kr/2010/12/100-client-side-image-resizing.html)
So, I am modifying this into an order form, and I want, when a client attach an image, it shows to the client the resized version of it, and it also shows in the div on review page.
How can I do this?
getElementbyClassName or Name did not work because of the "auto resizing script"
-
I'm sorry for my english being to poor. and thank you for your patient to have read this last line. Have a nice day.
Few ways:
<script>
function filling() {
var something = $('#source').html(); // Can be some element, like another DIV
$("#divbox").append(something);
}
</script>
Depending on what you need, can also use clone() (https://api.jquery.com/clone/):
function filling(){
$("#source").clone().append("#divbox");
}
Situation
I have a form
<form action="." method="POST" id="my_form">
<!-- Form stuff here -->
</form>
<p onclick="confirmUpdate();">Update</p>
The confirmUpdate() function generates a confirmation message and the following input tag:
<input type="submit" name="my_name" value="Yes. Update the data.">
using the following JavaScript:
inputYes.type = 'submit';
inputYes.name = 'my_name';
inputYes.value = 'Yes. Update the data.';
inputYes.form = 'my_form';
The page is created as intended, but the input element has no form="my_form" on it.
Condition
The HTML generated with Javascript has to be shown as a nice "HTML pop-up" (not an alert box) to ask the user if the info is correct before submitting.
Questions
Why isn't it working?
The JavaScript generated HTML doesn't appear on the Page Source. Will it be able to submit the data from the form?
Thank you in advance.
You should use setAttribute instead:
inputYes.setAttribute('form', 'my_form');
If the goal is to get your input button to work, then inside your method confirmUpdate(), make the following additions/changes:
Updated fiddle here: http://jsfiddle.net/B7QAc/4/
//add this
var theform = document.getElementById('my_form');
//change this
document.body.appendChild(screenDiv);
//to this
theform.appendChild(screenDiv);
While the previous answers were correct, I found a better solution for my problem. I had to update the question in order to make it more clear. The HTML generated with Javascript was intended to show as a nice "pop-up" to ask the user if the info is correct before submitting.
Therefore, the <input> tag has to be outside of the <form> and reference its id="my_form" via a form="my_form attribute.
Here is the updated JSFiddle for it.
While inputYes.form = 'my_form'; doesn't add the form attribute, inputYes.setAttribute('form', 'my_form'); does the job.
Notice though that it only works at the end of the script, only after it is appended to the HTML Document. It would not work otherwise (at least in this script).
Even though I lack the technical knowledge to explain it better, those are my observations.
This would be the accepted answer. I will promptly accept any other answer that is more complete than this one.
So I'm trying to write an interactive form, where clicking a radio button will unhide another field in the form. It is for display purpose, so I'm not submitting anything. I'm attempting to use Javascript to validate, but needless to say, it's not working very well. A run through of my code would be appreciated.
Since it's so much code, I'll pastie it to you for convenience...
http://pastie.org/3615669
Thanks :)
Your code:
function getShrimpa(radio, name, ext){
//Use of form 'shrimpa'.
var form = document.shrimpa;
document.form.name.style.display = 'block'; // <---- this is not valid
document.getElementById('shrimpa').innerHTML = ext;
}
You cannot use the variable name like that. It's a string and it will not get "replaced" or whatever you were hoping would happen. You'll need to use document.getElementsByName(name) to select that element. But that will give you a node list so you probably want to use ids instead there.
I have a webpage. I want to write a javasript function that will make the html page as a huge excel sheet and put a place holder on a particular row and column. Thus on loading the webpage the place holder will be called by the function and a auto click will be made on that particular row and column.
Does anyone know how to code this function?
I can provide the raw script of the webpage if asked.
Thanks.
if foo has a click event then
$('#foo').trigger('click');
will call the event.
If you are just trying to focus on particular control you can just use :
$('#foo').focus();
Use jQuery:
$(document).ready(function(){
$("#ThisMustBeClickedId").trigger('click');
});
Provided you may add jQuery, that you can foresee the id, or otherwise select the cell or what it is..
If you're using jQuery:
$(document).ready(function(){
$('#your-cell-selector').click();
})