Pass the selected value in HTML <select> to a javascript variable? - javascript

I am trying to run the js script using the parameters specified on the webpage, when javascript is triggered, a php file will run. The expected output would be the result from getstats.php. It didn't work for some reason. Is it because app1 is not a global variable?
The HTML:
<select name="app" id="app1">
<option value=1>A</option>
<option value=2>B</option>
<option value=3>C</option>
<option value=4>D</option>
</select>
P1: <input type="text" id="p1">
Start Date: <input type="date" id="dt1">
End Date: <input type="date" id="dt2">
<input type="submit" id = "submit" value="Run"><br>
<script src="js/global.js"></script>
The javascript code in the global.js:
$('input#submit').on('click', function() {
var app1 = document.getElementById("app1").value;
var p1 = $('input#p1').val();
var dt1 = $('input#dt1').val();
var dt2 = $('input#dt2').val();
if ($.trim(p1) != '' && $.trim(app1) != '' && $.trim(dt1) != '' && $.trim(dt2) != '') {
$.post('getstats.php', {app1: app1, p1: p1, dt1: dt1, dt2: dt2}, function(data1) {
$('div#stats').html(data1);
});
}
});
Thanks for your help!

I think you forgot to use e.preventDefault in the click event.
If the form elements are inside a form, the button wil trigger the value passed to the form action attribute. This way the value will never be 'passed' to jQuery (JavaScript).
Also The click handler should be wrapped in a document ready function so it waits untill the DOM is ready before trying to bind the event.
$(document).ready(function() {
$('input#submit').on('click', function(e) {
e.preventDefault();
var app1 = $('#app1').val();
var p1 = $('input#p1').val();
var dt1 = $('input#dt1').val();
var dt2 = $('input#dt2').val();
if ($.trim(p1) != '' && $.trim(app1) != '' && $.trim(dt1) != '' && $.trim(dt2) != '') {
$.post('getstats.php', {app1: app1, p1: p1, dt1: dt1, dt2: dt2}, function(data1) {
$('div#stats').html(data1);
});
}
});
});
You can check values in firebug console with console.log('text'); or console.log(var);
Try to log app1 before you start the if statement to see if there is a value in the variable. If it prints undefined, maybe something else is wrong.

Have a look at this question, this question, this question, and this article...
You might also like to check out the .serialize() jquery function, which can help save you a lot of time, especially with validation. http://api.jquery.com/serialize/
hope this helps

I checked your code it's working fine :
Just write your code in
$(function()
{
// Your code
// This function is exceuted when page is loaded.
});
What I tried :
$(function()
{
$('input#submit').on('click', function() {
var app1 = document.getElementById("app1").value;
alert("--"+app1);// <------------ showing correct o/p
var p1 = $('input#p1').val();
alert(p1);
var dt1 = $('input#dt1').val();
var dt2 = $('input#dt2').val();
if ($.trim(p1) != '' && $.trim(app1) != '' && $.trim(dt1) != '' && $.trim(dt2) != '') {
$.post('getstats.php', {app1: app1, p1: p1, dt1: dt1, dt2: dt2}, function(data1) {
$('div#stats').html(data1);
});
}
});
});

Related

Calculation on vTiger field before save handler on Javascript Side (code inside)

