javascript link not working - javascript

This is driving me a bit nutty. Javascript link should fire function to fill in div. But not working.
js
function showNotes(notes,id) {
var notes = '<form action="editnotes.php" method="post"><textarea>'+notes+'</textarea><input type="hidden" name="id" value="'+id+'"><input type="submit" name="submit" value="Save Notes"></form>';
var target = 'notebox';
alert(id);
document.getElementById(target).innerHTML = notes;
return false;
}
html
<a href='#' onclick='showNotes('hi there','143');'><small>Show Notes</small></a>
<div id="notebox"></div>

Enclose the onclick attribute value in double quotes, so the single quotes specify a string within your string.
onclick="showNotes('hi there','143');"
http://jsfiddle.net/77CKx/

Shredder got to the heart of the issue. You have nested quotes. However, inline JS is so not cool. Do it with script and the problem goes away. http://robertnyman.com/2008/11/20/why-inline-css-and-javascript-code-is-such-a-bad-thing/
HTML
<small>Show Notes</small>
JS
document.getElementById('shownotes').onclick = function() {
showNotes('hi there', '143');
return false;
}

It seems like you are breaking the onclick by using the single apostrophe for your function arguments.
Try
<small>Show Notes</small>

Working code:
showNotes = function (notes,id) {
var notes = '<form action="editnotes.php" method="post"><textarea>'+notes+'</textarea><input type="hidden" name="id" value="'+id+'"><input type="submit" name="submit" value="Save Notes"></form>';
var target = 'notebox';
alert(id);
document.getElementById(target).innerHTML = notes;
return false;
}​
<small>Show Notes</small>
<div id="notebox"></div>​
You can also view it working here:
http://jsfiddle.net/ZMZGk/13/

Related

Can't enable disabled submit with JS Ajax (submit echoed by php)

I've tried everything:
document.getElementById('buy').setAttribute('disabled','false');
document.getElementById('buy').setAttribute('disabled',false);
document.getElementById('buy').removeAttribute('disabled');
document.getElementById('buy').disabled=false;
The input submit is has previously been echoed by php:
if (empty($basketproductos)) {
echo "<input type='submit' name='buy' value='Buy' disabled='disabled' id='buy'/>";
}
Also tried with disabled='true' instead of disabled='disabled'.
If you want to disable the button, you should set true for disable property.
document.getElementById('buy').disabled = true;
And like #Titus said (on the comment), make sure the element is added to the DOM before you execute a statement.
Maybe your js is executed before the html, this should work:
document.addEventListener('DOMContentLoaded', function(){
var buyButton = document.getElementById('buy');
buyButton.disabled = false; //or true
}, false);
or
<form action="">
<input type='submit' name='buy' value='Buy' disabled='false' id='buy'/>
</form>
<script>
var buyButton = document.getElementById('buy');
buyButton.disabled = false; //or true
</script>
Functional example here: https://jsfiddle.net/cfcdh99n/

Javascript output as value of hidden input

How can I set the ouput of this javascript function as the value for a hidden input on a html form?
document.write(states[i][1]);
works fine but I cannot get it to fill in the value with the code as shown below.
if (to == 'abbr'){
input = input.replace(/\w\S*/g, function(txt){return
txt.charAt(0).toUpperCase() + txt.substr(1).toLowerCase();});
for(i = 0; i < states.length; i++){
if(states[i][0] == input){
document.getElementById("sid").value = (states[i][1]);
}
}
}
}
</script>
<form action="we2.php" method="post">
<input type="text" id="sid" name="s1"/>
<input type="submit" value="Verify">
</form>
What is wrong with this code / what is the right way to do this?
Thanks!
This should do it.
HTML:
<input type="hidden" id="HiddenInput" />
JavaScript:
document.getElementById("HiddenInput").value = someFunction();
Have you checked if states[i][0] == input evaluates to true?
Write JavaScript code after html code end in your page or at the end of page.
I found a easier solution by just turning the entire function into a variable then the variable into the DOM:
var response = abbrState('<?php echo $_GET['state']; ?>', 'abbr');
document.getElementById("sid").value = response;
The following should work.
HTML:
<div style="display:none" id="example"></div>
Javascript:
function addTextNode(text) {
var newtext = document.createTextNode(text),
element = document.getElementById('example');
element.appendChild(newtext);
}
function yourFunctionDataHere(){
return 'test1234';
}
addTextNode(yourFunctionDataHere());
Just make sure, that the return type of your function is of type string. If you want to see the output simply remove the style="display:none" from the div in the above example.
Try it online on jsfiddle.

adding an input value and submitting the form on load

