How can I write this as a JavaScript function? - javascript

I have the following code snippet embedded into some of my divs so when those divs get clicked a certain radio button gets checked.
onclick="document.g1.city[0].checked=true;"
However I would like to convert the above call to a function call like below:
onclick="checkRadioButton(city[0]);"
And the function will be something like this
function checkRadioButton(input){
document.g1.input.checked=true;
}
Is there a way I can accomplish this?

You can write any Javascript code inside the onclick attribute. Remember that city[0] is not defined anywhere. To access it, you must specify the full document.g1.city[0]. So the onclick becomes:
onclick="checkRadioButton(document.g1.city[0]);"
Inside your function, you are already receiving the element, and don't have to retrieve it from the document again. You could directly set it's checked property:
function checkRadioButton(input) {
input.checked = true;
}

onclick="checkRadioButton(document.g1.city[0]);"
checkRadioButton(var input){
input.checked=true;
}
You can also reduce the need for supplying document.g1.city[0] if, for example, every DIV that you mark thusly has an attribute "radioID", and the value of the attribute must match the ID given to the radio button:
onclick="checkRadioButton(this);"
checkRadioButton(var div){
document.getElementById(div.radioID).checked=true;
}

Related

Replacing the onclick parameters for a link in a cloned table row

I have a button in a table that is cloning the current row and then clearing some of the values (which works without issue). However, one of the cells has a link that has an onclick event with some parameters
<td class="srcbtn"><a class="grid_button" onclick="functionName('#MyLiteral', 'STUDY=ABC&SURID=3&SID=ABC01&LANG=en-US&RID=4e60fd3d-1ab4-e711-80ec-0050568a179a');"><img src="imgsrc.png" alt="img" style="border-width:0px;"></a></td>
I'm able to grab the button
if ($(this).hasClass( "srcbtn" ) ) {
var btn = $(this).find('.grid_button')[0];
console.log(btn);
}
Which gives:
<a class="grid_button" onclick="functionName('#MyLiteral', 'STUDY=ABC&SURID=3&SID=ABC01&LANG=en-US&RID=4e60fd3d-1ab4-e711-80ec-0050568a179a');"><img src="imgsrc.png" alt="img" style="border-width:0px;"></a>
What I need to do however is either remove one of the parameters in the onclick or even just change the parameter name, but the other parameters need to be remain. The function itself creates an iframe in a Literal control and builds the URL with the parameters, the function and parameter name is created dynamically from some database values, so I can't just clear and recreate it.
In this case, the &RID=4e60fd3d-1ab4-e711-80ec-0050568a179a needs to either be stripped out or even just replace the &RID= to &XRID= or similar so the code further along doesn't see a RID parameter passed.
I thought I could use .replace('&RID=', '&XRID=') but get an error that replace is not a function. So then I tried .text thinking I could use the replace on the text, but the text returns blank.
It'd be helpful if someone could show me how to modify the text of the onclick.
thanks
It will be much better for you to use so called "live" events from jQuery and HTML5 data- attributes. In this case your HTML code may look something like this:
<td class="srcbtn"><a class="grid_button" data-target="#MyLiteral" data-study="ABC" data-surid="3" data-sid="ABC01" data-lang="en-US" data-rid="4e60fd3d-1ab4-e711-80ec-0050568a179a"><img src="imgsrc.png" alt="img" style="border-width:0px;"></a></td>
and then into your script you may use something like:
$('table').on('click', '.grid_button', function (ev) {
ev.preventDefault();
var $e = $(this);
functionName($e.data('target'), $.param({
STUDY: $e.data('study'),
SURID: $e.data('surid'),
SID: $e.data('sid'),
LANG: $e.data('lang'),
RID: $e.data('rid')
}))
});

Javascript Generating Text into Textbox?

I wrote this little bit of code but I'm not sure why it's not working? It's supposed to take in the persons name and depending on what they selected it will output a website with their name at the end of it.
JSFiddle
http://jsfiddle.net/tQyvp/135/
JavaScript
function generateDynamicSignature() {
var dynSig = "";
var user = document.getElementById("usernameInput");
var e = document.getElementById("scriptListInput");
var strUser = e.options[e.selectedIndex].text;
if (strUser == "example") {
dynSig = "http://example.com/users/";
}
document.getElementById("generateSignature").addEventListener('click', function () {
var text = document.getElementById('dynamicSignatureOutput');
text.text = (dynSig + user);
});
}
HTML
<select class="form-control" id="scriptListInput">
<option value="example">Example 1</option>
</select>
There are a few problems with your code, I'll try to list them all.
First, you never added the username input to your HTML.
Next, you seem mixed up on the way to access/set the text of an HTML input. You do this through the value field. For the username input, you forgot to access any property, so you'll need to change it to:
var user = document.getElementById("usernameInput").value;
You later used the text property of both the select element and the output. These should also both be value.
Another problem is that you've placed a listener inside a listener. Your outer function, generateDynamicSignature, listens for the onclick event of the button. This function only runs after the button is clicked. But inside this function, you attach a new listener. This inner listener will only run if someone clicks the button twice.
I've included these changes in a new fiddle:
https://jsfiddle.net/zdfnk77u/
where is usernameInput in your html?
in the if, use === instead of ==
If and when you add the missing "usernameInput" element in your HTML, all you'll have to do is...
dynSig='http://example.com/users/'+usernameInput.value;
I think part of the problem is that you want to access the value and not the text of input elements. So for text and strUser, you want to do text.value instead of text.text and such.
Also, based on the JSfiddle, you probably want to rewrite how you're using the document listener and the onclick of the html element. Every time the button is clicked it goes through the generateDynamicSignature and creates a listener to change the value, but doesn't necessarily change the value itself. If you move the logic of the generate function inside the click listener, that should fix most of your problems.
You create your generateDynamicSignature inside $(document).ready.
There are two approaches.
define function generateDynamicSignature outside
$(document).ready
or
bind your button.click to a handler inside $(document).ready
Do not mix these two.

