I've been through a lot of questions on similar issues, but can't seem to get this working. What I'm trying to do is when a button is clicked, replace the value of a form field with the word 'now' and then submit the form. Initially, the HTML form looks like this:
<tr id="row43" bgcolor="#FF0000">
<form id="form43" name="loggingUpdate" action="index.php" method="POST">
<td>PersonsName</td><td>SGS 1-26</td>
<td><input type="text" name="takeoff" id="takeoff43"/><a href='#' onclick='startTakeoff(43);return false;'><img alt='Start Now' src='brush_24.png' border='0'></a></td>
<td><input type="text" name="landing" /></td><td>0 Mins</td>
<td><input type="text" name="towHeight" /></td>
<td><input type="hidden" name="flightIndex" value="43"/><input type="submit" value="Update..." /> <a href=deleteEntry.php?flightIndex=43><img src="close_24.png" /></a></td>
</form></tr>
The Javascript that's triggered by the onclick is as shown below:
function startTakeoff(flightIndex) {
var flightForm = document.getElementById("form"+flightIndex);
var flightRow = document.getElementById("row"+flightIndex);
flightRow.cells[2].innerHTML = "<input type=\"text\" name=\"takeoff\" value=\"now\"><img alt=\"Start Now\" src=\"brush_24.png\" border=\"0\">";
flightForm.submit();
}
So when the button is clicked, it should replace the cell's value with 'now' and submit the form. The trouble is while it does submit, the changed value doesn't actually get submitted. If I manually add something to one of the other fields (the towHeight for example) and click the button, it does get submitted successfully. In other words, it is only the 'takeoff' field that doesn't get submitted when the button is clicked. I've never worked with Javascript before, so this seems very odd to me.
In the way of background, there is a PHP script that's generating the HTML and taking the submitted input, hence some of the strange IDs. The entire page can be seen here in case I've left anything out http://ad7zj.net/logging/index.php I'd appreciate the help!
You are looking for the .onsubmit() event.
That said, you might be best off just getting the time from the server. It will save you from a whole world of time zones, day light savings time issues, and the number of computers out there with inaccurate time settings.
EDIT:
Ok, thanks to your comment I think I see what is going on.
You are trying to update the form using .innerHTML. .innerHTML is a rather strange beast and full of all sorts of heartache -- yield not to its temptations. It looks like the browser is waiting till the Javascript event is over before actually applying the innerHTML update. That would be my guess, anyways. Outside of the simplest of updates, I avoid the thing.
Nuke this:
flightRow.cells[2].innerHTML = "<input type=\"text\" name=\"takeoff\" value=\"now\"><img alt=\"Start Now\" src=\"brush_24.png\" border=\"0\">";
Try this instead:
// Assuming only one form with one name 'takeoff'
var el = document.getElementsByName("takeoff")[0];
el.value = 'now';
// The rest of the updates shouldn't matter -- the form is being submitted, nothing should be seen.
Related
J'm trying to pass some data from javascript to #ENV in hidden input value, in CVT form.
In the form i have some radio inputs which are working fine and one hidden input to get the leaflet coordinates stored in js variable.
My input looks lick that:
<input value='#ENV{localisation, #GET{coord}} 'name="localisation" type="hidden"></input>
and my code:
[(#SET{coord, JSON.stringify(latlng_tab)})];
In the
console.log (#ENV{localisation, #GET{coord}})
I can see the coordinates but it doesn't work in input.
Can someone help me, please.
In case someone will be looking for an answer.
I had to remove #GET from input and #SET from the code and instead i'm using that:
<input id="localisation" value='' name="localisation" type="hidden">
</input>
var latlng_str = document.getElementById("localisation");
latlng_str.value = JSON.stringify(latlng_tab);
I'm trying to get the value of a textbox into a JavaScript variable. ultimately I'm trying to hide or show different webparts depending on the value in the textbox. I'm piecing the code together to test for input first. Below is the code for the textbox in question that I pulled from Firebug:
<input onfocus="return (TextBox.OnFocus(this, event));" onblur="return (TextBox.OnBlur(this, event));" oninput="return (TextBox.OnInput(this, event));" id="ctl00_m_g_ff1af521_db80_4f46_9a65_42671828173f_FormControl0_V1_I1_T82" scriptclass="TextBox" class="z_VYBB68eomwymAKXW_0 c5_VYBB68eomwymAKXW_0 ef_VYBB68eomwymAKXW_0" wrapped="true" direction="ltr" viewdatanode="83" formid="ctl00_m_g_ff1af521_db80_4f46_9a65_42671828173f_FormControl0" originalid="V1_I1_T82" tabindex="0" title="" value="Visible" style="position: relative;" type="text">
If I use the code below I get an "Undefined" error message(popup). As you can clearly see though, the value of the textbox = "Visible" as the code above tells us.
$(document).ready(function()
{
var HideWeb = $("#ctl00_m_g_ff1af521_db80_4f46_9a65_42671828173f_FormControl0_V1_I1_T82").val();
alert(HideWeb);
});
I've also tried the following with no success (popup returns empty).
var HideWeb = document.getElementById("#ctl00_m_g_ff1af521_db80_4f46_9a65_42671828173f_FormControl0_V1_I1_T82").value;
alert(HideWeb);
I've also tried using the other ID numbers in hopes that one of them would work in the JavaScript\Jquery code above. If someone could pick this apart and help me determine what the problem is I would appreciate it.Thank you.
This correspondes to a question I asked here.......
https://sharepoint.stackexchange.com/questions/113969/showing-hiding-webparts-conditionally
you may try..
$("input:text[originalid='V1_I1_T82']").val()
This will return you the value..
try removing "#"
var HideWeb = $("ctl00_m_g_ff1af521_db80_4f46_9a65_42671828173f_FormControl0_V1_I1_T82").val();
This is my first time using jquery and while this is a fairly simple task I'm stuck already.
I've got a input box with the time of day in it. I would like to create a button to grab the time and send it to a variable (setTime) so I can use the time elsewhere in the script.
However I'm having trouble the variable to pass, I've added an alert window but all I get is either a blank alert or an "undefined" alert.
The first line Start Time.... works fine its the setTime stuff that's broken.
Page header:
setTime = $('#setTime').text();
$('#formTime').timeEntry({show24Hours: true});
Page body:
<p>Start Time <input type="text" size="2" id="formTime" class="spinners" value="" /> </p>
<input type="button" value="Set Time" onclick="$('#setTime').val('#formTime');" />
<input type="button" value="Show Date" onclick="alert(setTime);" />
Thanks
You have to make a few changes to your code.
Update your Html by adding some ids for example.
<p>
Start Time <input type="text" size="2" id="formTime" class="spinners" value="" />
</p>
<input id="setTime" type="button" value="Set Time" />
<input id="showTime" type="button" value="Show Date" />
Personally I don't like assigning script to events within the html controls as they become hard to maintain and add clutter to the page.
You can write script at the bottom of the html page within a script tag or better yet, use an external js file. External js files will also keep your Html clean and your scripts unobtrusive.
var setTime = 0;
var $fromTime = $("#formTime")
$("#setTime").off("click").on("click", function(){
setTime = $fromTime.val();
});
$("#showTime").off("click").on("click", function(){
alert(setTime);
});
See working DEMO
Using jQuery can be confusing at times but the on-line documentation is fantastic.
#setTime means "The element with the id 'setTime'" - you have no element with that id, and the control you are trying to get the value of has no id at all.
timeEntry is not a jQuery method, so will error when you try to call it. If you are using a plugin that you think should add that method then you should say so.
.val('#formTime') will set the value of a form control to the string #formTime. If you want to get the value, don't pass that method an argument … and do assign the return value of the method call to something.
You should probably work through an introduction to programming and JavaScript.
here's the jsFiddle. i'm sorry if it doesn't work properly; damn things rarely do for me... i hate jsFiddle, but it gets the code to you faster...
the php document it goes to simply does this:
<pre><?php
print_r($_POST);?>
</pre>
the rows add to the DOM just fine. but the values do not submit to the $_POST array.
what am i missing?
and yes i've read this and this and they don't help.
using Mootools, btw, so please don't bother with any jQuery answers.
In your code I see an HTML syntax error. Can you check this line:
<input class="catCell" name"catlist" id="catList" type="text" tabindex="345"
value="none or name" onChange="markFilled('catList', this.value);">
The syntax error is on name attribute, that is essential to get form submission work...
Having your form element inside a table element can also be a cause of this issue
$('nextStep').addEvent('click', function(e) {
console.log('BAM! form intercepted!');
$('clientDataForm').send();});
basicly all i did is add }); to the end..
and amazingly, it works!
here:
http://jsfiddle.net/36yC5/9/
Most of these errors coming from the wrong structure of HTML.
Cases:
1. Form element start within the table OR Form close before the table end
<table><form>
<tr><td><input type="text" name="fname"></td></tr>
<tr><td><input type="text" name="lname"></td></tr>
</form></table>
This will not work
<form><table>
<tr><td><input type="text" name="fname"></td></tr>
<tr><td><input type="text" name="lname"></td></tr></table></form>
This will work (Observe the form begin before the table and ends after the table)
Form start OR end inappropriate place
Not specifying "name" attributes
I'm trying to build some basic HTML form validation in Javascript. My form is held in a table and I've got an extra column to the right of each input with an ID of "ErrorX", which is initially populated with some text to show it's a required field.
<FORM NAME="ContactForm" METHOD=POST ACTION='Order3.php' onsubmit="return validateForm()">
<TABLE>
<TR>
<TD ALIGN=LEFT>Your name:</TD>
<TD ALIGN=RIGHT><INPUT TYPE=TEXT ID="Field1" NAME="Field1"></TD>
<TD ALIGN=LEFT ID="Error1">Required</TD>
</TR>
</TABLE>
<input type=submit value='Confirm ->'></FORM>
When the submit button is pressed, I've got the code validates the fields and attempts to change the right-most column text. The line of code that does this is:
document.getElementById("Error1").innerHTML = "ERROR";
The code executes and detects the error correctly, and the existing wording is removed, but the new text does not appear. If I query the value of document.getElementById("Error1").innerHTML, I get the correct text, but it's not appearing on the screen.
I'm using Safari v5.1.2 and it works with basic examples I've copied from the web, so I think it's my code rather than the browser.
innerHTML works for sure in safari. See this demo http://jsfiddle.net/zxMKM/
The obvious reason is that your html markup is invalid and the browser does its own error recovery and producing its own DOM in the process.
So please validate your html http://validator.w3.org/
Also please note that td.innerHTML is read only for IE8.
So, its more cross platform friendly to use td.innerText
I had similar issue on iPAD safari, it is not updating div value properly.
I have gone through lot of posts and tried out lot of options, but what works for me is text().
<td align="left"><div id="Error1">Required</div></td>