ginerjm

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?

thank you So Much! Couldn't figure it out and didn't realize that the different ways of getting styles mattered. Some new material to read on now....

Trying to do some checking on my code and I have added an onclick to a button to call this function: function ShowSizes() { var btn = document.getElementById("btn"); var input_sz = btn.style.fontSize; var para = document.getElementsByTagName("p"); var p_sz = para[0].style.fontSize; /* the above don't show any values - nor do they say 'undefined' */ var div1 = document.getElementById("first_div"); var div1w=div1.offsetWidth; var div2 = document.getElementById("second_div"); alert("Checking Input size is "+input_sz + " para sz is "+p_sz + " First div W: "+div1w + " H: "+div1.offsetHeight + " 2nd div W: "+div2.offsetWidth+ " H: "+ div2.offsetHeight); } The function works but only partially. The div tag info is shown in the alert box, but the retrieval of the paragraph and my input fields with the id of 'btn' doesn't work. What am I doing wrong?

Do any of them work? I have the following: var uid = window.open(url, '', 'modal=yes,dialog=yes,scrollbars=0,height=350,width=400,left='+left+', top='+top+', status=0 ,location=0, menubar=0'); The resulting window has a location bar, a status bar but thankfully, no menu bar. I'd like to get rid of everything to have it look more like a dialog box but I can't seem to. It also doesn't function "modally" altho I would like it to. I was using a showmodal before but found out from this site that it's not a good choice. But I sure would like to get these options to work. btw - I have tried to use "no" values as well.

If this is off-topic, I'll understand if the mods want to remove it. I SOLVED THIS BY REMOVING THE DIV_BLACK AND BRINGINT UP THE OPACITY OF THE MAINDV - SAME EFFECT BUT WORKS ON BOTH SYSTEMS NOW. Here goes. I have a little JS code that modifies the opacity of an element on my page as part of the "onload" event. Works great in IE, not so great in Safari on my iphone. I have the following: maindv: has a background image div_black: a fullscreen div as is the above one that is all black - hiding the image behind it. div_text : has a paragraph of text displayed over the image div_imgname: a text line displayed over the bottom of the image. They are used in the following way: <div id="maindv"> <div id="div_black"> <div id="div_text"> <p> some text</p> </div> <div id="div_imgname"> <p>some text</p> </div> </div> </div> The onload event calls a workiing JS function that modifies the opacity in increments from a "start" value to an "end" value. So - one of the calls alters the black div from 100 down to 1; two other calls alter the opacity of the _text and _imgname divs from 30 to 100. The overall effect is to begin with a black screen and quickly "bring up" the image as well as the text areas. In IE it works fine. In safari the image portion works fine, but the text pieces first fade "in" but then quickly fade "out". I'm not sure if they are actually fading out, or if they are being covered by the image that is now showing thru the 'black' div that had its opacity reduced. You can see it in action at "jimginer.net" Any ideas on what Safari might be doing to make it not work? I mean - it seems to begin to work just fine, but then goes "too far" and hides the text areas by either covering them with the image or somehow reversing course and fading the text after making it appear.