ginerjm

From a little hunting around I found this (no, not from W3): var TMS_evt_names = ["<?php echo join("\", \"", $TMS_evt_names); ?>"]; function chkEvent(i) { choice = document.getElementById("evt"+i).value.toUpperCase(); alert("in chkevent with "+choice); idx = TMS_evt_names.indexOf(choice); if (idx < 0) { alert("invalid event"); return false; } else { alert("found "+TMS_evt_names[choice]); return true; } } The array in the first line is being built, since I can see it in my browser. My problem is - when I run it and the function is called, IE tells me the the line with the indexof reference "doesn't support this property of method". I do note that in most examples using indexOf that the arg is a string constant, rather than a variable. How do I get the variable to work in this instance. I already tried using "indexOf(choice.value)" but that didn't work either.

Solved . See my other post "onclick and submit - sequence"

Not an Answer - but problem solved. Since my js submit can't send the text of the submit button that triggered it and therefore my php script didn't know where the submit was coming from I did this. Since the form that was involved had field names unique to that portion of my webpage, I just checked for the existence of one of those names and set the button field name=the text that is in the value= parm. That allowed my script to think that it was coming from the appropriate form and my work can continue. Interestingly enough - the problem wherein an html field that I modified in the JS function prior to the submit now shows up correctly in the PHP script, whereas when I was trying to let the submit button trigger the submit event after the onclick was complete, I was losing the value of that modified field.

From my reading I believe that the onclick event that calls my js function happens before the button (submit) that triggered it actually triggers the php script designated in the form tag. Here's my problem. The JS function that is called by the onclick does some verification that may end up altering the value of a field in the form being submitted. What I'm seeing is that the change to the field is NOT getting picked up by the POST in the php script triggered by the submit button. Is that normal? My debugging tells me that the modification to the field takes place in the js function, and I can even see the change on my screen. But - when the script executes my echos tell me that the value didn't get picked up. It seems that the POST vars are collected as soon as I click on the form's submit button, then the onclick JS function does its thing, and then finally the php script gets called, using the POST vars that had already been created. Is this true?

Finally solved. Once I added my missing closing form tag my JS submit now runs the script that the old 'submit' button used to do. I now consider this problem solved. See my next post for how to handle the value of the submit button which I no longer have available in my php script since JS did the submit.

Normally, I submit forms with a submit button and check the value of that button in my script to see how to handle it. I'm learning how to use a type=button instead and having my js validation function do the submit. Now I discover that my script is not getting the value of the button object (naturally) so my script doesn't know what to do. How does one pass to the PHP script the button name from a JS function? My form is usually submitted with a POST.

Somewhat solved!! I left out a closing form tag for the form preceding my problem forms. Now I'm at least getting the submit to happen - although I still have some html errors occurring now.

Well, you've seen the submit code. Here's the form: function DisplayAnEvent($e,$cntr) { global $php_path,$key,$hide; echo "<tr>".PHP_EOL; echo "<td><form id='entform$cntr' name='entform$cntr' method='POST' action='" . $php_path . 'tmsentry.php' . ">"; echo "<input type='$hide' class='ent_hide' name='eid' value='$key' size=1 tabindex=-1>"; echo "<input type='$hide' class='ent_hide' name='origevt' value='$e->event' size=1 tabindex=-1></td>"; $code=<<<heredocs <td><input class="ent" type="text" id="evt$cntr" name="evt" value="$e->event" maxlength=5 size=5 onchange="PostChgMsg('Event')"></td> <td><input type='$hide' class='ent_hide' id='pid$cntr' name='pid' value='$e->partner_id' size=1 tabindex=-1></td> <td><input type='$hide' class='ent_hide' id = 'orig_pln$cntr' name='orig_pln' value='$e->part_ln' size=1 tabindex=-1></td> <td><input class="ent" type="text" id = 'p_ln$cntr' name="p_ln" value="$e->part_ln" maxlength=25 size=29 onchange="PostChgMsg('Event')"></td> <td><input type='$hide' class='ent_hide' id='orig_pfn$cntr' name='orig_pfn' value='$e->part_fn' size=1 tabindex=-1></td> <td><input class="ent" type="text" id='p_fn$cntr' name="p_fn" value="$e->part_fn" maxlength=18 size=21 onchange="PostChgMsg('Event')"> </td> <td><input type='$hide' class='ent_hide' id='orig_pmi$cntr' name='orig_pmi' value='$e->part_mi' size=1 tabindex=-1></td> <td><input class="ent" type="text" id='p_mi$cntr' name="p_mi" value="$e->part_mi" maxlength=1 size=2 onchange="PostChgMsg('Event')"> </td> <td><input class="ent" type="text" id="sttm$cntr" name="sttm" value="$e->starttime" maxlength=12 size=12 onchange="PostChgMsg('Event')"> </td> <td><input class="ent" type="text" id="drpos$cntr" name="drpos" value="$e->drawpos" maxlength=2 size=3 onchange="PostChgMsg('Event')"> </td> <td><input type='button' class='btn_sm' name='btn' onclick='return ValidateEvent("$cntr","entform$cntr")' value='<- Update this Event'></td> </tr></form> heredocs; echo $code; } Enjoy!

