I currently have a function in jQuery where It will generate the HTML input fields into XML tags, But there is an issue am having at the moment, I am outputting what I put into the input fields which is great but I keep getting Undefined coming up followed by what I had entered and I cant figure out what it is, something minor but am not too sure.
Below is the function doing all the good stuff, ill link a fiddle so it offers a better insight into whats happening.
$("#form").on("submit", function(event) {
console.log('test');
$("#form").children().find("input").each(function() {
if ($(this).attr("type") == "text") {
output += $(this).attr("data-value");
output += $(this).val();
} else if ($(this).prop("tagName") == "BR" || $(this).prop("tagName") == "FORM") {
output += "
";
} else if ($(this).attr("type") == "submit") {
console.log("ignored");
} else {
output += $(this).attr("data-value");
}
});
$("#output").append(output);
Its a minor issue but I just cant see what it is, advice or pointed in the right direction would be great.
Fiddle Link: Fiddle
Related
I am new on this field. Here is some code.
window.blockMenuHeaderScroll = false;
$(window).on('touchstart', function(e) {
if ($(e.target).closest('.main').length == 1) {
blockMenuHeaderScroll = true;
}
});
This is part of one javascript code in html tag. I don't know what blockMenuHeaderScroll mean and tried to look up it here. https://developer.mozilla.org/en-US/docs/Web/API/Window
But can't find it. Why is that?
And I also don't know what is closest('.main').length mean. Why there is one "." and why ".length"
I'm working on a table with filtering, I can get it to kind of function in fiddle but when I pop it back into DW and test the page it loses functionality. I have tried with the script on the page and inserted into the page, I'm at a loss of where to turn next so any help will be appreciated. I realize it's not complete and all the checkboxes arent set up properly but I really want to know (at this point) is why I lose functionality in dreamweaver - Correction when I test in a browser through Dreamweaver,I've also uploaded to a test server and still no functionality.
fiddle
$("input[name='filterStatus'], select.filter").change(function () {
var classes = [];
var stateClass = ""
$("input[name='filterStatus']").each(function() {
if ($(this).is(":checked")) {
classes.push('.'+$(this).val());
}
});
$("select.filter").each(function() {
if ($(this).val() != 'ZZ') {
stateClass += "." + $(this).val();
}
});
if (classes == "" && stateClass == "") {
// if no filters selected, show all items
$("#StatusTable tbody tr").show();
} else {
// otherwise, hide everything...
$("#StatusTable tbody tr").hide();
// then show only the matching items
rows = $("#StatusTable tr" + stateClass).filter(classes.length ? classes.join(',') : '*');
if (rows.size() > 0) {
rows.show();
}
}
I am sure JTable will solve your problem.
You need to pass the data in the given example's format and it will allow to filter, search and paginate the data.
http://jtable.org/GettingStarted
I am using this simple code to filter through a search form with many text inputs and see if they have a value and then add a class.
Works perfectly in Chrome, safari and Firefox but not in IE9.
$('input[type="text"]').filter(function() {
if ($(this).val() !== '') {
$(this).addClass('used');
}
});
Please advice, thanks in advance!
EDIT
Change to each but doesn't solve the issue... Here it is with the event that triggers the function...
$(document).on('event-ajax-form-is-loaded', function() {
$('input[type="text"]').each(function() {
if ($(this).val() !== '') {
$(this).addClass('used');
}
});
});
From the limited information you shared, this is how you should be doing this:
$('input[type="text"]').filter(function() {
return $(this).val() !== '';
}).addClass('used');
.filter() is supposed to reduce a set of matched elements so its filter function should always return a bool instead of manipulating the DOM.
Edit: Based on your updated code snippet and the page link you shared in the comments, if you are using jQuery in WordPress, then its always safer to wrap the code like so:
(function($) {
/* jQuery Code using $ object */
})(jQuery);
enter code hereIn JS you can check the element value by getting their tag name
for (var i = 0; i < document.getElementsByTagName('input').length; i++){
if (document.getElementsByTagName('input')[i].value == "")
{
alert("The value of textbox at " + i + " is empty");
}
}
Working Demo
Or like what other people suggest, use a .each in JQuery
$('input[type="text"]').each(function(i){
if ($(this).val() == "") {
alert("The value of textbox at " + i + " is empty");
}
});
anohter Working Demo
If you insist to use filter and here you go
$('input[type="text"]').filter(function()
{ return $( this ).val() != ""; }).addClass("used");
Last Working Demo
and jquery filter reference
Hi all im new to jscipt,,, well, programming in general to be honest, but learning slowly for personal use.
I seek guidence on how i could place all the textboxes(inputs) in my index file into a list container, loop through them to check if they are empty or not before clicking the calculate button. If they are empty then inform the user of which one is empty.
Also, is there a way of preventing users from entering text into the textboxes and numbers only.
Background: im creating a form that requires all fields to be populate with numbers(in hours), a graph will then be generated from those values.
ive placed the file in skydrive for folks to download with the link below.
Index file
I did try the following but this alerts me regardless of weather the texboxes are populate or not.
function checkInputsGenerateGraph()
{
if( $('#hutz-hoursInput').val() == ""||$('#hutz-weeksPerYearInput').val() == ""||$('#hutz-jobsPerWeekInput').val() == ""||$('#hutz-hourlyMachineRateInput').val() == ""||$('#hutz-maintneneceDowntimeInput').val() == ""||$('#hutz-scrapRateInput').val() == ""||$('#hutz-toolsPerJobInput').val() == ""||$('#hutz-timeToLoadToolInput').val() == ""||$('#hutz-timeToSetPartsInput').val() == "")
{
alert('One them is empty!!');
}
else
{
$("#hutz-graph").slideDown();
$("#hutz-lblImproveMyProcess").slideUp();
$("#hutz-hoursInput").slideUp();
$("#hutz-weeksPerYearInput").slideUp();
$("#hutz-jobsPerWeekInput").slideUp();
$("#hutz-ourlyMachineRateInput").slideUp();
$("#hutz-ntneneceDowntimeInput").slideUp();
$("#hutz-scrapRateInput").slideUp();
$("#hutz-toolsPerJobInput").slideUp();
$("#hutz-timeToLoadToolInput").slideUp();
$("#hutz-timeToSetPartsInput").slideUp();
$("#hutz-lblMachineDetails").slideUp();
$("#hutz-lblPartSetting").slideUp();
$("#hutzcurrencyPreferenceInput").slideUp();
createChart();
}
}
First off, give all the required elements a common class, for examples sake we'll call this required:
<input type="text" class="required" id="hutz-hoursInput" />
Then, when your checkInputsGenerateGraph() function is called, you can loop over the required elements and check them:
$('.required').each(function() {
if (this.value.length == 0) {
alert(this.id + ' is empty!');
}
});
You could also do something like the following to remove all non-digits from your inputs:
$('.required').change(function() {
this.value = this.value.replace(/[^\d]+/, '');
});
See it in action
Hope that points you in the right direction!
edit
Here's a complete example:-
function checkInputsGenerateGraph() {
var isValid = true;
$('.example').each(function() {
if (this.value.length == 0) {
alert(this.id + ' is empty!');
isValid = false;
}
});
if (isValid) {
alert('do calculations!');
}
}
So, loop over all of the elements first, and make sure they are all populated. If not, set isValid to false so that once the loop completes, the calculations are not performed.
I've got a form with various inputs that by default have no value. When a user changes one or more of the inputs all values including the blank ones are used in the URL GET string when submitted.
So to clean it up I've got some JavaScript that removes the inputs before submission. It works well enough but I was wondering how to put this in a js function or tidy it up. Seems a bit messy to have it all clumped in to an onclick. Plus I'm going to be adding more so there will be quite a few.
Here's the relevant code. There are 3 separate lines for 3 separate inputs. The first part of the line has a value that refers to the inputs ID ("mf","cf","bf","pf") and the second part of the line refers to the parent div ("dmf","dcf", etc).
The first part is an example of the input structure:
echo "<div id='dmf'><select id='mf' name='mFilter'>";
This part is the submit and js:
echo "<input type='submit' value='Apply' onclick='javascript: if (document.getElementById(\"mf\").value==\"\") { document.getElementById(\"dmf\").innerHTML=\"\"; }
if (document.getElementById(\"cf\").value==\"\") { document.getElementById(\"dcf\").innerHTML=\"\"; }
if (document.getElementById(\"bf\").value==\"\") { document.getElementById(\"dbf\").innerHTML=\"\"; }
if (document.getElementById(\"pf\").value==\"\") { document.getElementById(\"dpf\").innerHTML=\"\"; }
' />";
I have pretty much zero JavaScript knowledge so help turning this in to a neater function or similar would be much appreciated.
your script block in your HEAD:
<script type="text/javascript">
function yourFunctionName(){
...your javascript goes here...
}
</script>
and then your onclick:
onclick="javascript:yourFunctionName()"
Seems pretty simple:
<script>
function doSubmit() {
if (document.getElementById("mf").value == "")
document.getElementById("dmf").innerHTML = "";
if (document.getElementById("cf").value == "")
document.getElementById("dcf").innerHTML = "";
if (document.getElementById("bf").value == "")
document.getElementById("dbf").innerHTML = "";
if (document.getElementById("pf").value == "")
document.getElementById("dpf").innerHTML = "";
}
</script>
<input type="submit" value="Apply" onclick="doSubmit();" />
Or you could even get fancy and do something like this:
<script>
function doSubmit() {
var inputs = {
"mf": "dmf",
"cf": "dcf",
"bf": "dbf",
"pf": "dpf"
};
for (var input in inputs) {
if (document.getElementById(input).value == "")
document.getElementById(inputs[input]).innerHTML = "";
}
}
</script>
if you were to use jquery (and there is no reason not to):
if your submit button had an id of say id="submit-button" this 'should' work and would handle any additional inputs that get added
$(document).ready(function () {
$("#submit-button").click(function () {
$(this).parents("form").find(':input').each(function() {
if ($(this).val() === "") {
$(this).innerHTML = "";
}
});
});
});
NOTE: I did not test above code at all
here is an updated version
$(document).ready(function () {
$("form").submit(function () {
$(this).find(':input').each(function() {
if ($(this).val() === "" && $(this).attr("type") !== "submit") {
$(this).attr('disabled', 'disabled');
}
});
});
});
this one is setting the blank inputs to disabled - I could not get the innerHTML = "" to work on Firefox 3.6 on Mac and I did not test above code on other browsers or OS
you would need to download jquery http://docs.jquery.com/Downloading_jQuery#Current_Release and include a reference to it in your html head
to use the innerHTML trick on the inputs parent span tag change the line $(this).attr('disabled', 'disabled'); to
if ($(this).parent().get(0).tagName === "SPAN") {
$(this).parent().get(0).innerHTML = "";
}