Develop Reference

Change attribute

I've got a selection/dropdown with ID #pa_buy-sell[]. What I want to do is if the value is "buy" I want to change the attribute data-required="yes" to data-required="no" from a input field with class wpuf__regular_price_657. I also want to hide the span with class required. The code has to work in WordPress.
I'm quite new in this, so I'm not sure what's the right code. But I thought something like this could be a good starting point:
$('#pa_buy-sell[]').change(function(){
if($(this).val() == 'buy'){
//something need to happen here
}
});
Can someone help me with this?

Your code is correct until now. You have to replace the comment with the following lines:
$('.wpuf__regular_price_657').data('required','no');
$('span.required').hide();

To change the attribute to yes or no. you can use this:
$(".wpuf__regular_price_657").attr("data-required","no");
or you can use disabled as true or false, if you dont want to take input as
$(".wpuf__regular_price_657").attr("disabled", true);
and for hiding the particular span:
$("span.required").hide();
This will work fine in wordpress too
Hope it helped you

Please check with "===" which confirms Strong type checking (type and value) comparison and also refer the code for hiding the div with class required.
<script>
var $ = jQuery.noConflict();
$('.pa_buy-sell.wpuf_pa_buy-sell_657').change(function(){
if($(this).val() === "buy"){
$(".wpuf__regular_price_657").attr("data-required","no");
$("span.required").hide();
}
});
</script>

Placeholders with divs, not inputs/textareas

I have working on this problem for a couple weeks off and on. What I am trying to do is have placeholders to show users where they can type. When they do type, I want the placeholder to disappear, but reappear again when the div is empty.
Every thing I have found has to do with cross-browser placeholder support for inputs and textareas, and trying to apply the code for them to my issue results in failure.
I am using h1s for titles and standard divs for descriptions.
My code looks like this:
HTML
<div class="page-desc" contenteditable="true" data-placeholder="Write your description here."></div>
jQuery
var placeholder = '<span class="placeholder">Write your title here</span>';
$(this).html(placeholder);
I have more jQuery code, but it sucks. I am currently using keyup to hide the placeholder, and that's obviously not working. Can someone help me out?
I am totally open to using vanilla JavaScript as well.

You can have something like this:
$('#xdiv').html($('#xdiv').data('placeholder'));
$('#xdiv').keydown(function() {
if ($(this).html() == $(this).data('placeholder')) {
$('#xdiv').html('');
}
})
$('#xdiv').keyup(function() {
if ($(this).html() == '') {
$('#xdiv').html($('#xdiv').data('placeholder'));
}
})
Initially it sets DIV's HTML to placeholder text. Then when user begins to type (on keydown) it checks if DIV still has the placeholder text and if so - removes it. And since user can delete all the data - it checks (on keyup) if DIV is empty, and if so - restores placeholder's text.
Demo: http://jsfiddle.net/bP7RF/

there's a way to do it in css (modern browser only)
.pageDesc:empty:after {content : "Write your description here.";}

Javascript solution (not as pretty, but more cross-browser):
$("#in").keyup(function(){
if(!$(this).html()){
$(this).html($(this).attr('data-placeholder'));
$(this).attr('showing-placeholder',true);
}
});
$("#in").keydown(function(){
if($(this).attr('showing-placeholder')){
$(this).html('');
$(this).attr('showing-placeholder','');
}
});
Working Example: JSFiddle;

Why not use the Blur and Focus event handlers from jQuery and check the Text value of the Div?
Code for quick look:
$('[contenteditable="true"]').blur(function() {
var text = $.trim($(this).text());
var ph = $('<span/>',{ 'class':"placeholder"})
.text($(this).data('placeholder')||'');
if (text == '') {
$(this).html(ph);
}
}).focus(function() {
if ($(this).children('.placeholder').length > 0) {
$(this).html('<span> </span>');
}
});
Fiddle for example: http://jsfiddle.net/qvvVr/1/