I need to understand how to do real time calculation on Edit.js
By searching and looking around i came up with this code in Edit.js of the Contact Module.
calculate_amount: function (){
var units = $("input[name='cf_852']");
var value = $("input[name='cf_854']");
$(units, value).on('keyup', function(){
if (units.val() != '' && value.val() != ''){
var currentamount = units.val() * value.val();
$("input[name='cf_856']").val(currentamount);
}
});
}
Have i done something wrong? Because it doesn't work..
Thanks for all the help!
I should write your keyup function like this:
I tested, it's OK
calculateAmount: function (){
var units = $("input[name='cf_1512']");
var value = $("input[name='cf_1514']");
$(document).on('keyup',"input[name='cf_1512'], input[name='cf_1514']", function(){
if (units.val() != '' && value.val() != ''){
var currentamount = units.val() * value.val();
$("input[name='cf_1518']").val(currentamount);
}
})
},
You must call you function into the function registerBasicEvents.
If the registerBasicEvents function is not available in Edit.js of Contacts module so add it.
registerBasicEvents: function (container) {
this._super(container);
this.calculate_amount();
}
You should pass id's of element instead reference of element for Keyup function. Please find below code snippet and modify your code in vTiger. As I checked all syntax and function written correctly in your script. Just pass the comma separated id's and execute the code. Thanks!
var units = $('#Contacts_editView_fieldName_cf_1512');
var value = $('#Contacts_editView_fieldName_cf_1514');
$('#Contacts_editView_fieldName_cf_1512, #Contacts_editView_fieldName_cf_1514').on('keyup', function(){
if (units.val() != '' && value.val() != ''){
var currentamount = parseFloat(units.val()) * parseFloat(value.val());
$("#Contacts_editView_fieldName_cf_1516").val(currentamount);
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
Input1: <input type="text" id="Contacts_editView_fieldName_cf_1512"/><br/>
Input2: <input type="text" id="Contacts_editView_fieldName_cf_1514" /><br/>
Result: <input type="text" id="Contacts_editView_fieldName_cf_1516"/>

Search not work

I have no idea why this does not work? The select option works without any problems, but the search field does not work...
Nothing happens. The console displays the input from the search field correctly. No error, nothing.
<select id='selector'>
<option value="all">Alle</option>
(more data)
</select>
<input class="form-control search" name="search" id="search" type="text" />
<script>
$(document).ready(function(){
$('#selector').change(onSelectChangeFeed); // select option
function onSelectChangeFeed() {
var feed = $(this).find(':selected').data('feed');
$('#calendar').fullCalendar('removeEventSource', feed);
console.log(feed);
};
$('#search').change(onSearchChangeFeed); // search field
function onSearchChangeFeed() {
var stext = $(this).val();
$('#calendar').fullCalendar('removeEventSource', stext);
console.log(stext);
};
});
</script>
please help me :)
EDIT
i think the problem is here:
eventRender: function (event, element) {
var selector = ['all', event.color].indexOf($('#selector').val()) >= '' || ['all', event.category].indexOf($('#selector').val()) >= '' || ['all', event.title].indexOf($('#selector').val()) >= '';
var searchfield = event.color.indexOf($('#search').val()) >= '' || event.category.indexOf($('#search').val()) >= '' || event.title.indexOf($('#search').val()) >= '';
return (selector, searchfield);
}
I fixed it myself. I changed
return (selector, searchfield);
to
return (selector && searchfield);
and now it works as intended.
Your this is not what you expect to be, so try to get the val using the input element id. $('#search').val()

JQuery .each function not working

I am trying to understand why the following doesn't work:
function SetMaxLength() {
var form = $("body").find("form");
form.each(function () {
var elements = $(this).find("input");
elements.each(function() {
var attr = $(this).attr('data-val-maxlength-max');
if (typeof attr !== typeof undefined && attr !== false) {
$(this).attr('maxlength', attr.value);
}
});
});
}
<form action="/go/somewhere" autocomplete="off" class="form-one" method="post" role="form" novalidate="novalidate">
<input data-val-maxlength="Invalid Email" data-val-maxlength-max="254" type="text" value="">
</form>
when I step through it, it finds 1 form but then on the each part it just skips it, steps over it.
Basically all it is suppose to do it when it sees data-val-maxlength-max attribute, it is suppose to take its value and inject maxlength attribute in the element.
JsFiddle: https://jsfiddle.net/j04vue8r/3/
Since you already have jQuery included in your page, it's better to rewrite your code and make it more "jQuery style".
Here we go:
$('[data-val-maxlength-max]').each(function(){
$(this).attr('maxlength', $(this).data('val-maxlength-max'));
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form action="/go/somewhere" autocomplete="off" class="form-one" method="post" role="form" novalidate="novalidate">
<input data-val-maxlength="Invalid Email" data-val-maxlength-max="254" type="text" value="">
</form>
I've tried your code and it not step over the each function. The problem is the attr() function that doesn't set the maxlenght attribute because you have a mistake in the code: attr is just the value of data-val-maxlength-max and so you have to write something like this:
$(this).attr('maxlength', attr);
This does what you need:
$(function() {
$("form input").each(function() {
var attr = $(this).attr('data-val-maxlength-max');
if (typeof attr !== undefined && attr !== false) {
$(this).attr('maxlength', attr);
}
});
});
There are two problems with above code.
1. Function SetMaxLength is not called
2. variable attr already contains value. So you don't need to do attr.value
Below code works
function SetMaxLength() {
var form = $("body").find("form");
form.each(function () {
var elements = $(this).find("input");
elements.each(function() {
var attr = $(this).attr('data-val-maxlength-max');
if (typeof attr !== typeof undefined && attr !== false) {
$(this).attr('maxlength', attr);
}
});
});
}
SetMaxLength()
Try this
window.onload = function () {
SetMaxLength();
}
function SetMaxLength() {
var form = $("body").find("form");
form.each(function () {
var elements = $(this).find("input");
elements.each(function() {
var attr = $(this).attr('data-val-maxlength-max');
console.log(attr);
if (typeof attr !== typeof undefined && attr !== false) {
$(this).attr('maxlength', attr);
}
});
});
}
All I did was remove attr.value in your if statement. Works fine for me. You don't need the value, since you already grabbed it in the variable : ). I'd encourage you not to use generic terms like "form" and "elements" and "attr". They might cause issues.
By the way, in the future you may wish to use console.log. It helped me figure out the issue here. I did console.log(attr) right after the var attrline to see what we were getting. In Chrome you can view the console by hitting ctrl + shift + J. Since I saw that it was 254, I knew we didn't need to get a new value : ).

Reselect checkboxes after Post in included file

I have page Search.asp (code below). And Filtered.asp which include Search.asp.
<%
Dim CheckForCheckboxes
CheckForCheckboxes = Request.form("chkBoxes")
response.write "CheckForCheckboxes" & CheckForCheckboxes
%>
<div id="ExSearch" name="ExSearch" >
<script>
// on page load check if this page called from POST and have passed checkboxes to select
var str = '<%=CheckForCheckboxes%>'; // {"Make[]":["AIXAM","CADILLAC","JEEP"],"selCountry[]":["5","4","8"]}
if (!str || str.length === 0) {} else {
var Checked = JSON.parse(str);
// alert works here
// This one not work
$("#ExSearch").find('div.list input[type=radio], input[type=checkbox],div.selector select').each(function () {
// alert do not work here
var $el = $(this);
var name = $el.attr('name');
var value = $el.attr('value');
if (Checked[name] && Checked[name].indexOf(value) !== -1 ) {$el.prop('checked', true);}
});
};
// from here function which select checkboxes and hold them in hidden input field before submit, on submit pass this object with form
$(function() {
$('div.list input[type=checkbox], input[type=radio]').on('change',onValueChange);
$('div.selector select').on('change', onValueChange);
function onValueChange() {
var Checked = {};
var Selected = {};
// Hold all checkboxes
$('div.list input[type=radio]:checked, input[type=checkbox]:checked').each(function () {
var $el = $(this);
var name = $el.attr('name');
if (typeof (Checked[name]) === 'undefined') {Checked[name] = [];}
Checked[name].push($el.val());
});
// Hold all dropdowns
$('div.list select').each(function () {
var $el = $(this);
var name = $el.attr('name');
if (!!$el.val()) {Selected[name] = $el.val();}
});
// Put all together to POST
$.ajax({
url: '/Search.asp',
type: 'POST',
data: $.param(Selected) + "&" + $.param(Checked),
dataType: 'text',
success: function (data) {
// Put response data to page and reselect checkboxes, this works good
$("#ExSearch").html(data).find('div.list input[type=radio], input[type=checkbox],div.selector select').each(function () {
var $el = $(this);
var name = $el.attr('name');
var value = $el.attr('value');
if (Checked[name] && Checked[name].indexOf(value) !== -1 ) {$el.prop('checked', true);}
if (Selected[name]) {$el.val(Selected[name]);}
});
// Hold converted object to string values
$("<input type='hidden' value='' />").attr("id", "chkBoxes").attr("name", "chkBoxes").attr("value", JSON.stringify(Checked)).prependTo("#ajaxform");
}
});
};
});
</script>
<form name="ajaxform" id="ajaxform" action="Filtered.asp" method="POST">
</form>
</div>
So If page Search.asp starting I check if object passed via form post method, and if passed I need to select checkboxes which is in this object.
So I create object, then I convert it to string with Json.stringify and then catch form post string and convert back to object with JSON.parse
So everything look ok but checkboxes is not selecting and no errors appears.
What now is wrong?
Note what your code loading first and then loading your all divs so $("#ExSearch").find( cant find any checkboxes.
Try to put your <script></script> code after </form>

How to validate form fields with javascript objects?

I am trying to do some simple form validation using javascript object values. I know it's not "ideal", but I'm just working with a simple form that doesn't need to be iron-clad.
Please see my fiddle example: http://jsfiddle.net/6dXd7/3/
I am trying to make sure that each form field has a value. If so, set the value for myObj.fieldID to yes.
Then, when the form is submitted, check every existing myObj.XXX and be sure all their values are yes.
In my example, I am having trouble creating the object, and I don't know how to cycle through all the objects when the submit button is pressed without specifying each one by name.
Here's the code in the jsfiddle example linked to above:
<script>
$(document).ready(function () {
var myObj = {};
$("input.checkblank").blur(function () {
var inputID = $(this).attr("id");
var contents = $("input#" + inputID).val();
if (contents == "") {
$(myObj).data(inputID, "no");
} else {
$(myObj).data(inputID, "yes");
}
});
$("#verify").click(function () {
if (myObj.first && myObj.second == "yes") {
// ***** Trying to get it to scan through ALL existing myObj's and make sure all their values are "yes" *****
$('.results').text('all good');
} else {
$('.results').text('not good');
}
});
});
</script>
<input type="text" name="first" id="first" class="checkblank"><br />
<input type="text" name="second" id="second" class="checkblank">
check<br />
<p class="results"> </p>
​
​
You were storing field info in jQuery DATA and trying to check them later not in the same place...
var obj = {}
$(obj).data('a','1');
console.log(obj.a); //this will log null, cause there's no attribute 'a' in 'obj'
console.log($(obj).data('a')); //this will log '1' :]
instead do this, you should store you data in attributes from native object like this:
var obj = {}
obj['a'] = '1'; //obj.a = '1' work's too
console.log(obj.a); //now it log '1' :]
Also, your verification function is wrong.. it only check if first exists inside myObj and if second exists and is equal to "yes". So your verification function should be something like this:
$("#verify").click(function() {
var allFieldsOK = false;
for ( var field in checkedFields ) {
if ( !(allFieldsOK = checkedFields[field] ) ) break;
}
$('.results').text( allFieldsOK ? 'all good' : 'not good' );
});
Here is an update to you jsFiddle, it is working for you purpose and should work if you add more input fields with the class checkblank :]
http://jsfiddle.net/6dXd7/5/
replace this
$("#verify").click(.........});
with this
$("#verify").click(function() {
var flag=true;
$('.checkblank').each(function(){ //check all elements with class checkblank
if($(this).val().length==0) //set flag false if anyone of them is blank
flag=false;
})
if (flag) {
$('.results').text('all good');
} else {
$('.results').text('not good');
}
});
...it should work

Categories