Develop Reference

AngularJs + Reset all attributes on a SingleClick and dnt have form tag

In AngularJs, I am trying to reset all the attributes ( i.e, Dropdown, CheckBox, RadioButton etc) inside a controller. Trying to built global function for all the Controllers.
Snippet :-
<div id="first_div" ng-controller="FirstDivController">
<select id="user_list" ng-options="user in users" ng-model="user_name" >
<option value="">Select</option>
</select>
<input type="checkbox" checklist-value="social_medium" data-target="facebook"
ng-model="checked">
<input type="checkbox" checklist-value="social_medium" data-target="twitter"
ng-model="">
<a href="javascript:void(0);" ng-click="reset_data()">
<span></span> Reset
</a>
</div>
On a single click, I am trying to reset the all the element values as default, and dnt have any form tag. But I am not getting the way to implement it.
Thanks in advance.

How to add a DIV to select option using javascript

My question is about java script, i want to put or add a div or button or input inside select tag using java script.
I using jquery.sumoselect plugin that make you multiple checkbox, but when i want to add some DIVs inside select tag is showing outside the list.
i want the div inside select element like this picture : http://i.stack.imgur.com/Xd6FX.jpg
this is my html code
<div class="select-box-style right">
<div class="your-list-title">Your Lists</div>
<select multiple="multiple" class="md_what_get right SlectBox">
<option selected value="electronics">Electronics</option>
<option value="games">Video Games</option>
<option value="books">Books</option>
<option value="others">Others</option>
<option value="others"><input type="text" name="lname"></option>
</select>
<div class="add-list-box">
<input type="text" class="input-add-list"/>
<label class="label-spcbtn-blue spr" >Add</label>
</div>
</div>
and this how to call the plugin:
<script type="text/javascript">
$(document).ready(function () {
$('.SlectBox').SumoSelect();
});
</script>
thank you for helping!
....
Update!
see this link http://wenzhixin.net.cn/p/multiple-select/docs/
On The Filter1 you can see the input search inside select element, how can i do that?

Neither SumoSelect or MultipleSelect (as is) supports the feature you are looking at. But, first, some clarification needed:
<select> boxes are a standard HTML tag, that accepts no other tags than <optgroup> or <option>. see here: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/select
SumoSelect and MultipleSelect are both Javascript plugins that “converts” real selects into custom built <div> tags, with javascript to handle the logic.
That said, you can either modify/extend those plugins to create the desired <div> or you can build your own “<select> into <div> converter”.
But, for the sake of simplicity, you could just create a <div> with all the desired functionality, using regular plain old checkboxes, and hiding/displaying the whole <div> according to your UX flow/needs.

jQuery validate Engine Not Work with Bootstrap Select plugin

I work with jQuery Validate Engine Plugin and bootstrap. This Plugin Worked But when I change dropdown selectbox Style using bootstrap-select plugin, validate engine not work.
HTML:
<div class="row-fluid sortable">
<div class="box span12">
<div class="box-header well" data-original-title>
<h2><i class="icon-picture"></i>Change Password</h2>
</div>
<div class="box-content">
<form action="#" id="fm">
<div class="control-group">
<label class="control-label" for="disabledInput">Email</label>
<div class="controls">
<select name="sport" id="sport" class="validate[required]">
<option value="">Choose a sport</option>
<option value="option1">Tennis</option>
<option value="option2">Football</option>
<option value="option3">Golf</option>
</select>
</div>
</div>
<input type="text" name="test" id="test" class="validate[required] text-input" />
<input type="submit" name="submit" />
</form>
</div>
</div>
<!--/span-->
</div>
<!--/row-->
JS:
jQuery(document).ready(function () {
// binds form submission and fields to the validation engine
jQuery("#fm").validationEngine();
});
$('select').selectpicker();
DEMO HERE : http://jsfiddle.net/Sambora/84PVv/2/
In action When we select any value in selectbox jQuery Validation Engine Not Work and Show error Box.
How do fix this problem?

I got a solution without modifying the core js file. For this we need to use validationEngine "prettySelect","usePrefix" options, and we need to add "id" to cloned element and also need to removed the "validate[required]" class from this element. The full code look likes this.
var prefix = "selectBox_";
jQuery(document).ready(function() {
// for remove bootstrap-select validation and adding id to the element with prefix
$('select').each(function() {
$(this).next('div.bootstrap-select').attr("id", prefix + this.id).removeClass("validate[required]");
});
jQuery("#registration").validationEngine('attach',{
promptPosition: "bottomLeft",
autoHidePrompt:true,
prettySelect : true,
usePrefix: prefix
});
});
It works for me. DEMO HERE : http://www.scriptlodge.com/code_demos/validationEngine/
For detail, Please go to my blog link http://www.scriptlodge.com/jquery-validationengine-not-work-with-bootstrap-select-plugin/