A thought - Does "document.forms" have to be built before referencing?

I have posted the code. I left out the alert immediately preceding the submit line, but I'm sure that the value of 'frm' is correct. The line that fails is simply (exact code pasted below, not re-typed): alert('form name being submitted is '+frm); document.forms[frm].submit(); The whole js function is rather lengthy to be posting here.

Yes - I said that first thing. I have plenty of alerts in my script checking everything.

I also am a fairly new JS developer/user and know what you mean. For me, doing my testing in IE, I find that the little yellow icon in the lower left corner provides a handy pointer to the offending line of code and usually clues me into which line needs my attention. Double click it and see what it says next time you see it appear. Also if you are testing your work on an iphone or ipad, turn on the debug console in Safari. Similar info is provided there.

As it says - my first attempt to submit a form via JS Following an example I found : document.forms["myform"].submit(); I tried the following in my validation function. From the function arg I built a name for the form: function ValidateEntry(i) { frm = "entform"+i; ......} My alert confirms that the form name is correct. Then after going thru my code to do my validation, I attempted to submit the form with this: document.forms[frm].submit(); The error message says: "document.forms[...] is null or not an object" I checked that I have no duplicate form names. I checked that the form name appears in the browser code (IE - view,source). I've also tried a variety of work-arounds, but none succeeded. I even tried using getElementByID to do a submit but that "is not supported". What am I missing here?

It appears that you are doing all you need to do already. You have js building a set of html input fields with an array name field. Submit the form and have your php retrieve your array elements and that's it. Or am I missing something here?

Did a search thru this forum and didn't find anything. I'm starting to think that perhaps jq could make life easier when it comes to modifying css to accomodate multiple browsers (esp. Safari!) and want to do some learning of that library. Does anyone have a good recommendation for a "good" (ie, full of knowledge) JQuery book? Bear in mind that I'm a programmer and not just a newbie. Want something that's not designed "for dummies", not just full of a certain set of examples or "how-tos". Looking for the definitive volume of reference material and that will take me through the initial (short?) learning curve right into all the things that one can do with it. I hate those books that purport to cover it and all they do is tell you how to build a POS system or a dynamic photo gallery. I want to know all that can be done.

ok - I tried doing that, but it didn't perform the change in size. An inquiry on the object right after the new statement returns the original size value and the screen doesn't change either. Thanks for the try tho.

