var macTeamList = "Team" + "<br>";
var macScoreList = "Score" + "<br>";
var nicTeamList = "Team" + "<br>";
var nicScoreList = "Score" + "<br>";
$('form').submit(function(e) {
if ($('input[name="Player1"]').val() ==="Nic") {
e.preventDefault();
var nicTeamValue = $('input[name="Team1"]').val();
nicTeamList += nicTeamValue + "<br>" ;
var nicScoreValue = $('input[name="Score1"]').val();
nicScoreList += nicScoreValue + "<br>";
$('#nicteamcolumn').html(nicTeamList);
$('#nicscorecolumn').html(nicScoreList);
return false;
}
else if ($('input[name="Player1"]').val() === "Mac") {
e.preventDefault();
var macTeamValue = $('input[name="Team1"]').val();
macTeamList += macTeamValue + "<br>" ;
var macScoreValue = $('input[name="Score1"]').val();
macScoreList += macScoreValue + "<br>";
$('#macteamcolumn').html(macTeamList);
$('#macscorecolumn').html(macScoreList);
return false;
}
})
<form>
<input name="foo" id="team" class="teamcolumn" type="text" value="Team?">
<input name="foobar" id="score" class="inputright" type="text" value="Score?">
<input type="submit" value="Go">
<select name="select" size="1" id="PID">
<option value="Nic">Nic</option>
<option value="Mac">Mac</option>
</select>
</form>
<div id ="nicteamcolumn" class="teamcolumn TOSRcolumn nicColumn">Team </div>
<div id="nicscorecolumn" class="scorecolumn TOSRcolumn nicColumn">Score</div>
<div id="macteamcolumn" class="teamcolumn TOSRcolumn macColumn">Team </div>
<div id="macscorecolumn" class="scorecolumn TOSRcolumn macColumn">Score</div>
Basically, I am having the user input 2 text values as well as choose from 2 options on a drop down menu. If the user chooses "Mac" the info in the two fields should print to #macscorecolumn and #macteamcolumnand vice versa if they choose "Nic". The list variables are keeping track of the whole list of scores so the new score is simply added to the end and they're all shown. Not sure why the script isnt working. Any help would be awesome
First of all, your code actually needs a rewrite :)
You don't need to submit a form to do this kind of thing, you could merely add either a link or a button (for GO), add a click function to it, and do your stuff in there.
Also I agree with Kunal that your syntax for the if statement is incorrect etc.
Just practice some more and remember that the jquery docs is your friend... :)
Here is your code I modified a little bit to make it work for you. But remember, you don't need a form for this, I just didn't have time to rewrite it differently for you. I also included jquery library just in case you missed that, which is critical.
<form>
<input name="foo" id="team" class="teamcolumn" type="text" value="Team?">
<input name="foobar" id="score" class="inputright" type="text" value="Score?">
<button id="dostuff" value="Go">Go</button>
<select name="select" size="1" id="PID">
<option value="Nic">Nic</option>
<option value="Mac">Mac</option>
</select>
</form>
<div id ="nicteamcolumn" class="teamcolumn TOSRcolumn nicColumn">Team </div>
<div id="nicscorecolumn" class="scorecolumn TOSRcolumn nicColumn">Score</div>
<div id="macteamcolumn" class="teamcolumn TOSRcolumn macColumn">Team </div>
<div id="macscorecolumn" class="scorecolumn TOSRcolumn macColumn">Score</div>
<script src="js/jquery-1.6.4.min.js"></script>
<script>
var macTeamList = "Team" + "<br>";
var macScoreList = "Score" + "<br>";
var nicTeamList = "Team" + "<br>";
var nicScoreList = "Score" + "<br>";
$('#dostuff').click(function(e) {
e.preventDefault();
var teamvalue = $('input[name="foo"]').val();
var teamscore = $('input[name="foobar"]').val();
var pidType = $("#PID").val();
if (pidType =="Mac") {
nicTeamList += teamvalue + "<br>" ;
nicScoreList += teamscore + "<br>";
$('#nicteamcolumn').html(nicTeamList);
$('#nicscorecolumn').html(nicScoreList);
}
else {
macTeamList += teamvalue + "<br>" ;
macScoreList += teamscore + "<br>";
$('#macteamcolumn').html(macTeamList);
$('#macscorecolumn').html(macScoreList);
}
});
</script>
You have used else if condition
Its condition element you have to put some condition
else if{ } // syntax error
else if("somethign goes in here"){ // your code } // correct way
and over here only else can do the thing
You have putted ; at the block end of if statement and and the block end of else. Syntax error
Related
I am trying to figure out a way to fill html form fields based on the selection of a dynamic form dropdown menu.
I have been looking around and trying to tweek what I have found. So far I am up to filling one of my form fields. But have no gone off piste trying to fill all three, leaving the radio empty when I want it to pick up the 0 value on all my dummy entries and select enable (0)
<option value="<?= $row['ENABLED2'] . " - " . $row['ID2'] . " - " . $row['SOLDTO2'] ?>"> ..</option>
<?php
}
?>
</select>
...
<script>
$(document).ready(function() {
$("#ddlModel").on("change", function() {
var GetValue = $("#ddlModel").val();
const GetValueArray = GetValue.split(" - ");
var GetValueSold = GetValueArray[2];
var GetValueID = GetValueArray[1];
var GetValueEn = GetValueArray[0];
$("#SOLDTO2").val(GetValueSold);
$("#ID2").val(GetValueID);
$("#ENABLED2").val(GetValueEn);
});
});
</script>
...
<FORM id='addClient' action='process/process-addclient.php' method='post'>
<input type='text' id='ID2' name='ID2' maxlength='4' placeholder='Four Digit Sage Code' style='display:inline'>
<textarea id='SOLDTO2' name='SOLDTO2' placeholder='Client Name and Address - 6 Lines Max'></textarea>
<input type="radio" name='ENABLED2' id='enable' value='0'> <label for='enable'>Enable Client</label>
<input type="radio" name='ENABLED2' id='disable' value='1'> <label for='disable'>Disable Client</label>
In writing this out I have answered some of my own questions but I cant figure out how to get the last column (radio) to populate.
I am new to JS/JQ
The way to populate the radio field is by using the following code:
<script>
$(document).ready(function() {
$("#ddlModel").on("change", function() {
var GetValue = $("#ddlModel").val();
const GetValueArray = GetValue.split(" - ");
var GetValueSold = GetValueArray[2];
var GetValueID = GetValueArray[1];
var GetValueEn = GetValueArray[0];
$("#SOLDTO2").val(GetValueSold);
$("#ID2").val(GetValueID);
$("#ENABLED2").val(GetValueEn);
//Check radio field based on value of GetValueEn
if (GetValueEn == 0) {
$("#enable").prop('checked', true);
}
else {
$("#disable").prop('checked', true);
}
});
});
</script>
how to remove the emails while unchecking the checkbox from text area, there are multiple emails generated dynamically i can remove all the emails while unchecking the checkbox except the first one...
here is my code
contactsCheckbox is id of checkboxes
showList is id of teenter code herextarea
var email = "";
$(document).on('change', "#contactsCheckbox", function () {
email = "";
if (this.checked) {
email = $(this).val().trim() + ";";
$("#showList").val($("#showList").val() + email);
}
else {
email = this.value;
var strValAdded = $("#showList").val().toString();
var rrr = strValAdded.indexOf(email.trim() + ";");
if (strValAdded.indexOf(email.trim() + ";"))
strValAdded = strValAdded.replace(email.trim() + ";", "");
if (strValAdded.indexOf(email.trim()))
strValAdded = strValAdded.replace(email.trim(), "");
$("#showList").val(strValAdded);
}
});
stringbuilder.Append("<div class=\"checkbox\">");
stringbuilder.Append("<label><input type =\"checkbox\" id=\"contactsCheckbox\" class=\"chk\" value=\"" + data.Email + "\">" + data.Email + "</label>");
stringbuilder.Append("</div>");
So first, element IDs are supposed to be unique. It is not your issue but it is very bad practice and you should correct that anyway. It will cause you more headaches down the road if you do not learn that now.
Your real issue is that your "if" statements are triggering false when you get to a value with a zero index. It is interpreting the zero index as a boolean value check:
Change:
if (strValAdded.indexOf(email.trim() + ";"))
to
if (strValAdded.indexOf(email.trim() + ";") > -1)
Example attached and I put an alert cmd in there so you can more visibly see what is happening with the 0 index boolean check. I also changed your change trigger to look by class instead of ID because your are going to fix your html to no longer be invalid in the near future...hopefully.
$(document).on('change', ".chk", function () {
if (this.checked) {
email = $(this).val().trim() + ";";
$("#showList").val($("#showList").val() + email);
}
else {
email = this.value;
var strValAdded = $("#showList").val().toString();
var rrr = strValAdded.indexOf(email.trim() + ";");
alert(Boolean(strValAdded.indexOf(email.trim() + ";")));
if (strValAdded.indexOf(email.trim() + ";") > -1) {
strValAdded = strValAdded.replace(email.trim() + ";", "");
}
if (strValAdded.indexOf(email.trim()) > -1){
strValAdded = strValAdded.replace(email.trim(), "");
}
$("#showList").val(strValAdded);
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="checkbox">
<label><input type ="checkbox" id="contactsCheckbox" class="chk" value="whatever1#wherwever.com"> whatever1#wherwever.com</label>
</div>
<div class="checkbox">
<label><input type ="checkbox" id="contactsCheckbox" class="chk" value="whatever2#wherwever.com"> whatever2#wherwever.com</label>
</div>
<div class="checkbox">
<label><input type ="checkbox" id="contactsCheckbox" class="chk" value="whatever3#wherwever.com"> whatever3#wherwever.com</label>
</div>
<input type="text" name="lname" style="width: 100%" id="showList" disabled >
I'm trying to create a sort of posting system and it works for the most part, but when the post button is clicked, the input field doesn't get reset. I tried a bunch of different ways and none of them have worked, so here is the last one I tried (CodePen sets up the skeleton code so it wouldn't be the problem) :
HTML:
<form id="post" name="write">
<div class="textbox">
<input class="postwriter" name="post" type="text" placeholder="What's on your mind?" id="myPost">
<button id="Post" onclick= "return write_below(this); return formReset();" value="submit" >Post</button>
</div>
</form>
<div class="posts" id="postDisplay">
<p class="para"><span id='display'></span></p>
</div>
JavaScript:
function write_below(form) {
var input = document.forms.write.post.value;
document.getElementById('display').innerHTML += "<p>" + Math.floor(Math.random()*20) + ": " + input + "</p>" + "<br/>";
return false;
}
function formReset(){
document.getElementById("post").reset();
}
Your onclick looks like this:
onclick="return write_below(this); return formReset();"
Which translates to:
return write_below(this);
return formReset();
After the first return, the script ends. So remove the first return. Your code should look like:
onclick="write_below(this); formReset(); return false;"
Having said that, the return false here, makes no sense, so get rid of it.
function write_below(form) {
var input = document.forms.write.post.value;
document.getElementById('display').innerHTML += "<p>" + Math.floor(Math.random()*20) + ": " + input + "</p>" + "<br/>";
}
Note: All your IDs look similar, which might make the developers or someone who sees your code mad. Is that your intention? 😂
Hello i want to count the ids inside a input type="text"
the values return as this 1,4,6 etc
<input type="hidden" class="selected_ids" value="selected_ids" name="selected_ids[]" multiple="yes" id="selected_ids" />
here the only javascript version :
var testme = function() {
var myInput = document.getElementById('selected_ids');
var myValue = myInput.value;
var myCount = myValue.split(',').length;
document.body.innerHTML += '<br>myValue = ' + myValue + ' | myCount = ' + myCount;
}
<input type="text" class="selected_ids" value="1,4,6" name="selected_ids[]" multiple="yes" id="selected_ids" />
<button onclick='testme()'>test me</button>
You can use split function. for example :
var curval = document.getElementById('selected_ids').value;
var curval_arr = curval.split(',');
var cnt = curval_arr.length;
First, your input type needs to be text and not hidden. It's not possible to enter values in a hidden text box.
So your text box should be :-
<input type="text" class="selected_ids" value="selected_ids" name="selected_ids[]" multiple="yes" id="selected_ids" />
Now suppose the user enters 1,4,6 into the text box(make sure the numbers are separated by a comma). Then on the PHP side you can access as follows.
<?php
$array = explode(',', $_POST['selected_ids']); //this array consists all the elements.
//To get length, do :-
count($array);
?>
I have this split function which I can add more fields by clicking the button. My Problem are if I add a field I can't get the exact amount and back the amount if I remove the field.
Sample Scenario:
The above image show the initial amount -1,000.50. Now these are my problems.
I input 50 in the amount of first field which result to Payee: 1 [-950.50] as the remaining amount for payee. When I add another field it's auto fill the amount and I expect -950.50 because that's the remaining amount. But what I get is the initial amount -1,000.50 in the second field. How to get the updated remaining amount?
If I remove the added field I want to added back the amount. For ex. if the field has 50 and the remaining amount is -950.50. If I remove the field that contains amount of 50 it must be added back in the remaining amount and it will be -1,000.50. How to added back the amount?
Here are what I have tried:
split.html
<table id="dataTable" class="calendar fluid" data-calendar-options='{"maxHeight":70}'"
<caption> Payee: 1
[<span id="remaining">-1,000.50</span>]
</caption>
<tbody>
<tr>
<td class="week-end" id="p_scents"><br/>
*Note: Amount totals must equal transaction total and envelopes must be specified to
enable the split button.<br/><br/>
<p class="button-height">
<span class="input">
<label class="button orange-gradient">Envelope #1</label>
<select name="env[]" class="envelope select compact">
<option value="none">(Select)</option>
<optgroup label="Category">
<option value="1">Internet</option>
<option value="2">Savings</option>
</optgroup>
</select>
<input type="text" name="amt[]" placeholder="0.00" size="10"
id="validation-required" class="input-unstyled input-sep validate[required]"
onkeyup="calculate(0)">
<input type="text" name="note[]" placeholder="note" class="input-unstyled" id="note">
</span>
<span class="with-tooltip">
<img src="{{STATIC_URL}}img/icons/tick.png" title="Default">
</span>
</p><br/>
</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>
<a href="javascript:{}" id="addScnt" class="button orange-gradient icon-plus-round">
Another Envelope
</a>
</td>
</tr>
</tfoot>
</table>
<script>
function calculate(difference) {
var sum = 0;
$(":text").each(function() {
amt = replaceCommaDollar(this.value);
if(!isNaN(amt) && amt.length!=0) {
sum += parseFloat(amt);
total = sum;
difference = -1,000.50 + total
}
});
$("#remaining").html(numberWithCommas(difference.toFixed(2)));
if(difference == 0){
$("#split").html("<button type='submit' class='button orange-gradient'>Split Amount</button>");
}else{
$("#split").html("<button type='submit' class='button orange-gradient' disabled='disabled'>Split Amount</button>");
}
}
$(function() {
var scntDiv = $('#p_scents');
var i = $('#p_scents p').size() + 1;
var remain_amount = Math.abs(replaceCommaDollar($("#remaining").text())).toFixed(2);
$('#addScnt').live('click', function() {
$('<p class="button-height">'+
' <span class="input">'+
' <label class="button orange-gradient">' + 'Envelope #' + i + '</label>' +
' <select name="env[]" class="envelope select compact">'+
' <option value="none" selected="selected">(Select)</option>' +
' <optgroup label="Category">' +
' <option value="1">Internet</option>' +
' <option value="2">Savings</option>' +
' </optgroup>' +
' </select>' +
' <input type="text" name="amt[]" id="split-amount' + i + '" placeholder="0.00" size="10" class="input-unstyled input-sep" onkeyup="calculate(0)" value="'+ remain_amount +'">'+
' <input type="text" name="note[]" placeholder="note" class="input-unstyled">'+
' </span>'+
' Remove</p><br/\>'
).appendTo(scntDiv);
$("#remaining").html('0.00');
$("#split").html("<button type='submit' class='button orange-gradient'>Split Amount</button>");
i++;
return false;
});
$('#remScnt').live('click', function() {
if( i > 2 ) {
test = $('#split-amount'+i).val();
alert(test);
$(this).parents('p').remove();
i--;
}
return false;
});
});
</script>
How to get the updated remaining amount? You are calculating remain_amount on document ready, instead of when you click the add button. You need to move its calculation within the click handler for #addScnt. Just make it the first line of that function and it should recalculate accordingly.
How to added back the amount? We can do this by reading the value out of the input field we are removing. Here is the modified remove click handler to demonstrate.
$('#remScnt').live('click', function() {
// Might not need the if statement
if (i > 2) {
//test = $('#split-amount' + i).val();
//alert(test);
var $p = $(this).parents('p');
// Consider this approach to getting the removed value
var textValue = $p.find('input[name="amt[]"]').val();
var numValue = replaceCommaDollar(textValue);
var $remaining = $("#remaining");
var remainingValue = replaceCommaDollar($remaining.text());
var difference = remainingValue - numValue;
var newRemainingValue = numberWithCommas(difference.toFixed(2)))
$("#remaining").text(newRemainingValue);
$p.remove();
// This might not be needed anymore
i--;
}
return false;
});
Note that given my approach to obtaining the removed value, you might be able to get rid of the logic involving i unless you have other work to do. Consider searching the DOM based on the element you're removing. This is probably slower to execute, but not unreasonably so. It's your choice though and it shouldn't matter too much either way. I think my suggestion is easier to maintain, and if I were to optimize there are other aspects of this page that deserve more attention.
I also recommend creating a functional jsFiddle in the future, your problem would have been much easier to test and solve with a functioning example. I tried creating one, but I had to alter the HTML and JavaScript too significantly, as there are missing JavaScript functions in the source you provided.
I hope that helps! Feel free to ask any questions regarding my answer, but please don't expand the scope of your original problem.