I am trying to transfering elements from one listbox to another listbox in html. For this I am using below code:
Question ::--This code I found from a link by stackoverflow which redirects to jsfiddle site, it is working on that site but not working here??
<html>
<header>
<script type="text/javascript">
$(function(){
$("#button1").click(function(){
$("#list1 > option:selected").each(function(){
$(this).remove().appendTo("#list2");
});
});
$("#button2").click(function(){
$("#list2 > option:selected").each(function(){
$(this).remove().appendTo("#list1");
});
});
});
</script>
</header>
<body>
<div>
<h3>List A</h3>
<select id="list1" multiple="multiple" rows=2>
<option value=1>Option 1</option>
<option value=2>Option 2</option>
<option value=3>Option 3</option>
<option value=4>Option 4</option>
</select>
<br/>
<input id="button1" type="button" value="Move to List B" />
</div>
<div>
<h3>List B</h3>
<select id="list2" multiple="multiple" rows=2>
</select>
<br/>
<input id="button2" type="button" value="Move to List A" />
</div>
</body>
</html>
I know this is very silly question but I am a beginner.
What I did wrong here?? please help me ..
Add jquery file in <head></head> section like this
<script type="text/javascript" src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
then it works fine.
Related
I am new to jquery & js. I am using a flask application for my mini project.
I am calling the loding.gif file via js/jquery script. it is working like when I hit submit button in html loding.gif file is called, but it is showing below to the submit button itself.
I want like 'if I hit submit button in html, only loding.gif as to show' other content like form name dropdown, everything has to hide.
what I need to change?
index.html
<!DOCTYPE html>
<html lang="en">
<html><head>
<link rel="stylesheet" href="{{ url_for('static', filename='styles.css') }}">
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
</head>
<body>
<div class="content">
<h1>The select form attribute</h1>
<right>
<!--<img src="https://media.giphy.com/media/l1J9LIsJB4xHMzLLq/giphy.gif">-->
</right>
<div class="zoom"></div>
<form method="POST" id="carform">
<label for="uname">Firstname:</label>
<input type="text" id="uname" name="uname">
<br>
<select id="cars" name="carfs">
<option value="volvo">Volvo XC90</option>
<option value="saab">Saab 95</option>
<option value="mercedes">Mercedes SLK</option>
<option value="audi">Audi TT</option>
</select>
<br>
<select id="image" name="image">
<option value="volvo">Volvo XC90</option>
<option value="debian">debian</option>
<option value="mercedes">Mercedes SLK</option>
<option value="audi">Audi TT</option>
</select>
<!--<input type="submit" value="Submit">-->
<input type="submit" name="anything_submit" value="Submit" onclick="$('#loading').show();">
</form>
<div id="loading" style="display:none;"><img src="{{url_for('static', filename='loder.gif')}}" alt="loading......" />Loading...!</div>
<br>
</div>
</body>
</html>
You can wrap your form inside a div and hide it when you submit your form. So, there's not much more to be added. Take a look:
$('#submit_leave_email').submit(function(e) {
$("#will_hide").hide();
$('#loading').show();
setTimeout(()=>{
$('#loading').replaceWith("<img src='https://c.tenor.com/Kt8pNHXHLKwAAAAC/module-free.gif' width='100'>");
}, 3000)
e.preventDefault();
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<body>
<div id="will_hide">
<form id='submit_leave_email' method='post'>
<label for="uname">Firstname:</label>
<input type="text" id="uname" name="uname">
<br>
<select id="cars" name="carfs">
<option value="volvo">Volvo XC90</option>
<option value="saab">Saab 95</option>
<option value="mercedes">Mercedes SLK</option>
<option value="audi">Audi TT</option>
</select>
<br>
<select id="image" name="image">
<option value="volvo">Volvo XC90</option>
<option value="debian">debian</option>
<option value="mercedes">Mercedes SLK</option>
<option value="audi">Audi TT</option>
</select>
<button type='submit' class='input_button' value='submit'>Insert </button>
</form>
</div>
<div id="loading" style="display:none">
<p>Loading...!</p>
</div>
</body>
Notice that I used the setTimeout just to simulate the delay of backend's response and e.preventDefault() to avoid submitting the form from here.
Just testing a calculator with some different functions. I got a problem when i move the code to an external js file and then trying to import it. The calculator will not run when i do it this way.
HTML code:
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script type="custom.js"></script>
</head>
<body>
<div><input id="a1" type="text" value="0" min="0"/></div>
<div>Velg en:</div>
<div>Dårlig<input type="checkbox" name="checkbox" class="checkbox_dårlig"></div>
<div>Normal<input type="checkbox" name="checkbox" class="checkbox_normal"></div>
<div>Bra<input type="checkbox" name="checkbox" class="checkbox_bra"></div>
<select>
<option disabled selected value> -- Velg en type -- </option>
<option id="test1">Test 1</option>
<option id="test2">Test 2</option>
<option id="test3">Test 3</option>
<option id="test4">Test 4</option>
<option id="test5">Test 5</option>
</select>
<div>Value: <input id="pris" type="text" value="0" /></div>
</body>
</html>
JS:
$(document).ready(function(){
$('#a1').keyup(calculate);
$(".checkbox_dårlig").change(calculate);
$(".checkbox_normal").change(calculate);
$(".checkbox_bra").change(calculate);
$("select").change(calculate);
$('input[type="checkbox"]').on('change', function() {
$('input[type="checkbox"]').not(this).prop('checked', false);
calculate()
});
});
function calculate(e) { some code }
Can someone see where the problem is?
You didn't import the file. You have to put it in src not type
You have to import it in this way:
<script type="text/javascript" src="custom.js"></script>
I am using This Jquery Multi Select but while using it it gives me error for $(...).multiSelect is not a function. I guees it is the problem of javascript not implemented so i check it twice but I found all javascript need is implemented properly. Below is the necessary code for it
<div id="PageList" class="portlet-body fuelux" >
<select name="Pages[]" size="20" id="Pages" multiple="multiple" style="border:none;width:100%"> <option>xyz</option>
<option value="1">xyz</option>
<option value="2">xyz</option>
<option value="3">xyz</option>
<option value="4">xyz</option>
<option value="5">xyz</option>
<option value="6">xyz</option>
</select>
</div>
<script src="~/assets/plugins/jquery-1.10.1.min.js"></script>
<script src="~/assets/scripts/ui-jqueryui.js"></script>
<script src="~/assets/lou-multi-select-759348a/js/jquery.multi-select.js" type="text/javascript"></script>
<script>
$(document).ready(function () {
$('#Pages').multiSelect();
});
</script>
Here is how you call the Scripts and I have attached a Screenshot of the o/p:
I have Just moved the Scripts above the HTML
Note: its a working example taken from your HTML only
<head runat="server">
<title></title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
<script src="js/jquery.multi-select.js"></script>
<script>
$(document).ready(function () {
$('#Pages').multiSelect();
});
</script>
</head>
<body>
<form id="form1" runat="server">
<div id="PageList" class="portlet-body fuelux" >
<select name="Pages[]" size="20" id="Pages" multiple="multiple" style="border:none;width:100%"> <option>xyz</option>
<option value="1">xyz</option>
<option value="2">xyz</option>
<option value="3">xyz</option>
<option value="4">xyz</option>
<option value="5">xyz</option>
<option value="6">xyz</option>
</select>
</div>
</form>
</body>
Edit: After Adding the Css of Multi select here is the view
I have a select box on my web page, when i selct a value it should add an other select box and if i select a value on second select box i need to add a third select box
Here is my code
<script type="text/javascript" src="http://code.jquery.com/jquery-1.4.2.js">
</script>
<script type="text/javascript"
src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.1/jquery-ui.js">
</script>
<link rel="stylesheet" type="text/css" href="/css/normalize.css">
<link rel="stylesheet" type="text/css" href="/css/result-light.css">
<style type="text/css">
</style>
<script type="text/javascript">//<![CDATA[
$(function() {
$('#colorselector').change(function(){
$('.colors').hide();
$('#' + $(this).val()).show();
});
});
//]]>
</script>
</head>
<body>
<select id="colorselector">
<option value="red">Red</option>
<option value="yellow">Yellow</option>
</select>
<div id="red" class="colors" style="display:none"> <select id="colorselector">
<option value="one">one</option>
<option value="two">two</option>
<option value="three">three</option>
</select> </div>
<div id="yellow" class="colors" style="display:none">
<select id="colorselector">
<option value="one">one</option>
<option value="two">two</option>
<option value="three">three</option>
</select>
</div>
<div id="one" class="colors" style="display:none"> one... </div>
<div id="two" class="colors" style="display:none">
<select id="colorselector">
<option value="one">four</option>
<option value="two">five</option>
<option value="three">six</option>
</select>
</div>
</body>
</html>
I got the second select box, but i cant able to add the third one based on the select select box value
As someone has said above, IDs must be unique.
Use:
Yellow > two
http://jsfiddle.net/psyat5s8/
I have a page that has to have multiple select boxes if needed. I'm using this plugin to style the selectbox.
$('body').on('click', '.add_option.add_title', function() {
$('.add_title_option').after($('.add_title_option .controls').html());
});
This is my javascript that I "clone" the selectbox and add it after it.
<div class="add_title_option">
<div class="control-group">
<label class="control-label" for="title">Title</label>
<div class="controls">
<select id="title" name="title">
<option></option>
<option value="1">Option #1</option>
<option value="2">Option #2</option>
<option value="3">Option #3</option>
<option value="4">Option #4</option>
</select>
<a href="javascript:false;" class="add_option add_title">
<img src="<?=base_url();?>assets/img/add_options.png" alt="" />
</a>
</div>
<div class="error" id="title_error"></div>
</div>
</div>
It does "clone" itselfs, but the select is not functional.
How should I do it to add multiple selects through javascript?
$('body').on('click', '.add_option.add_title', function() {
$('.add_title_option').after($('#title').clone());
});
You need to use
$('.add_title_option').after($('.selectContainer select').clone().show());
Insted of
$('.add_title_option').after($('.add_title_option .controls').html());
In order to clone it, and set display from none to show.
Then you have to transform your select box with .selectBoxIt()
To customize it with this plugin.
Also, I have removed the id from select box to be sure we will not have dublicated ids.
Here is the code:
<!DOCTYPE HTML>
<html>
<head>
<link type="text/css" rel="stylesheet" href="http://gregfranko.com/jquery.selectBoxIt.js/css/jquery.selectBoxIt.css" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.9.2/jquery-ui.min.js"></script>
<script src="http://gregfranko.com/jquery.selectBoxIt.js/js/jquery.selectBoxIt.min.js"></script>
<script>
$(function() {
$(".titleSelect").selectBoxIt();
$('body').on('click', '#dublicateButton', function() {
$('.add_title_option').after($('.selectContainer select').clone().show().selectBoxIt());
});
});
</script>
</head>
<body>
<div class="add_title_option">
<div class="control-group">
<label class="control-label" for="title">Title</label>
<div class="controls">
<div class="selectContainer" >
<select class="titleSelect" name="title">
<option></option>
<option value="1">Option #1</option>
<option value="2">Option #2</option>
<option value="3">Option #3</option>
<option value="4">Option #4</option>
</select>
</div>
<a href="javascript:void(null);" id="dublicateButton" class="add_option add_title">
click
</a>
</div>
<div class="error" id="title_error"></div>
</div>
</div>
</body>
</html>