I've tried everything I know. Want to increase the fontsize of a group of "classed" elements depending upon the device the user has. Recognizing the device is working; recognizing the elements with class="x" is working. But I can't get my font to increase. Funny thing is right after I modify the style, I put an alert and it even said that I had succeeded, yet the display doesn't show the change. I'm using this at this point: var p = getElementsByClassName("lblfont"); for(i=0;i<p.length;i++) { if (w<500) { setStyle(p[i],"fontSize","font-size","58px"); } } function setStyle(el, jsprop, cssprop, newval) { if (el.currentStyle) //IE { el.style[jsprop] = newval; } else if (el.style.setProperty) { el.style.setProperty(jsprop,newval); } else //try and get inline style { el.style[cssprop] = newval; } } [\code]

the problem with my minor differences after making div height adjustments was that the clientHeight returned for comparison includes the padding of the div element. By subtracting the top and bottom padding amounts from my proposed 'new' height for the div, my re-size makes it the correct size. left.style.height = (newh - (parseInt(getStyle(left,"paddingTop")) + parseInt(getStyle(left,"paddingBottom")))) +"px"; [\code] Set the div style height to the calculated new height less the two padding amounts already in place.

ok - more info on what is happeng. My three sizes come back as 616, 684 and 610. The 'new' size chosen is 684. This is what I would expect my code to do. After resetting the .height props on all three divs, my 'new' sizes for each respectively are: 692, 700 & 684. Where are these numbers coming from??

Okay - my revised function is below: function FixDivs() { var lh = document.getElementById("left").clientHeight; var mh = document.getElementById("middle").clientHeight; var rh = document.getElementById("right").clientHeight; var newh = Math.max(lh,mh,rh) +"px"; document.getElementById("left").style.height=newh; document.getElementById("middle").style.height=newh; document.getElementById("right").style.height=newh; } It does have an effect, but it is not perfect. It appears to make one div a couple pixels (4?) taller/longer than the other two. Again - I can find no margin settings that affect these - what else could it be?

Adding to my original Post - I should say that the process is having an effect - tried it on a different page that had more noticeable differences and can see progress. BUT - they still have minor differences - a few pixels (4-8?) is all, but still annoying. I have no margins on any of my divs so what is keeping them from lining up perfectly?

I haven't figured out a good design method to get my 3 column page layout to show the 3 divs across at the same height. It occurred to me that JS could help me, after the page was loaded. So - I wrote the following: function FixDivs() { var lh = document.getElementById("left").offsetHeight; var mh = document.getElementById("middle").offsetHeight; var rh = document.getElementById("right").offsetHeight; var newh = Math.max(lh,mh,rh); alert("Current h are: lh "+lh+" mh "+mh+" rh "+rh); document.getElementById("left").style.offsetHeight=newh+"px"; document.getElementById("middle").style.offsetHeight=newh+"px"; document.getElementById("right").style.offsetHeight=newh+"px"; lh = document.getElementById("left").offsetHeight; mh = document.getElementById("middle").offsetHeight; rh = document.getElementById("right").offsetHeight; alert("New h are: lh "+lh+" mh "+mh+" rh "+rh); } I get the values for my three divs and then try and reset all 3 to the max value of those 3 heights. But my second alert (and my eyeballs) show that nothing changes. Any ideas?

another little nuance of learning JS - thanks!! While waiting I did find this on javascriptkit.com: function getStyle(el, cssprop) { if (el.currentStyle) //IE return el.currentStyle[cssprop]; else if (document.defaultView && document.defaultView.getComputedStyle) //Firefox return document.defaultView.getComputedStyle(el, "")[cssprop]; else //try and get inline style return el.style[cssprop]; } [\code] This seems to work for IE as well as both my iPhone and iPad.

ok - a followup to my previous post I'm now using this function to return some css info (none of it inline styles). Works great (thru the help I received on earlier post) for IE device, but the btn and paragraph sizes don't come back to me for an iDevice(Safari). (I get 'null'.) function ShowSizes() { var btn = document.getElementById("btn"); var para = document.getElementById("para"); var div1 = document.getElementById("first_div"); var div2 = document.getElementById("second_div"); var dvc = document.getElementById("devicefld").value; var i_ar=("iPhone","iPad"); if (dvc.match(i_ar)) { var input_sz = window.getComputedStyle(btn, "").getPropertyValue("fontSize"); var p_sz = window.getComputedStyle(para, "").getPropertyValue("fontSize"); } else { var input_sz = btn.currentStyle.fontSize; var p_sz = para.currentStyle.fontSize; } alert("v3Checking Input size is "+input_sz + " para sz is "+p_sz + " First div W: "+div1.offsetWidth + " H: "+div1.offsetHeight + " 2nd div W: "+div2.offsetWidth+ " H: "+ div2.offsetHeight); }

After thanking for the response that I got, I have now found that currentStyle does not work on Safari - ie, iPad or iPhone. My research tells me that this is a known quirk, but I haven't found what the solution is for my original problem on an idevice. Anyone?