Get the value of <a> href using jQuery [duplicate] - javascript

This question already has answers here:
Get value of a custom attribute
(3 answers)
Closed 6 years ago.
I have this <a> href attribute
<a id="cancel" value="<?php echo $subID;?>" href="#">Cancel</a>
and I need to get its value ($subID) and assign it to a JavaScript variable. How can I do that?

Instead of using value, you should use data-value="<?php echo $subID;?>"
then you can get the value like this
var myVal = $('#cancel').data("value");

You could add the value as a custom data-attribute
HTML:
<a id="cancel" data-value="<?php echo $subID;?>" href="#">Cancel</a>
And then retrieve the value like this
JS:
$('#cancel').data('value');

You don't need jQuery. Plain JavaScript is easy enough:
Traditional:
var value = document.getElementById('cancel').getAttribute('value');
console.log(value);
<a id="cancel" value="Hello world!" href="#">Cancel</a>
Using a CSS selector:
var value = document.querySelector('#cancel').getAttribute('value');
Using jQuery
var value = $('#cancel').attr('value');
Although this works (at least in Chrome), a link doesn't have a value attribute so this HTML is invalid. If you use HTML5 (which you probably will), you can make it valid by naming the attribute 'data-value'. Attributes with the 'data-' prefix are allowed for this purpose.
There are other solutions too, but since they are out of scope here, please check Can I add custom attributes to HTML tags.

You have two ways (and more) to solve this
With jQuery:
var x= $('#cancel').val();
with JavaScript:
var x= document.getElementById("cancel").value;

Related

passing a PHP variable to Ajax call [duplicate]

This question already has answers here:
trimming a string within a div
(2 answers)
How can I get the data attribute from a php variable?
(2 answers)
Closed 2 years ago.
I am attempting to call a comments section through a modal, for this purpose I need to pass a unique id along with #display_comment . It works when I hard code is such as #display_comment1, #display_comment2. I need to know how to pass the value as a variable.
I am using dom-target to pass it as variable in myData1, but it wont work. The console shows #display_comment & 1 on the next line.
<div id="dom-target" style="display: none;">
<?php
echo htmlspecialchars($test['id']);
?>
</div>
var div = document.getElementById("dom-target");
var myData1 = div.textContent;
load_comment();
function load_comment()
{
$.ajax({
url:"fetch_comment.php",
method:"POST",
success:function(data)
{
$('#display_comment'+myData1).html(data);
}
})
}
The DIV includes lots of whitespace around the ID. You need to remove that with trim().
var myData1 = div.textContent.trim();
What #barmar wrote is correct. Although I would suggest a much better approach for this. Whenever you wanna "fetch" some html data to javascript (here the data is set by PHP), you can use the data attribute in html like this:
<div id="dom-target" style="display: none;" data-id="<?php echo htmlspecialchars($test['id']);?>">
<?php
echo htmlspecialchars($test['id']);
?>
</div>
See that I've set the data attribute to the div above with the id.
Now when you wanna get this id in jQuery, you can do it with $("#dom-target").data("id"); like
var myData1 = $("#dom-target").data("id");
This gives you a much better and cleaner way to fetch data from html to javascript.

How to pass a JavaScript variable to DIV tag?

I am trying a code to pass a javascript variable to the div tag to change its attribute. If anyone knows how to do this, help me.
<div id="rate" class="money" data-wpac-chan=""></div>
I want to pass a javascript variable to the data-wpac-chan.
<script type="text/javascript">
var div = document.getElementById("rate").data-wpac-chan = "bal";
</script>
It is not working.
I want to replace data-wpac-chan=" " to data-wpac-chan="bal"
This should do it:
document.getElementById("rate").setAttribute("data-wpac-chan", "bal");
SetAtrribute will set any attribute on an HTML element.
You can also use dataset to assign the value to the attributes that has data-. Notice that, you need to use the camelcase as attribute name. So, wpac-chan becomes wpacChan
document.getElementById("rate").dataset.wpacChan = 'bal'
<div id="rate" class="money" data-wpac-chan="">sadasd</div>

Is there any other option to include 'input' element from javascript without using single quotes?