I have the following form:
<form action="http://example.co.uk/order" method="post" id="voucher" class="AVAST_PAM_nonloginform">
<fieldset>
<h4>Vouchers</h4>
<input type="text" class="discount_name form-control" id="discount_name" name="discount_name" value="">
<input type="hidden" name="submitDiscount">
<button type="submit" name="submitAddDiscount" class="button btn btn-default button-small"><span>OK</span></button>
</fieldset>
</form>
and am using the following script:
<script>
window.onload = function(){
document.getElementById(\"discount_name\").value = \"50681\";
}
</script>
to populate the input. I then use:
<script>
window.onload = function(){
document.forms['voucher'].submit();
}
</script>
to activate the submit.
However, use the second script, it stops the "50681" from being inputted into the text box (instead submits a blank input).
Originally I had the code as :
<script>
window.onload = function(){
document.getElementById(\"discount_name\").value = \"50681\";
document.forms['voucher'].submit();
}
</script>
(I split it up thinking it may be a timing issue).
Any ideas?
p.s. the reason for the backslash's is due to it currently being run under php until I can get it working
The issue seems to be with (\"discount_name\").value = \"50681\"; & document.forms['voucher'].submit();
In either of the case you can avoid \ & for form you need to target by the index number. Assuming there is only one form present , so passing 0 in index
window.onload = function(){
document.getElementById("discount_name").value = "50681";
document.forms[0].submit();
}
Note: In the demo I have changed the action url to https else it will prohibit to make call from jsfiddle. In your case you can still keep http in code
DEMO USING ID

Generating search links using text input in javascript

Im trying to make a website which makes searches easy for me.
I want to be able to write any text in a text box, and make a java script generate the appropriate links.
Ive been trying this:
function prepare_link() {
var url_param = document.getElementById('url_param');
var target_link = document.getElementById('target_link');
if ( ! url_param.value ) {
return false;
}
target_link.href = target_link.href + escape(url_param.value);
}
<input type="text" name="url_param" id="url_param" onkeypress='prepare_link()' onKeyUp='prepare_link()' />
<input type="button" onclick="prepare_link();" value="Generate" /><br>
Google<br>
Bing
For some reason the search string is repeated, but i would like it to update links for each keypress and not just when i hit the generate button.
Moreover the second links isn't being updated :(
Any ideas? :)
Please have a look of the following code snippet, hope this will help to resolve your Issue.
In the following snippet you will not get the repeated values. Also, it will work with 'keyup' and 'click' event :
var google = "https://www.google.dk/search?q=";
function prepare_link() {
var target_link = document.getElementById('target_link');
target_link.href = google + escape(url_param.value);
alert(target_link.href);
}
void function () {
document.addEventListener("keyup", function(e) {
prepare_link();
e.preventDefault();
});
var click = document.getElementById("target_link");
click.addEventListener("click", function() {
document.dispatchEvent(keyEvent);
});
}();
<input type="text" name="url_param" id="url_param" value=""/>
<input type="button" value="Generate" onclick="prepare_link();" /><br>
Google<br>
Thanks :)

Javascript Form Submit Failure

I have code on my website that isn't working, and I haven't been able to figure out why...
Here is the code:
if (self.location.href == top.location.href) {
document.fastform.submit();
document.getElementById(fastform).submit();
}
Now if I put something other than a form submit into the if statement, it works just fine. It's just when I do the form submit code it never works...
Here is the form code:
<form id="fastform" name="fastform" ACTION="/amember.php">
<INPUT TYPE="text" NAME="myurl" ID="myurl">
<input type="submit" />
</form>
Thanks for the help guys!
So far none of the suggestions work, I have tried several different variations like putting quotes around the fastform in getelementbyid. Here is my entire javascript program:
<script type="text/javascript">
function geturl() {
var locate = document.location
document.fastform.myurl.value = locate
}
window.onload = geturl;
if (self.location.href == top.location.href) {
var f=document.forms.fastform; f.submit();
}
</script>
Thanks for the suggestions!
Okay, so using some of the suggested code here I got it working. The problem was the if statement was not being executed at the right time, I moved things around so that the if statement was executed LAST and everything started working. Here is the complete (functioning) code:
<script type="text/javascript">
function geturl() {
var locate = document.location
document.fastform.myurl.value = locate
getmeoutofhere()
}
window.onload = geturl;
function getmeoutofhere() {
if (self.location.href == top.location.href) {
document.getElementById('fastform').submit();
}
}
</script>
<form id="fastform" name="fastform" ACTION="/amember.php" style="visibility:hidden;">
<INPUT TYPE="text" NAME="myurl" ID="myurl" />
<input type="submit" />
</form>
You can use this in your function:
var f=document.forms.fastform;
f.submit();
and it's working completely fine
document.getElementById('fastform').submit();
OR
var frm = document.getElementById('fastform');
frm.submit();
I'm not sure if it's the problem, but there's certainly one problem with the line:
document.getElementById(fastform).submit();
The problem, I think, is that you're trying to get an element by its id, but getElementById() requires a quoted string, unless you've already assigned the string to the variable represented by fastform. Therefore it should be either:
document.getElementById('fastform').submit();
or:
var fastform = 'fastform';
document.getElementById(fastform).submit();
Further, you seem to be trying to work with the fastform variable before it seems to have been set, in the first line contained within the if statement:
document.fastform.submit();
I'd suggest amending your script a little, to be something like:
if (self.location.href == top.location.href) {
var fastform = document.getElementById('fastform');
fastform.submit();
}
References:
document.getElementById().

Categories