I'm using jquery.load() to get an html code. This html is a form with js inside.
My problem, I want to get selected value of an input inside this form, but it returned "" even if there is an selected value..
Main-page.html:
url = "http://url-to-get-info-div";
$('#info').load(url);
The Main-page.html then has then a form and script inside
<div id="info">
<select name="nature" title="" required="" class="form-control" id="id_nature">
<option value="">---------</option>
<option value="a-specifier">A spécifier</option>
<option value="perte">Perte</option>
<option value="dommage">Dommage</option>
<option value="retard" selected="">Retard</option>
<option value="non-livre">Contestation livraison</option>
</select>
</div>
<script type="text/javascript">
----some script who need $("#id_nature)---
function calcul_indemnisation(nature_litige = $("#id_nature").val()){
---some work who use id_nature value---
return montant_indemnisation
}
$("#calcul_indemnisation").click(function(){
montant_indemnisation = calcul_indemnisation();
}
</script>
the problem is when a click on the button "#calcul_indemnisation, the return value is not correct because id_nature value is not got correctly
I resolve it ! In fact, I had another select with the same id further in the code! so there was a conflict with the id name
Use .on() to wire up generated elements, or use .load() syntax and give one function as parameter.
function calcul_indemnisation(){
var option = $('#id_nature').find(':selected');
var value = option.val();
var text = option.text();
//perform the calculations
return value;
};
//.load(url, function)
$('#info').load('url-you-need', function(){
//create click event in #calcul_indemnisation
$('#calcul_indemnisation').click(function(){
console.clear();
console.log('triggered with load .click(): ' + calcul_indemnisation());
});
});
//create click event on #calcul_indemnisation inside #info.
$('#info').on('click','#calcul_indemnisation',function(){
let montant_indemnisation = calcul_indemnisation();
console.log('triggered with .on() click: ' + montant_indemnisation);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="info">
<select name="nature" title="" required="" class="form-control" id="id_nature">
<option value="">---------</option>
<option value="a-specifier">A spécifier</option>
<option value="perte">Perte</option>
<option value="dommage">Dommage</option>
<option value="retard" selected="">Retard</option>
<option value="non-livre">Contestation livraison</option>
</select>
<input type="button" id="calcul_indemnisation" value="Click me!"/>
</div>
Related
I have the following HTML code:
<select name = 'category' id='category'>
<option value="a">A <a href="" class = "edit" id ='1'> Click here to edit </a> </option>
<option value="b">B <a href="" class = "edit" id ='b'> Click here to edit </a> </option>
</select>
I am trying like this:
$(document).on('click','.edit', editfunction);
function editfunction() {
alert('hi');
//call here ajax code
}
Firstly your HTML is invalid; you cannot have a elements inside an option:
<select name="category" id="category">
<option value="a">A</option>
<option value="b">B</option>
</select>
To do what you require you can hook to the change event of the select, not the click of the a within the option. You can then use $(this).val() to get the selected value in editFunction():
$(document).on('change', '#category', editfunction);
function editfunction() {
var value = $(this).val();
console.log(value);
// AJAX...
}
Try using the following
$('#category').on('change', function(){
editfunction( $(this).val() );
})
function editfunction(val){
// Make your ajax call here
}
And You actually dont need the tag inside to make this happen
I think this is what u want JSFIDDLE example
I am trying to make a drop-down(B) menu that is hidden at first and when a different form(A) is completed, then this drop-down(B) menu is shown. However, when the page loads, the second drop-down(B) menu is not hidden. Code is below and stored in a php file
<h4>And What Type of Data Are You Focusing On?</h4>
<select name="library_type" id="library_type">
<option value="DNA"> DNA </option>
<option value = "RNA"> RNA </option>
<option value="WGS"> Whole Genome Sequences</option>
<option value="WXS">Whole Exome Sequences</option>
<option value="RNA-Seq">RNA-Seq</option>
<option value = "miRNA-Seq">miRNA-Seq</option>
<option value = "VALIDATION">VALIDATION</option>
<option value = "AMPLICON">AMPLICON</option>
<option value = "ChIP-Seq">ChIP-Seq</option>
<option value = "Bisulfite-Seq">Bisulfite-Seq</option>
<option value = "TARGET_60">TARGET_60</option>
<option value = "TARGET_50">TARGET_50</option>
<option value = "TARGET_61">TARGET_61</option>
<option value = "OTHER">OTHER</option>
</select>
<h4> What Condition are You Interested in? </h4>
<select name="tissueState" id="tissueState">
<option value = "Normal"> Normal </option>
<option value = "Tumor"> Tumor </option>
<option value = "Both"> Both </option>
</select>
<br><br>
<input type="submit" value="Show me Matches">
</form></center>
In a separate file, hideDropDownMenu.js, this is the content of that file.
$("#tissueState").hide();
$(document).ready(function)(){
$('#library_type').change(function(){
var value = $(this).val();
});
});
In the head of the .php file I have this
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="hideDropDownMenu.js"></script>
Here is how the page looks
Your code is buggy...
First of all close correctly the document ready and change event.
From this } to this });
And this $(document).ready(function)(){ must change in $(document).ready(function(){
This is the corrected code:
<script>
$("#tissueState").hide();
$(document).ready(function(){
$('#library_type').change(function(){
var value = $(this).val();
});
});
</script>
Try it: https://jsfiddle.net/ougvw8kk/
In order to hide the dropdown during page load, you need to declare the hide statement inside document ready function.
$(document).ready(function)(){
$("#tissueState").hide();
$('#library_type').change(function(){
var value = $(this).val();
});
});
I have a drop html list. If I select an option from dropdown, I have to assign dropdown value to the javascript variable and display it on html
Here is my code
HTML:
<form method="post">
<select id="dropdown" name="dropdown" onchange="changeHiddenInput(this)">
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
</select>
<input type="hidden" name="hiddenInput" id="hiddenInput" value="" />
<button onclick="changeHiddenInput (objDropDown)">Try it</button>
</form>
<div id="result"> </div>
Javascript:
function changeHiddenInput (objDropDown)
{
var objHidden = document.getElementById("hiddenInput");
objHidden.value = objDropDown.value;
var a = objHidden.value;
result.innerHTML = a || "";
}
But whenever I am submitting the values,it giving error. anything wrong here ?
DEMO
On your demo, you've selected the default onLoad option in jsfiddle.
This causes the site to wrap your entire code within a callback function, meaning that your showit function is not a global function as required by DOM0 inline event handlers.
Change this option to no wrap(head) and it will work.
The code you have will work good on a page, assuming you have the <script> tags for the javascript.
Fiddle here
About your <button onclick="changeHiddenInput (objDropDown)">Try it</button>, objDropDown is not defined... and also add type="button" otherwise the default is a submit button.
I made some changes for the demo, so my code is:
html
<form method="post">
<select id="dropdown" name="dropdown" onchange="changeHiddenInput(this)">
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
</select>
<input type="hidden" name="hiddenInput" id="hiddenInput" value="" />
<button onclick="changeHiddenInput (objDropDown)">Try it</button>
</form>
<div id="result"> </div>
javascript
var select;
window.onload = function () {
select = document.getElementById('dropdown');
console.log(select);
}
function changeHiddenInput(objDropDown) {
console.log(objDropDown);
var objHidden = document.getElementById("hiddenInput");
objHidden.value = objDropDown.value;
var a = objHidden.value;
result.innerHTML = a || "";
}
I know this is simple, and I need to search in Google. I tried my best and I could not find a better solution. I have a form field, which takes some input and a select field, which has some values. It also has "Other" value.
What I want is:
If the user selects the 'Other' option, a text field to specify that 'Other' should be displayed. When a user selects another option (than 'Other') I want to hide it again. How can I perform that using JQuery?
This is my JSP code
<label for="db">Choose type</label>
<select name="dbType" id=dbType">
<option>Choose Database Type</option>
<option value="oracle">Oracle</option>
<option value="mssql">MS SQL</option>
<option value="mysql">MySQL</option>
<option value="other">Other</option>
</select>
<div id="otherType" style="display:none;">
<label for="specify">Specify</label>
<input type="text" name="specify" placeholder="Specify Databse Type"/>
</div>
Now I want to show the DIV tag**(id="otherType")** only when the user selects Other.
I want to try JQuery. This is the code I tried
<script type="text/javascript"
src="jquery-ui-1.10.0/tests/jquery-1.9.0.js"></script>
<script src="jquery-ui-1.10.0/ui/jquery-ui.js"></script>
<script>
$('#dbType').change(function(){
selection = $('this').value();
switch(selection)
{
case 'other':
$('#otherType').show();
break;
case 'default':
$('#otherType').hide();
break;
}
});
</script>
But I am not able to get this. What should I do? Thanks
You have a few issues with your code:
you are missing an open quote on the id of the select element, so: <select name="dbType" id=dbType">
should be <select name="dbType" id="dbType">
$('this') should be $(this): there is no need for the quotes inside the paranthesis.
use .val() instead of .value() when you want to retrieve the value of an option
when u initialize "selection" do it with a var in front of it, unless you already have done it at the beggining of the function
try this:
$('#dbType').on('change',function(){
if( $(this).val()==="other"){
$("#otherType").show()
}
else{
$("#otherType").hide()
}
});
http://jsfiddle.net/ks6cv/
UPDATE for use with switch:
$('#dbType').on('change',function(){
var selection = $(this).val();
switch(selection){
case "other":
$("#otherType").show()
break;
default:
$("#otherType").hide()
}
});
UPDATE with links for jQuery and jQuery-UI:
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js" ></script>
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.2/jquery-ui.min.js"></script>
Demo on JSFiddle
$(document).ready(function () {
toggleFields(); // call this first so we start out with the correct visibility depending on the selected form values
// this will call our toggleFields function every time the selection value of our other field changes
$("#dbType").change(function () {
toggleFields();
});
});
// this toggles the visibility of other server
function toggleFields() {
if ($("#dbType").val() === "other")
$("#otherServer").show();
else
$("#otherServer").hide();
}
HTML:
<p>Choose type</p>
<p>Server:
<select id="dbType" name="dbType">
<option>Choose Database Type</option>
<option value="oracle">Oracle</option>
<option value="mssql">MS SQL</option>
<option value="mysql">MySQL</option>
<option value="other">Other</option>
</select>
</p>
<div id="otherServer">
<p>Server:
<input type="text" name="server_name" />
</p>
<p>Port:
<input type="text" name="port_no" />
</p>
</div>
<p align="center">
<input type="submit" value="Submit!" />
</p>
You have to use val() instead of value() and you have missed starting quote id=dbType" should be id="dbType"
Live Demo
Change
selection = $('this').value();
To
selection = $(this).val();
or
selection = this.value;
I got its answer. Here is my code
<label for="db">Choose type</label>
<select name="dbType" id=dbType">
<option>Choose Database Type</option>
<option value="oracle">Oracle</option>
<option value="mssql">MS SQL</option>
<option value="mysql">MySQL</option>
<option value="other">Other</option>
</select>
<div id="other" class="selectDBType" style="display:none;">
<label for="specify">Specify</label>
<input type="text" name="specify" placeholder="Specify Databse Type"/>
</div>
And my script is
$(function() {
$('#dbType').change(function() {
$('.selectDBType').slideUp("slow");
$('#' + $(this).val()).slideDown("slow");
});
});
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
function myfun(){
$(document).ready(function(){
$("#select").click(
function(){
var data=$("#select").val();
$("#disp").val(data);
});
});
}
</script>
</head>
<body>
<p>id <input type="text" name="user" id="disp"></p>
<select id="select" onclick="myfun()">
<option name="1"value="1">first</option>
<option name="2"value="2">second</option>
</select>
</body>
</html>
$('#dbType').change(function(){
var selection = $(this).val();
if(selection == 'other')
{
$('#otherType').show();
}
else
{
$('#otherType').hide();
}
});
I am trying to figure out a way to display a some text based on the drop down item selected by the user, in the "result" div below. I know how to do this with a normal input field but I am having trouble understanding how to pass in "option values" into the javascript function. This is what I tried so far...
In the code below, I am simply trying to successfully pass whatever drop down item value is selected into the javascript function and print out the name of that value in the "result" div... once I am able to do that, I will implement the 'tip' feature described above.
My Markup:
<select onChange="dropdownTip(this.value)" name="search_type" style="margin-right:10px; margin-top:2px;">
<option selected="selected" value="fruit_search">fruits</option>
<option value="veggies_search">veggies</option>
<option value="animals_search">animals</option>
<option value="all_search">all</option>
</select>
<div id="result"></div>
My JavaScript:
<script type="text/javascript">
function dropdownTip(value){
document.getElementByID("result").innerHTML = value;
}
</script>
Is this what you wanted? check the fiddle below
http://jsfiddle.net/b6ydm/
Try this:
<select onChange="dropdownTip()" id="select" name="search_type" style="margin-right:10px; margin-top:2px;">
<option selected="selected" value="fruit_search">fruits</option>
<option value="veggies_search">veggies</option>
<option value="animals_search">animals</option>
<option value="all_search">all</option>
</select>
<div id="result"></div>
<script type="text/javascript">
function dropdownTip(){
var value = document.getElementById('select').value;
document.getElementByID("result").innerHTML = value;
}
</script>