In a WordPress plugin (called postRatings) when a user presses a nested image he adds a "like" to the page. I want to pass that info to a hidden form.
So when user clicks the img (that's what triggers the plugin functionality), I want to get the serial number that is in the parent span of that image, and pass it as a value to my hidden form input.
Thing is the serial number is displayed at the end part of the parent span id name. I wrote it in the HTML code below as “XXXX”.
I am trying to get that number (only) and pass it to the value of my hidden input. I started writing the JavaScript code but don't know how to continue.
HTML:
<span id="post-ratings-XXXX" class="post-ratings">
<img class="post-ratings-image" src="1_on.gif">
</span>
<form>
<input type="hidden" id="supportedCheck" name="supportedCheck" value="#"
maxlength="19"/>
</form>
JavaScript
$('.post-ratings-image').click(function(){
$('#supportedCheck').val ......?
});
You can use the following
$('.post-ratings-image').click(function(){
$('#supportedCheck').val($(this).parent('span')[0].id.split('-')[2]);
});
Fiddle Demo
You could use following snippet:
$('.post-ratings-image').click(function () {
$('#supportedCheck').val($(this).closest('span[id]')[0].id.split('-').pop());
});
Instead of adding the serial number to the id tag, consider to add it as a data tag. This is JQuery's way of working with data through HTML tags (see docs). You can set it this way:
<span data-serial-number="XXXX" class="post-ratings">
And access it this way:
$('.post-ratings-image').click(function(){
var span = $(this).parent();
var serial = span.data('serial-number');
span.find('input:hidden').val(serial);
});
Related
I copy need the dynamic text of a spam that is generated by a slider that the user sets. It must be copied to a value of an input.
I tried that, and didnt work:
<h4>Valor do consórcio: <span class="slider-value quote-form-element valor-carro1" data-name="Valor | Automóvel" name="Valor" data-slider-id="consorcio-auto">R$ <span id="THAT_VALUE"></span></span>
</h4>
<div class="slider" data-slider-min="20000" data-slider-max="100000" data-slider-start="23192" data-slider-step="1000" data-slider-id="consorcio-auto"></div>
<h4>Seus dados:</h4>
<input type="hidden" id="THAT_FIELD" name="THAT_FIELD" value="" />
<h4>Seus dados:</h4>
<input type="hidden" id="valorcarro" name="valorcarro" value="" />
script
$(function(){
var valorcarro = $('#THAT_VALUE').html();
$('#THAT_FIELD').val(valorcarro);
});
example in this page in the button on menu "Simulação".
The script just does not copy because the value is generated later and the user can still change
You need to use an event to fire your code after the slider value has changed. This is how you do it with a bootstrap slider.
$('.slider').on('slideStop', function () {
var valorcarro = $('#THAT_VALUE').text();
$('#THAT_FIELD').val(valorcarro);
});
To get the text of an element, use text()
For example
$("span").text();
you can try this code.
jQuery(function(){
var valorcarro = jQuery('#THAT_VALUE').text();
jQuery('#THAT_FIELD').val(valorcarro);
});
Actually, #Pamblam's response is better than mine. I was assuming the .slider class was for regular range inputs, which fire the 'change' event when their value changes, but it looks like it is in fact a bootstrap slider, which fires the slideStop event instead. Regardless, the code here listens for a change in the slider value, and when it is triggered, takes the text from the #THAT_VALUE span (from op's code) and sets the value of the #THAT_FIELD field to whatever it is :
$(".slider").change(function(){
var valorcarro = $('#THAT_VALUE').text();
$('#THAT_FIELD').val(valorcarro);
});
I am trying to hide a div class field using j query and i am unable to do so. It is a ticket field in a support form. That needs to be hidden at the beginning and reflect when a particular value is selected. I does not work. I have tried it two different ways and it does not work. Below is the HTML Code, HTML Image and the JQuery Code that i have used.
HTML:
<div class="form-field string optional request_custom_fields_21158635">
<label for="request_custom_fields_21158635">iOS Plugin Details</label>
<input id="request_custom_fields_21158635" type="text" name="request[custom_fields][21158635]">
<p>Please provide the iOS Plugin version details for your request. Example: iOS GA5.0.38</p>
</div>
J Query Code: One Hides only field and label remains visible.
var iosPluginId = "21158635";
$(document).ready(function() {
if(cust_tags == "kony_internal") {
$('#request_custom_fields_'+iosPluginId).hide();
}
});
JQuery Code: Two Both the label and field are visible.
$(".form-field string optional request_custom_fields_21158635").hide();
you can try below code. It will work.
$('#request_custom_fields_'+iosPluginId).hide();
change this to below code.
you cannot use # for class. You have to use "." for class and "#" for id.
$('.request_custom_fields_'+iosPluginId).hide();
You are using multiple selectors, if you can use them together like
$(".form-field.string.optional.request_custom_fields_21158635").hide();
it will be intersection, it means select element which have all of the classes. Or if you want a union, you can use
$(".form-field, .string.optional, .request_custom_fields_21158635").hide();
which means select element which have atleast one class
Related question : How can I select an element with multiple classes?
Fiddle
I'm looking to change the value of a <p> tag once an option from a drop down has been selected. I have that working but my issue is I am going to have lots of forms on one page and feel like I am repeating my code. Is there a way to do this with a function for example? To save me writing a new section of javascript everytime a form gets added to my page?
My javascript code:
$('.orderProduct select#packageOption').change(function(){
$('#packagePrice').html($(this).val());
});
$('.orderProduct2 select#packageOption').change(function(){
$('#packagePrice2').html($(this).val());
});
Thanks.
Add a data-element-id attribute to each select like:
<select data-element-id="packagePrice">...</select>
<select data-element-id="packagePrice2">...</select>
then you simply need this jQuery code:
$('select[data-element-id]').change(function(){
var $this = $(this);
var id = $this.data('element-id');
$('#' + id).html($this.val());
});
If you want to avoid the extra attribute you could use jQuery's DOM traversing functions, to locate which p you should update.
Using JS in CSOM for SharePoint 2013, I'm having difficulty retrieving the text from an element. This is from a custom display form for a custom list. The column type in question is a multi-line text box, but is rendered differently in the display form due to the form override script being used.
Inspect element in Chrome reveals:
<span class="formOverride" id="itemData" data-displayName="RequisitionItems">
<div dir>1||X-HEDC.000.000||GC-M||Critical Item #42||1||10||$10.00||</div>
</span>
Every attempt at retrieving the text in the div element has resulted in an empty string.
document.getElementById("itemData").innerText;
$("#itemData").text();
$("span#itemData.formOverride").text();
$("span#itemData.formOverride").children().text();
When I display the DOM properties for the span, the innerText is even listed properly, but still an empty string is returned.
What am I missing...?
Thanks in advance.
Edit: More info...
Override script:
$("span.formOverride").each(function()
{
//get the display name from the custom layout
displayName = $(this).attr("data-displayName");
elem = $(this);
//find the corresponding field from the default form and move it
//into the custom layout
$("table.ms-formtable td").each(function(){
if (this.innerHTML.indexOf('FieldName="'+displayName+'"') != -1){
$(this).contents().appendTo(elem);
}
});
});
So, the span posted originally has the contents from the default display form appended. I've never had any troubles accessing the formOverride information previously, so this is just being odd.
Further update:
Seems I cannot access any element's text on the page. It also appears that this is an issue particular to a SharePoint display form. I copied in full the script/html from my Edit page and pasted it into the Display page's corresponding file. In Edit the text returns fine, but in Display the text returned is an empty string.
Should be
$("#itemData").children().first().text();
Or
$("#itemData").find("div").text();
Or
$("#itemData div").text();
Your markup has a quote opening error
<span class="formOverride" id="itemData" data-displayName="RequisitionItems">
<div dir>1||X-HEDC.000.000||GC-M||Critical Item #42||1||10||$10.00||</div>
</span>
then
jQuery(function () {
console.log($("#itemData").text())
})
Demo: Fiddle
I want to email div contents via php and form tag. I have 2 divs with these classes:
.simpleCart_items
.simpleCart_total
I want to fetch contents from these divs and insert their contents in inputs or textareas, then submit the form to my php file.
I wrote this JQuery code:
$('#shopform').submit(function(){
var items = $('.simpleCart_items').text();
var tprice = $('.simpleCart_total').text();
$('#itemsinfo').val(items);
$('#totalprice').val(tprice);
});
and these are my inputs:
<textarea id="itemsinfo" style="width:320px; height:160px"></textarea>
<input type="text" id="totalprice"/>
but it doesn't work. The contents didn't move to the input tags.
It must be something else in your HTML or script that you are showing us because when I set up a simple test using your code, it works fine here: http://jsfiddle.net/jfriend00/7q6DP/.
This works perfectly fine for me (in Chrome, Firefox, Safari and IE):
HTML:
<button id="submitForm">Submit</button>
<div class="simpleCart_items">simpleCart items text</div>
<div class="simpleCart_total">simpleCart total</div>
<textarea id="itemsinfo" style="width:320px height:160px"></textarea><br>
<input type="text" id="totalprice"/>
Javascript (after page is loaded):
$('#submitForm').click(function(){
var items = $('.simpleCart_items').text();
var tprice = $('.simpleCart_total').text();
$('#itemsinfo').val(items);
$('#totalprice').val(tprice);
});
Please show the rest of your code and HTML.
The things to check are:
Are there any javascript errors showing in the error console or in the debugger console?
Are you initializing your event handlers after the page has loaded?
Do any javascript errors show in the debug console when you press the submit button?
Is your submitForm event handler getting called? If you set a breakpoint or put an alert in their, does it get hit?
Can you set a breakpoint in your submit handler and see what's happening with the values of items or tprice?
Make sure your class names don't have the leading period on them when you put them in your HTML. It should be class="simpleCart_items", not class=".simpleCart_items".
Your code works just fine when I put it in a page:
http://jsfiddle.net/Guffa/krYQh/
When you click the submit button, the fields are populated with the data. (I added a return false in the submit event handler just to keep the form from posting.)
Some possible errors in your code:
You have used class=".simpleCart_items" instead of class="simpleCart_items".
The form doesn't have id="shopform".
You have use the ids shopform, itemsinfo or totalprice on any other elements.
I guess you should use ".html()" instead of ".text" something like below.
$('#shopform').submit(function(){
var items = $('.simpleCart_items').html();
var tprice = $('.simpleCart_total').html();
$('#itemsinfo').html(items);
$('#totalprice').val(tprice);
});
I suppose you should use .innerHTML instead of .text()
You should be able to use the .val() to get the value for the text areas instead of using .text().
Try using alert(items); before you set the div's contents just to make sure you are actually getting data.