Develop Reference

How to hide a field on a condition of selection of another field in javascript?

I have a mainpage.html where I have 2 fields Testtitle and testtype. In testtype we have 2 options Offline and Online. And through I frame I have called a seperate html page in that I have 2 f sepearte fields which has the fields Name and productname.
My problem is I am not able to hide the productname field on a condition where if the testtype is offline.The producttype field should not be visible on if testtype is selcted as offline. Can Anyone help on this?
Mainpage.html
<tr>
<td>
<label class="detailsLabelClass">Title</label>
</td>
<td>
<label id="TestTitle"></label>
</td>
<td>
<label>Type</label>
</td>
<td>
<label id="TestType"></label>
</td>
</tr>
```
Testpage.html
<tr>
<td>
<label> Name</label>
</td>
<td>
<input type="text" id="txt1" />
</td>
</tr>
<tr>
<td>
<label>Product Name<</label>
</td>
<td>
<input type="text" id="txt2" />
</td>
</tr>
Mainpage.js
function LoadProtocolMainPage() {
var MasterModel = new Object();
MasterModel.Testtitle = document.getElementById("Testtitle").innerHTML;
$.ajax({
type: "POST",
contentType: "application/json; charset=utf-8",
dataType: 'json',
data: JSON.stringify(MasterModel),
url: "https://localhost:44/api/MainPage/MasterGet",
success: function (responses, textStatus, XMLHttpRequest) {
if (responses == "Unable to fetch information") {
alert(responses);
}
else {
obj = JSON.parse(responses);
if (obj.testtype == "true") {
document.getElementById("testType").innerHTML = "Offline";
}
else
{
document.getElementById("testType").innerHTML = "Online";
}
var TestpageIFramee = document.getElementById("iframeTestpage");
var TestPageDoc = TestpageIFramee.contentDocument
|| TestpageIFramee.contentWindow.document;
TestPageDoc.getElementById("Name").value = obj.Name;
TestPageDoc.getElementById("ProductName").value = obj.ProductName;

How to add the content of a textarea to the body of an email

Hi there: I've created a form in html with a table using select to choose between options. One option is "Other" which generates a new text area input field. Once the form has been completed the user can email it to themselves. I can get this to work for all the select options except the new 'Other" category. Instead of adding the new text to the email body it states "[object HTMLTableCellElement]". I have been trying to get this to work but have been unable to solve it or find an answer that helps me - as a relative newbie to coding I can't help thinking I'm missing something obvious...any help or suggestions would be great, thanks
`
Email new input
<form action="#" method="post" id="myForm">
<table id="myTable">
<tr>
<td><select name="variableList" id="variableList" class="select">
<option value="" disabled selected>Please choose...</option>
<option value="Var 1">Var 1</option>
<option value="Var 2">Var 2</option>
<option value="Var 3">Var 3</option>
<option value="Other">Other...</option>
</select></td>
</tr>
<tr>
<td id="newVariable"></td>
</tr>
<tr>
<td><input type="email" name="email" id="emailID" placeholder="Your email address..."></td>
</tr>
<tr>
<td><button type="button" class="buttons" onclick="sendEmail()" id="sendEmail()">Email</button></td>
</tr>
</table>
</form>`
And this is the javascript:
document.getElementById("variableList").addEventListener("change", generateTxtBox);
var x = 1;
function generateTxtBox(){
//Create new input textarea if "Other" is selceted from list of options
if (x==1 && document.getElementById('variableList').value == "Other") {
var input = document.createElement("input");
input.setAttribute('type', 'textarea');
input.setAttribute('placeholder', 'Your new variable...');
var parent = document.getElementById("newVariable");
parent.appendChild(input);
x += 1;
}
}
function sendEmail(){
var email = document.getElementById("emailID").value;
var subject = "Email variables";
var variableList = document.getElementById("variableList").value;
document.getElementById("newVariable").addEventListener("change", getText);
function getText(){
document.getElementById("newVariable").textContent = newVariable;
}
if (document.getElementById('variableList').value == "Other"){
window.location = "mailto:" + email + "?subject=" + subject + "&body=" + newVariable;
} else {
window.location = "mailto:" + email + "?subject=" + subject + "&body=" + variableList;
}
}

Assignments work like this: variable = [new value];
Next, you're adding an event listener right before "sending" the email, meaning the function you're setting as handler is never run. Even if it did run, the order is wrong.
Finally, newVariable is actually the id of the <td> you have, which means you're adding a textual representation of the table cell as body to the email link.
document.getElementById("variableList").addEventListener("change", txtBox);
function txtBox() {
// show textarea if "Other" is selected from list of options
document.getElementById("txtBoxRow").style.display = this.value == "Other" ? "table-row" : "none";
}
function sendEmail() {
var email = document.getElementById("emailID").value;
var subject = "Email variables";
var variableList = document.getElementById("variableList").value;
var body = variableList == "Other" ? document.getElementById("newVariable").value : variableList;
window.location = "mailto:" + email + "?subject=" + subject + "&body=" + body;
}
#txtBoxRow {
display: none
}
<table id="myTable">
<tbody>
<tr>
<td>
<select id="variableList" class="select">
<option value="" disabled selected>Please choose...</option>
<option>Var 1</option>
<option>Var 2</option>
<option>Var 3</option>
<option value="Other">Other...</option>
</select>
</td>
</tr>
<tr id="txtBoxRow">
<td>
<textarea id="newVariable"></textarea>
</td>
</tr>
<tr>
<td>
<input type="email" name="email" id="emailID" placeholder="Your email address...">
</td>
</tr>
<tr>
<td>
<button class="buttons" onclick="sendEmail()">Email</button>
</td>
</tr>
</tbody>
</table>

Add selected options value into an array in javascript

I have 2 multiple select boxes where I select some of the options and add it to the other select box. When i click on save, the selected option values should be stored into one array and passed to the home controller. when i put alert i get the proper data but I get the below error in firebug console which i'm not able to solve it.Plse help me in this regard. here is the error and code.
for (var i = 0; i <= PairedSelectBox.options.length; i++) {
selectedClientChips.push(PairedSelectBox.options[i].value);
alert("selectedClientChips == " + selectedClientChips);
}
I get the error in console like this
TypeError: PairedSelectBox.options[i] is undefined
selectedClientChips.push(PairedSelectBox.options[i].value);
This is the html code:
<table>
<tr>
<td>
<label style="font-size: medium;">Client Chip details</label>
</td>
</tr>
<tr>
<td>
<label>Search</label>
<input type="text" id="searchId">
<input type="button" value="Go" onclick="getClientChipDetails();"></td>
</tr>
<tr>
<td>
<label style="font-size: small;">Client-Chip data</label>
</td>
<td></td>
<td>
<label style="font-size: small">Selected Client-Chip data</label>
</td>
</tr>
<tr>
<td>
<select id="MasterSelectBox" name="MasterSelectBox" size="10" multiple="multiple"></select>
</td>
<td>
<button id="btnAdd">> </button>
<br>
<button id="btnRemove">< </button>
</td>
<td>
<select id="PairedSelectBox" name="PairedSelectBox" size="10" multiple="multiple">
</select>
</td>
</tr>
</table>
This is the script:
$(document).ready(function () {
$('#MasterSelectBox').pairMaster();
$('#btnAdd').click(function () {
$('#MasterSelectBox').addSelected('#PairedSelectBox');
});
$('#btnRemove').click(function () {
$('#PairedSelectBox').removeSelected('#MasterSelectBox');
});
});

Try this. I modify your code.
HTML
<table>
<tr><td>Master select box</td><td>Paired select box</td></tr>
<tr>
<td>
<select id="MasterSelectBox" name="MasterSelectBox" size="10" multiple="multiple">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="mercedes">Mercedes</option>
<option value="audi">Audi</option>
</select>
</td>
<td>
<button id="btnAdd"> > </button><br>
<button id="btnRemove"> < </button>
</td>
<td>
<select id="PairedSelectBox" name="PairedSelectBox" size="10" multiple="multiple"></select>
</td>
</tr>
</table>
<button id="save">Save</button>
<p id="output"></p>
Javascript
$(document).ready( function(){
$('#MasterSelectBox').pairMaster();
$('#btnAdd').click(function(){
$('#MasterSelectBox').addSelected('#PairedSelectBox');
});
$('#btnRemove').click(function(){
$('#PairedSelectBox').removeSelected('#MasterSelectBox');
});
$( "#save" ).click( function( e ) {
$( "#output" ).empty();
$.each( $( "#PairedSelectBox" ).val(), function( i, v ) {
$( "#output" ).append( $( "<span> " + v + " </span>" ) );
} );
} );
});
P.S. and use rawgit.com links to libraries, not raw.githubusercontent.com to attach scripts to jsfiddle.

#madhu i had update your code on jsfiddle with following code...
$(document).ready( function(){
var data=[];
//$('#MasterSelectBox').pairMaster();
$('#btnAdd').click(function(){
$("#MasterSelectBox option:selected").each(function () {
var selText = $(this).val();
data.push(selText);
});
$.each(data, function(val, text) {
$('#PairedSelectBox').append( $('<option>').text(text).attr('value',text));
});
});
$('#save_btn').click(function(){
alert("your data is"+JSON.stringify(data));
});
});
check your jsfiddle link

I got it... I had nott delcard the pairedSelectBox.
var PairedSelectBox = document.getElementById("PairedSelectBox");
// alert("PairedSelectBox==="+ PairedSelectBox);
for (var i = 0; i<PairedSelectBox.options.length; i++) {
selectedClientChips.push(PairedSelectBox.options[i].value);
//alert("selectedClientChips == " + selectedClientChips);
}
alert("selectedClientChips==="+selectedClientChips);

Display text with conditions on dropdown [closed]

Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
Questions asking for code must demonstrate a minimal understanding of the problem being solved. Include attempted solutions, why they didn't work, and the expected results. See also: Stack Overflow question checklist
Closed 9 years ago.
Improve this question
I am updating my previous Question:
User has to enter the amounts in text boxes: amt1, amt2, amt3
If they are selecting the option to pay 'Self' value 'S' and they need an Advance payment 'ad' as Yes 'y' then the text box adv1 should display a sum of amt1 + amt2 + amt 3 + $750.
In any other case the value in adv1 should be a 0.00 and of course the text box totalAmt should have the sum always of the amounts always.
I have tried the javascript to get the values of the options onChange and try to evaluate.
However values are not been passed on.
HTML
<table width="800" border="1" cellspacing="0" cellpadding="0">
<tr>
<th>Estimated Travel Cost</th>
<th>AED</th>
<td>
<input name="total" type="text" id "totalAmt"value="" readonly="true" style="text-align:center"/>
</td>
</tr>
<tr>
<th>Amount (AED)</th>
<th>Arranged By</th>
</tr>
<tr>
<td>Arrival (incl Taxes)</td>
<td>
<input name="amt1" id="amt1" type="text" value="0" style="text-align:center"/>
</td>
<td>
<select name = "drop1" id = "str" onChange="updateTextVal()">
<option value="S">Self</option>
<option value="C">Company</option>
</select>
</td>
</tr>
<tr>
<td>Local Travel</td>
<td>
<input name="amt2" type="text" value="" style="text-align:center"/>
</td>
<td>
<select name="drop2">
<option>Self</option>
<option>Company</option>
</select>
</td>
</tr>
<tr>
<td>Accomodation</td>
<td>
<input name="amt3" type="text" value="" style="text-align:center"/>
</td>
<td>
<select name="drop3">
<option>Self</option>
<option>Company</option>
</select>
</td>
</tr>
<td>Estimated Total Cost</td>
<td>
<input name="amt6" type="text" value="" style="text-align:center" />
</td>
<td>
<select name="drop6">
<option>Self</option>
<option>Company</option>
</select>
</td>
</tr>
<tr>
<td>Advance Required</td>
<td>
<select name="advReq" id="ad">
<option value="n">No</option>
<option value="y">Yes</option>
</select>
</td>
<td>
<input name="adv1" type="text" id="adv1" value="0" readonly="readonly" style="text-align:center"/>
</td>
</tr>
</table>
JavaScript
<script>
function updateText() {
var str = this.value;
var $vel = parseInt(document.getElementById("amt1"));
var $el = document.getElementById("adv1");
var val = document.getElementById('ad').value;
var $eval = document.getElementById('str').value;
if(val == 'y'){
if($eval == 's'){
$el.value = "750" + $vel;
} else {
$el.value = "0";
}
}
}
</script>

Html:
<table>
<tr>
<td><input name="amt1" id="txtAmt" type="text" value="" align="left" style="text-align:center" /></td>
<td><select name = "drop1" id="sc"><option value="S">Self</option><option value="C">Company</option></select></td>
</tr>
<tr>
<td>Advance Required</td>
<td><select name="advReq" id="ad">
<option value="y">Yes</option>
<option value="n">No</option>
</select>
</td>
<td><input id='re' name="adv1" type="text" readonly="readonly" value="" /></td>
</tr>
</table>
Javascript
document.getElementById('txtAmt').onkeyup = function(){
var txtV = parseInt(this.value);
var re = document.getElementById('re');
var ad = document.getElementById('ad').value;
var sc = document.getElementById('sc').value;
if(ad == 'y'){
// Yes in Advance Required
if(sc == 'S'){
// Self
re.value = 'Self: ' + (txtV + 750) + '$';
}
else{
re.value = 'Company: ' + (txtV + 750) + '$';
}
}
else{
// No in Advance Required
if(sc == 'S'){
re.value = 'Self: ' + '0.00';
}
else{
re.value = 'Company: ' + '0.00';
}
}
}
Here is demo

You should write a function that gathers the amt1, drop1 and advReq values and sets the appropriate value to adv1.
Then call it when the page is loaded OR the key is released in amt1 OR drop1/advReq select value is changed.
Don't forget that the value in amt1 might be left empty or not be an actual number.

Simply add a onClick function to each of the select elements as onclick="calculateAdvance()" defined as
function calculateAdvance()
{
if(document.forms[0].drop1.getSelectedValue == 'S' && document.forms[0].advReq.getSelectedValue == 'y')
{
var sum = eval(document.forms[0].amt1.value) + 750;
document.forsm[0].amt1.value = sum;
}
}
and change the HTML to
<td><select name = "drop1" onchange="calculateAdvance()"><option value="S">Self</option><option value="C">Company</option></select></td>
and
<select name="advReq" id="ad" onchange="calculateAdvance()">

after posting multiple variables sucess or request.done not working

That post helped me to pass variables from a php Form to javascript.
Now I would like to send them to a php file which should update a DB with the values. For simplicity I created this file which should just return the values to check if it works:
addCOmmentsToDBtest.php:
<?php
$video_id = $_POST['VideoId'];
$starttime = $_POST['starttime'];
echo "Test! \n StartTime = " .$starttime. " videoId = " .$video_id; ?>
The whole jquery $.ajax function which calls addCOmmentsToDBtest.php is in the file below (JqueryTest.php). I tired to pass the data in the url:
url: "addCommentsToDBtest.php?starttime="+ starttime +"endtime="+ endtime +"&text="+text+"&videoid="+videoid,
or to pass the data like this
$.ajax({
url: "addCommentsToDBtest.php",
type: "POST",
data: {
'videoId': '<?php echo $video_id ?>',
'starttime': starttime,
'endtime': endtime,
'text': text,
'cat': cat
}
Both didn't work. The problem is also that in this simple example the string from addCOmmentsToDBtest.php
echo "Test! \n StartTime = " .$starttime. " videoId = " .$video_id;
is not passed to the div tag "log". (I also tried to insert the value in the db, like it should be at the end - didn't work).
To pass the string I tried:
success: function(data) {
$("#log").html("Sucess"+ data);
}
or
complete: function(data) {
$("#log").html("Sucess"+ data);
}
or
request.done(function( msg ) {
$( "#log" ).html("Sucess! Msg =" + msg );
});
The screenshot of the Chrome debugger:
The question is: How can I pass the Data from addCOmmentsToDBtest.php back to check if the variables got transfered in this simple example?
And what I try to achieve in the end is:
To pass the Data from JqueryTest.php to addCOmmentsToDBtest.php and update my DB.
Thanks in advance for any help.
Here the file which contains the whole javascript and php form.
JqueryTest.php:
<?php
$video_id = '153fb143';
?>
<!DOCTYPE html>
<html>
<head>
<title>JQUERY</title>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script>
function addCommentsToDB () {
var videoid = document.getElementById('videoid').value;
var starttime = document.getElementById('starttime').value;
var endtime = document.getElementById('endtime').value;
var text = document.getElementById('text').value;
var cat = document.getElementById('cat').value;
alert ("starttime ="+starttime+"; Endtime = "+endtime+"; text = "+text);
$.ajax({
url: "addCommentsToDBtest.php?starttime="+ starttime +"endtime="+ endtime +"&text="+text+"&videoid="+videoid,
// check ''
// url: "addCommentsToDBtest.php?starttime="+ starttime +"endtime="+ endtime +"&text="+text+"videoId='"+videoId+"'",
// with data use that:
// url: "addCommentsToDBtest.php",
type: "POST",
/* Does not Work
data: {
'starttime': starttime,
'endtime': endtime,
'text': text,
'cat': cat }, */
success: function(data) {
$("#log").html("Sucess"+ data);
}
});
};
</script>
</head>
<body>
<div id="log"> <p>log</p></div>
<div id="msg"></div>
<table>
<tr>
<td><div id="div1">div1</div></td>
<td><div id="div2">div2</div></td>
</tr>
<tr>
<td><div id="div3">div3</div></td>
<td><div id="div4">
<!--ADD Table-->
<form method="post" onsubmit="addCommentsToDB()" action="<?php $_SERVER['PHP_SELF']?>" >
<table width="150px" border="1" cellpadding="0">
<tr>
<td width="25px"><p>start</p></td>
<td width="25px"><p>end</p></td>
<td width="75px"><p>Text</p></td>
<td width="10px"><p>cat</p></td>
<td width="5px"><p>+</p></td>
</tr>
<tr>
<td><input style="width: 75px" type="time" name="starttime" id="starttime"></td>
<td><input style="width: 75px" type="time" name="endtime" id="endtime"></td>
<td><input style="width: 75px" type="text" name="text" id="text"><input type="hidden" id="VideoId" name="VideoId" value="<?php echo $video_id; ?>"></td>
<td>
<select width="15" name="cat" id="cat">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
</select></td>
<td><input type="hidden" name="videoid" id="videoid" value="<?php echo $video_id ?>"><input name="ADD" type="submit" value="add"> </td>
</tr>
</table>
</form>
</div></td>
</tr>
</table>
</body>
</html>

First of all set addCommentsToDB(); return false; into onsubmit of your form. Without it your form will continue submitting.
Second don't use url with GET parameters if you are using ajax POST. Send your data using data attribute.

You need to add an & to the 2nd variable
url: "addCommentsToDBtest.php?starttime="+ starttime +"endtime="+ endtime +"&text="+text+"&videoid="+videoid,
Should be
url: "addCommentsToDBtest.php?starttime="+ starttime +"&endtime="+ endtime +"&text="+text+"&videoid="+videoid,