Why can't you use the placeholder attribute of the input element.
It seems to do exactly what you want and it's very well supported
(http://caniuse.com/input-placeholder).
Sorry if I have missed something.

Alternative method to display content

The selected radio button will show its corresponding dropdown box.
For example, upon the selected radio button ‘Ontario’, a dropdown box with matching cities will show up.
I have the following working code for the above example:
<script type="text/javascript">
$(document).ready(function(){
$("#searchForm input:radio").change(function() {
var buttonPressed = $('[name="Region"]:radio:checked').val();
var cityElmntBox = document.getElementById("dispalyCityBox");
if(buttonPressed == 'Ontario'){
cityElmntBox.style.display='block';
} else {
cityElmntBox.style.display='none';
}
});
});
</script>
Instead of the sudden effect (display='block'), I wanted to use for the selected elements the slideDown() method.
So I replaced:
cityElmntBox.style.display='block';
with:
cityElmntBox.slideDown(500);
But this doesn’t work…, please can someone help me get it working?

Wrap it in jQuery:
$(cityElmntBox).slideDown(500);
Also you can simplify the var statement like this and you wont have to put it in a wrapper:
var cityElmntBox = $("#dispalyCityBox");

Use $('#dispalyCityBox') instead of document.getElementById("dispalyCityBox").

Try $('#dispalyCityBox').slideDown(500) instead.
By using cityElmntBox.slideDown(500); you're trying to use a jQuery method on a non-jQuery object.

Select an option of select box using the value

I have a dropdown box and I want to select the option based on value. Somehow I am getting handle to value say 3. Now I want to manually select the option which has got value 3.
I have tried something like this
selectBoxElement.options[selectedValues].selected = true;
where selectedValue = 3, but it is not working.

If using jquery (as per your tag), you can do:
$(document).ready(function() {
$("#yourSelectId option[value='3']").attr("selected", "selected");
});

Something like that should work (assuming $ is not overwritten and is alias for jQuery):
$(selectBoxElement).find('option[value="selectedValue"]').prop('selected', true);
or rather:
$(selectBoxElement).val(selectedValue);
which is simpler and achieves similar result :)

If you're using plain JS (except for the jQuery tag, you didn't explicitly say whether you want plain JS or jQuery), this should do what you want:
for (i=0; i<selectBoxElement.options.length; i++) {
if (selectBoxElement.options[i].value == selectedValues) {
selectBoxElement.options[i].selected=true;
break;
}
}

This is simple please try the following
When using the index position of the option tag within the select box
selectBoxElement.selectedIndex = index; // Where the index starts from 0
When using the value
selectBoxElement.value = value;// Where the value is the attribute defined within option tag
Hope this solves your problem.

Add disabled attribute to input element using Javascript

I have an input box and I want it to be disabled and at the same time hide it to avoid problems when porting my form.
So far I have the following code to hide my input:
$(".shownextrow").click(function() {
$(this).closest("tr").next().show().find('.longboxsmall').hide();
});
This is the input that gets hidden as a result:
<input class="longboxsmall" type="text" />
How can I also add the disabled attribute to the input?

$("input").attr("disabled", true); as of... I don't know any more.
It's December 2013 and I really have no idea what to tell you.
First it was always .attr(), then it was always .prop(), so I came back here updated the answer and made it more accurate.
Then a year later jQuery changed their minds again and I don't even want to keep track of this.
Long story short, as of right now, this is the best answer: "you can use both... but it depends."
You should read this answer instead: https://stackoverflow.com/a/5876747/257493
And their release notes for that change are included here:
Neither .attr() nor .prop() should be used for getting/setting value. Use the .val() method instead (although using .attr("value", "somevalue") will continue to work, as it did before 1.6).
Summary of Preferred Usage
The .prop() method should be used for boolean attributes/properties and for properties which do not exist in html (such as window.location). All other attributes (ones you can see in the html) can and should continue to be manipulated with the .attr() method.
Or in other words:
".prop = non-document stuff"
".attr" = document stuff
...
...
May we all learn a lesson here about API stability...

Working code from my sources:
HTML WORLD
<select name="select_from" disabled>...</select>
JS WORLD
var from = jQuery('select[name=select_from]');
//add disabled
from.attr('disabled', 'disabled');
//remove it
from.removeAttr("disabled");

If you're using jQuery then there are a few different ways to set the disabled attribute.
var $element = $(...);
$element.prop('disabled', true);
$element.attr('disabled', true);
// The following do not require jQuery
$element.get(0).disabled = true;
$element.get(0).setAttribute('disabled', true);
$element[0].disabled = true;
$element[0].setAttribute('disabled', true);

$(element).prop('disabled', true); //true|disabled will work on all
$(element).attr('disabled', true);
element.disabled = true;
element.setAttribute('disabled', true);
All of the above are perfectly valid solutions. Choose the one that fits your needs best.

You can get the DOM element, and set the disabled property directly.
$(".shownextrow").click(function() {
$(this).closest("tr").next().show()
.find('.longboxsmall').hide()[0].disabled = 'disabled';
});
or if there's more than one, you can use each() to set all of them:
$(".shownextrow").click(function() {
$(this).closest("tr").next().show()
.find('.longboxsmall').each(function() {
this.style.display = 'none';
this.disabled = 'disabled';
});
});

Since the question was asking how to do this with JS I'm providing a vanilla JS implementation.
var element = document.querySelector(".your-element-class-goes-here");
// it's a good idea to check whether the element exists
if (element != null && element != undefined) {
element.disabled = "disabled";
}

Just use jQuery's attr() method
$(this).closest("tr").next().show().find('.longboxsmall').attr('disabled', 'disabled');

in JQuery you can use the following functions:
$("input").prop('disabled', true);
$("input").prop('disabled', false);
For native js you can use:
document.getElementById("myElement").disabled = true;