How to add data to the anchor tag in HTML and access it using jQuery?

Following is my HTML code of an anchor tag:
<a delhref="http://localhost/eprime/entprm/web/control/modules/questions/manage_question_issue.php?op=fixed&question_id=21627&que_issue_status=0" title="Fixed" href="#fixedPopContent" class="fixed">Fixed</a>
Now I want to add a question id to the above anchor tag and access it back in jQuery when user clicks on this hyperlink. For it I tried below code but it didn't work out for me.
<a delhref="http://localhost/eprime/entprm/web/control/modules/questions/manage_question_issue.php?op=fixed&question_id=21627&que_issue_status=0" title="Fixed" href="#fixedPopContent" class="fixed" data="21627">Fixed</a>
The jQuery code for it is as follows:
$(document).ready(function() {
$(".fixed").click(function(e) {
var t2 = $(this).data();
alert(t2);
});
});
It's giving me the message [object Object] in alert box. Can anyone please help me in setting the value to a anchor tag and accessing it in jQuery?
try something like this
html
javascript
$(document).ready(function() {
$(".fixed").click(function(e) {
var t2 = $(this).data('q_id');
alert(t2);
});
});
you can add attribute data-sample_name on your html element.
In jquery use
$('your_element_id').data('sample_name');// to get value
$('your_element_id').data('sample_name','new value');// to set value
I assume you are trying to do something like this:
$(document).ready(function() {
// you can change the selector, `"key"` and its value below
$("a.fixed").data("key", 21627); // on document ready, store the necessary data
// ^-- Insert a dynamic value here if required
$(".fixed").click(function(e) {
alert($(this).data("key")); // 21627
});
});
.data() stores a key-value pair. So here, I made a key called 'key' and stored with it a value of 21627 and on click, alerted the value corresponding to the key 'key'.
You got a [object Object] because of the same reason that .data() stores data in an object and that by passing it zero arguments, you were essentially storing the object associated with .fixed into t2.
One more simple way is:
Use id attribute in anchor tag to write your data.
<a id="your-data" onclick="callfunction(this.id)">Fixed</a>
Create a function in js file like callfucntion(id).
function callfucntion(id)
{
var data = id; // if more than one data, you can se split()
}

Why are only some attributes updated from my javascript function?

I have a button script to change the buttons in a frame based on the page loaded in the main frame. The problem I'm experiencing is that while the background images, tabindex and text on the button (innerHTML) all change as expected, the onclick doesn't. It appears to completely ignore it. Here's the script I'm using:
function createbutton(btn_N, btn_I, btn_L, btn_D) // (Div Name, Tab Index, Button Text, Page To Load){
var btnN = top.frames['buttonbar'].document.getElementById(btn_N);
btnN.style.cssText = "display:block; cursor:pointer; padding-left:16px; padding-top:5px;";
btnN.onmouseover = function() {this.style.backgroundImage = "url('./osdimages/navBG_roll.png')";};
btnN.onmouseout = function() {this.style.backgroundImage = '';};
btnN.tabindex = btn_I;
btnN.innerHTML = btn_L;
btnN.onclick = btn_D;
}
The button call looks like this:
createbutton("button01", 1, "New Order/Browse", "parent.frames['content'].location.href='createorder/createorder.asp';");
There is a difference between attributes and properties.
The best example of this is as follows:
HTML: <input type="text" value="hello" id="test" />
Type something in the text box
document.getElementById('test').value is whatever you typed
document.getElementById('test').getAttribute("value") is whatever was in the HTML
Some attributes are directly mapped to properties and vice versa, but this is not always the case.
For instance, the onClick attribute takes a string that is then eval'd, but the onclick property takes a function. This is why your code isn't working.
Either pass a valid function, or use setAttribute.
You are setting onclick with a string, it needs a function to execute.
createbutton("button01", 1, "New Order/Browse", function(){ parent.frames['content'].location.href='createorder/createorder.asp'; });

jQuery load issue. Don't know how to approach this AJAX call

$("[littleBox]").load("ajax.php?eid="+$(this).attr("littlebox"));
the $(this).attr("little box") portion of the code returns undefined.
I'm trying to get the individual attribute of the initial $("[littleBox]").
this particular line of code is called as the soon as the document is ready.
when I put predefined values, such as
$("[littleBox]").load("ajax.php?eid=1");
It works as expected. Unfortunately, I need it to load specific content based on that element's attribute. Any idea how to make this work?
Loop through all items with proper this:
$("[littleBox]").each(function() {
var $this = $(this)
$this.load("ajax.php?eid="+ $this.attr("littlebox"));
});
this will not refer to $("[littleBox]") in that context, you'll have to repeat the selector - or select the element already and re-use it:
var $box = $("[littleBox]");
$box.load("ajax.php?eid=" + $box.attr("littlebox"));
post yout html that cotnain attr "little box" in it.
is it like
<a attr="little box" id="test">test<a/>
then it work like
$('#test').click(function(){
alert($(this).attr('little box'));
});

Categories