$('<input class="btn" type="button" value="[[[send]]]" title="" />').insertAfter('#something');
When I include this input element from js to html, I am using single quotes('). If you see value attribute value="[[[send]]]" I have used brackets for localization. If the translated language contains single quotes(french, italian) I am getting ')'missing error in script.
EX: $('<input class="btn" type="button" value="send'vara" title="" />').insertAfter('#something');
Is there any option to include input element without using single quotes ? or Is there any other representation for single quotes in JS ?
Try the following:
$('<input>', { class:"btn",type:"button",value:"[[[send]]]",title:""})
You can use the .val() method to set the value:
$('<input/>', {class:"btn", type:"button", title:""}).val( "[[[send]]]" )
.insertAfter('#something');

Remove and Add class on load based on element id in javascript [duplicate]

This question already has answers here:
Undefined is not a function (jQuery add/remove class)
(3 answers)
Closed 7 years ago.
When I select two buttons the page reloads and there are two values that are assigned to variables. I am trying to set it up so when the page loads it removes a class and adds one based on what the value of the two variables is.
I get the variables by pulling the value that is passed from two hidden input fields and their id's
<input id="noType" name="noType" type="hidden" value="1" />
<input id="noAssign" name="noAssign" type="hidden" value="0" />
I grab their values on load. Then I have buttons with ids type1 type2 type3 that I add and remove the classes from.
$(document).ready(function () {
var type = document.getElementById("noType").value;
var assign = document.getElementById("noAssign").value;
$("type" + type).removeClass("btn-xxx")
.addClass("btn-success");
$("assigned" + assign).removeClass("btn-xxx")
.addClass("btn-success");
});
I am almost 100% sure I'm grabbing the correct ids off of the getElementById from the hidden inputs and attaching using them properly when trying to reference the id of the buttons. The classes are not being added or removed. What am I missing?
These are the buttons
<button id="type1" class="btn-t btn-xxx type-button"
onclick="SetType(1);"><i class="fa fa-info-circle fa-fw">
</i>Invitation</button><button id="type2" class="btn-t btn-xxx type-button"
onclick="SetType(2);"><i class="fa fa-info-circle fa-fw">
</i>Assistance</button><button id="type3" class="btn-t btn-xxx type-button"
onclick="SetType(3);">
<i class="fa fa-info-circle fa-fw">
</i>Finalize</button>
As removeClass() and addClass() are jQuery functions.
The error is correct as document.getElementById("type" + type) returns DOM element and they don't have above methods. Same operations can be performed using ID Selector (“#id”)
Selects a single element with the given id attribute.
Use
$("#type" + type).removeClass("btn-xxx").addClass("btn-success");
$("#assigned" + assign).removeClass("btn-xxx").addClass("btn-success");

Reference a variable in the s:url action attribute

So I have a variable set in the page scope like:
<s:set name="targetAction" var="targetAction" value="%{'someActionName'}" />
I want to use this "targetAction" variable in the action attribute of the <s:url> tag. Is this possible?
I tried this way:
<s:url action="%{#targetAction}" />
but the action attribute is not evaluated and it is set to "%{#targetAction}" instead of the value specified in <s:set> tag by someActionName variable.
Any suggestions?
EDIT:
Corrected the typo with double quotes.
EDIT2:
Well, I'm using struts 2.1.3 if that matters at all. Anyway, I intend to use this url in a javascript variable like this:
var targetAction = '<s:property value="%{#targetAction}" />';
var actionURL = '<s:url action="<my dynamic action name specified by the targetAction variable needs to be here>" />
Is there anyway to let it know that value mentioned for the action attribute is a javascript variable and not a string as such? I mean how do I escape javascript content in this scenario?
Yes this is possible. The name attribute of <s:set> tag is deprecated use var instead.
BTW this variable a not set in page scope because you are not using scope="page" and default is action scope.
And you have typo in action attribute.
<s:set var="targetAction" value="%{'someActionName'}" />
<s:url action="%{#targetAction}" />
Javascript:
var targetAction = '<s:property value="%{#targetAction}" />';
var actionURL = '<s:url action="%{#targetAction}" />';
You have probably don't use alTSyntax in the tags. Try to set it to true in struts.properties.
### use alternative syntax that requires %{} in most places
### to evaluate expressions for String attributes for tags
struts.tag.altSyntax=true
In Struts 2.3 worked
<c:set var="businessActionMapping" value="foo" scope="session"/>
<s:form action="%{#session.businessActionMapping}"
You might have need to set altSyntax=TRUE in struts.properties

Categories