We Keep Coding

Auto POST Form on Interval is missing form field values

I have a script that works fine when a button is used to post the form. But when I convert the form to (auto)post on an interval, the form (field) values are missing when posted.
I know this has something to do with using the closest(form) as the button assists with closest (form) as a reference, but auto post on Interval has no reference for closest (form). Any help is appreciated thanks. By the way my form is on a sql while loop.
A) is the script when used with button.
B) is the script when used with a Auto(post) on interval.
The form)
<form class="updateform" action="" method="" >
<input type="hidden" class ="customerid" name="" value="<?php echo $customerid?>">
<a class ="test" >test</a>
<div class="update"> </div>
</form>
** A)**
<script>
$(document).ready(function(){
$('.test').click(function(event){
event.preventDefault();
var form = $(this).closest("form");
var field1= form.find('.customerid').val();
// Url to post to and Field name and content */
$.post('/test4.php', {customerid:field1},
// Alert Success
function(data){
// Alerts the results to this Div
form.find('.update').html(data);
});
});
});
</script>
** b)**
<script>
$(function() {
var form = $(this).closest("form");
var field1= $('.customerid').val();
function update() {
$.post("/test4.php", {customerid:field1},
function(data){
$('.update').html(data);
});
}
setInterval(update, 3000);
update();
});
</script>

It's probably because of the .closest() method in the second script. You are trying to select the form there which is closest to this up the tree. But in this case this will either be the scope of the function or the window object. Change it to a jQuery selector and select the correct form.
You can test this by yourself by either using console.log or the debugger statement to check what the values of the elements are in the developer tools of the browser. Get familiar with these guys, you'll need them a lot and are essential tools to even the most experienced developer.
If I may give a tip. Name your jQuery elements (the elements you select with $('element')) with a $ prefix. This way you know by reading the variable what kind of value that variable has. Also giving your variables meaningful names makes it even more easy to read and understand. field1 is generic, but customerIdField tells you what field it is.
$(function() {
var $form = $('form.updateform');
var $updateField = $form.find('.update')
var $customerIdField = form.find('.customerid');
var customerIdValue = $customerIdField.val();
function update() {
$.post("/test4.php", {customerid: customerIdValue}, function(data) {
$updateField.html(data);
});
}
setInterval(update, 3000);
update();
});

Live update the text content that lies within a DIV

I am creating a basic calculator using css, html and js. I have a function as follows:
document.getElementById('user_radius').onkeyup = function ()
{
document.getElementById('live_update').innerHTML = this.value;
}
Basically, whatever is typed into the user text box is supposed to live update the text that lies within the span tag with the id of "live_update". I have a text box with an id of user_radius. I save changes and can't get the text to live update. Am I missing a basic principle here?

there are multiple ways to do it
1.mix javascript and DOM. This makes it a little difficult to debug your stuff in the future.
<input id='user_radius' onkeypress='doSomething()' />
function doSomething() {
document.getElementById('live_update').innerHTML = this.value;
}
2.standard jquery method:
<script type="text/javascript">
$(document).ready(function(){
$('#live_update').on('keyup', function(){
$('#user_radius').val($('#live_update').val());
});
});
</script>
3.find a front-end framework that does 2-way data binding for you such as Angular
demo: http://www.angularjshub.com/examples/basics/twowaydatabinding/

this should do the job:
<input id="user_radius" onkeypress="doSomething()" />
function doSomething() {
document.getElementById('live_update').innerHTML = this.value;
}

Updating written text to view while typing

We all know StackOverFlow's system, which basically enables you to see what your written text look like while sending a question.
I'm looking to create this as well on my website, and I would like something to start with.
I obviously don't expect you to write that code for me, but to explain a bit what do I need for that and how would that work.

Edit: Using vanilla js instead of jquery
http://jsfiddle.net/wmjnaj6n/4/
HTML
<input type='text' id='input'>
<div id='update'></div>
Javascript
var element = document.getElementById('input');
var target = document.getElementById('update');
element.addEventListener('keyup', function() {
target.innerHTML = this.value;
});
For completeness, the jquery way would be:
$('#input').keyup(function() {
//do stuff here
$('#update').text( $(this).val() );
});

jQuery - how to determine which link was clicked

I have a simple piece of PHP which generates n copies of the following code:
<p class="ShowSDB_L2" class="center" onClick="FSD_L2('<?php print dbG;?>','<?php print $sLID;?>')">Click Here to See Data</p>
<div class="divSDB_L2">
</div>
It is generated using PHP, so the number of copies is unknown up front.
On another page I have the following Javascript (using jQuery)
function FSD_L2(dbG,SlID)
{
$(".divSDB_L2").load("test15.php?dbG="+dbG+"&SlID="+SlID).css('display','block');
}
When the text above (Click Here to See Data) is clicked, it should add the contents of test15.php between the the two DIV tags.
#Test15.php
<?php
$dbG = $_GET['dbG'];
$SlID = $_GET['SlID'];
print $dbG . " & " . $SlID;
?>
The problem I have is how to determine which of the links was clicked? At present, if I have three copies, and click one, all three copies are activated.
I hope I have made this clear enough. I'm sure there must be a simple way, but I'm quite new to Javascript/jQuery.