When bootstrap-select creates a cloned element, it uses an addClass call that copies the validate[.*] class into the new div element, and validationEngine tries to validate that.
This can be remedied by modifying the setStyle function to strip that part of the class attribute out (around line 272 of bootstrap-select.js):
this.$newElement.addClass(this.$element.attr('class').replace(/selectpicker|mobile-device|validate\[.*\]/gi, ''));
Note the change is simply: |validate\[.*\] in the regular expression.
This keeps the new DIV element from being "validated" by the validationEngine script.
After adding this, validationEngine works with bootstrap-select.
I've submitted a pull request to fix this and it has been merged into the latest version on github.
You can download the updated script here:
https://raw.githubusercontent.com/silviomoreto/bootstrap-select/master/bootstrap-select.js

Select list is populated correctly but value not included in POST

I have a webpage that uses a JavaScript function to populate a second dropdown box when an item from a first dropdown box is picked. The function creates the second drop down changing this:
<td>
<form action="http://website/addToDepartment.php" method="post">
<div id="nondepartment">
</div>
</td>
to this:
<td>
<form action="http://website/addToDepartment.php" method="post">
<div id="nondepartment">
<select name="personName">
<option value="Bob" name="personName">Bob</option>
<option value="Jim" name="personName">Jim</option>
<option value="Tom" name="personName">Tom</option>
</select>
</div>
</td>
My problem is that when the form button is pressed it does not POST the personName value chosen from the created list. If I write exactly the same code manually, so the function is not called, then it works. If I use the function to create the list it doesn't (no string at all gets POSTED). Why might this be?

You may have a conflict with the name property. Remove the name property from all of the options;you only need it on the select element. Also, make sure (recommend using Firebug) that the markup you are giving above is literally what does get produced; I've had before where injecting elements aren't in the <form> tag as expected, depending on how it's used sometimes.

You are not closing your form tag. Probably there lies your issue.
The HTML generated content should work to POST your values. Probably because the FORM is not closed, the browser will close it for you on a spot you do not expect.
Also you only need a name attribute on your SELECT.

Try this.
<td>
<form action="http://website/addToDepartment.php" method="post">
<div id="nondepartment">
</div>
</form>
</td>
<td>
<form action="http://website/addToDepartment.php" method="post">
<div id="nondepartment">
<select name="personName">
<option value="Bob" >Bob</option>
<option value="Jim" >Jim</option>
<option value="Tom" >Tom</option>
</select>
</div>
</form>
</td>

Add html link into text input box?

I'm trying to add a HTML link to an input box using the following jQuery:
var E = "<a class='tagged_person' contenteditable='false' href='http://www.google.com'>Click This</a>";
$("input[name='newComment']").val(E);
Which is working, but its literally displaying the <a href..., which is what I wanted backend wise, but on the frontend, I'd like the user to see it as rendered as a HTML <a> link. Just like on Facebook/Twitter you can tag users and then there's a link.

I think you're looking for the JQuery method .append. That lets you pass a string of HTML and have it parsed into the DOM. Check it out here
For example:
$('#myDiv').append('Search for it!');
There's also .appendTo() if it suits your aesthetic better.
Edit: If you're trying to literally stick html as the value of a text input, you can't do that. <input type="text"> carry text, and that's it. You'd have to make your own input form, or use a JQuery plugin. Why would you want to have a link in a form input anyway though? Sure, you could have the user redirected when clicking the form through different event handlers, but input is for inputting. If it redirects, then you didn't really want an input in the first place.

You can use the following code, which when select it will open the link in a new window.
<form action="../">
<select name="myDestination">
<option value="http://www.website1.com/">Website 1</option>
<option value="http://www.google.com/">GOOGLE</option>
</select>
<input type="button"
value="Open in New Window!"
onclick="ob=this.form.myDestination;window.open(ob.options[ob.selectedIndex].value)">
</form>
Or without the need to press a button:
<form action="../">
<select onchange="window.open(this.options[this.selectedIndex].value,'_top')">
<option value="">Choose a destination...</option>
<option value="http://www.website1.com/">Website 1</option>
<option value="http://www.google.com/">GOOGLE</option>
</select>
</form>
Also created a jsfiddle to demonstrate: jsFiddle