Like Brian said, you could just put the same class on all of your links and use the $(this) keyword in jQuery inside of a click function to find out which link was clicked.
Here's a basic example of changing link colors on a nav using this technique: http://jsfiddle.net/9E7WW/
HTML:
<a class="nav">Test</a>
<a class="nav">Test2</a>
<a class="nav">Test3</a>
<a class="nav">Test4</a>
Javascript:
$(document).ready(function(){
$('.nav').click(function(){
// change all to black, then change the one I clicked to red
$('.nav').css('color', 'black');
$(this).css('color', 'red');
});
});

Am not sure I fully understand what it is you are having difficulty with, but the following is how I would do it.
<p class="ShowSDB_L2" class="center" data-dbg="<?php print dbG;?>" data-slid="<?php print $sLID;?>">Click Here to See Data</p>
<div class="divSDB_L2"></div>
$(document).ready(function() {
$(document).on('click', 'p.ShowSDB_L2', function(evt) {
var $p = $(evt.currentTarget),
dbG = $p.data('dbg'),
slid = $p.data('slid'),
$div = $p.next();
FSD_L2(dbG, slid, $div);
});
});
function FSD_L2(dbG, SlID, $div)
{
$div.load("test15.php?dbG="+dbG+"&SlID="+SlID).css('display','block');
}
The click handler is not hardcoded to each p tag. Instead with each p tag we store the required data, ie dbg & slid.
The click handler is then attached once at document ready. jQuery abstracts over the various browsers and passes to its handlers the event object as its first parameter. This object can then be used to find the element on which the event occurred. Refer: http://api.jquery.com/on/
Finally, we fetch the required data from the clicked element, find the div that needs to be updated and then call your custom function.

Here is a cross-browser way to find the element (target) that triggered the event (e):
function getTarget(e){
// non-ie or ie?
e=e||window.event;
return (e.target||e.srcElement);
};

Add the complete URL to your link (or p in this case) using a data attribute:
<p class="ShowSDB_L2" class="center" data-loadurl="test15.php?dbG=<?php echo $dbG; ?>&SlID=<?php echo $SlID; ?>">Click Here to See Data</p>
<div class="divSDB_L2"></div>
Then do all the binding directly in your jQuery so you have direct access to the link that was clicked:
$(document).ready(function() {
$('.ShowSDB_L2').on('click', function(e) {
e.preventDefault();
$('.divSDB_L2').empty().load($(this).data('loadurl')).show();
});
});

change the position of div tag dyanmically with javascript

I have an ASP button in a div to the right side of a page. I want to change the position to the left in the same row dynamically with onchange event of a dropdown.
I did this way:
document.getElementById('divButtonGo').style.Paddingleft="80px"
How do I do this with Javascript?

The example you have provided already is javascript. If you want to change what triggers the code to run, change where you place it.
from an onchange event, into a function in a script tag that is called by something else.
example
<input type="button" onclick="movediv()" />
<script>
function movediv(){
document.getElementById('divButtonGo').style.Paddingleft="80px"
}
</script>

There's several things wrong here. In order of increasing importance:
You're missing the closing slash from your i tag.
I don't see a "divButtonGo" in your html. If it's not there at all, obviously it won't work. If it is, include it in your code snippet.
I'm pretty sure to set the style you're going to need elem.style.paddingLeft, not elem.style.Paddingleft
Your script isn't wrapped inside <script> tags. All Javascript has to be wrapped in these tags, and, in order for that code to operate sucessfully, it's going to have to be placed after the "divButtonGo", or you'll have to wire up an onload event, like window.onload = function() { /* Bombs away! */ };
Your final result should look something like...
<div id="divButtonGo">
My Awesome Content
</div>
<script type="text/javascript">
var el = document.getElementById("divButtonGo");
el.style.paddingLeft = "30px";
</script>
Also, to note, padding wont' exactly change the position of the div, only the position of the content inside. If you want to change the position of the div, use margin-left (in JS, element.style.marginLeft, i believe)
EDIT:
I forgot you wanted it in the onchange event of a dropdown; so you'd do somethign like:
var dropdown = document.getElementById("MyDropDown");
dropdown.onchange = function() {
var el = document.getElementById("divButtonGo");
el.style.paddingLeft = "30px";
};