Update database from onClick using Javascript

Question

I am trying to update a database from an onClick procedure inside an anchor.

<a name=“fs1” onClick="updateArea1();"></a>

I am struggling with the function for updateArea1 as I'm not really sure how I can pass the name "fs1" from the anchor and update the database from a script process.

I would essentially like the database to be updated like this: UPDATE row WHERE id = 1 WITH (name_from_anchor)

However... the variable does not HAVE to come from the name tag. It could be referenced in the parenthesis of the function like this if it's easier.

<a onClick="updateArea1(fs1);"></a>

Any help would be greatly appreciated.

-- UPDATED --

LAUNCH.PHP

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<meta name="apple-mobile-web-app-capable" content="yes" />

    <script src="includes/scripts/jquery-2.0.3.min.js"></script>

    <script>
        function updateArea1(el) {
         $.post("includes/db_update.php", $("#console").serialize());
        }
    </script>

</head>

<body>

    <a name="fs1" onClick="updateArea1(this.name);"></a>
    <a name="fs2" onClick="updateArea1(this.name);"></a>

</body>
</html>

DB_UPDATE.PHP

<?php

include 'db_connect.php';   

$area1= mysqli_escape_String($con,$_POST[]);

$query = "UPDATE previewState SET selected='".$area1."' WHERE id='1';";

mysqli_query($con,$query);

mysqli_close($con);

?>

show your updateArea1() code

Kumar V
– Kumar V

2013-12-29 16:46:21 +00:00
Commented Dec 29, 2013 at 16:46 — Kumar V
– Kumar V, Commented Dec 29, 2013 at 16:46
What exactly is your question? Where are you struggling?

putvande
– putvande

2013-12-29 16:49:39 +00:00
Commented Dec 29, 2013 at 16:49 — putvande
– putvande, Commented Dec 29, 2013 at 16:49
Using names to refer elements is deprecated. Use ids

user2672373
– user2672373

2013-12-29 16:49:57 +00:00
Commented Dec 29, 2013 at 16:49 — user2672373
– user2672373, Commented Dec 29, 2013 at 16:49
@aliasm2k since when is that deprecated?

putvande
– putvande

2013-12-29 16:54:36 +00:00
Commented Dec 29, 2013 at 16:54 — putvande
– putvande, Commented Dec 29, 2013 at 16:54
Since when id's got introduced

user2672373
– user2672373

2013-12-29 16:56:31 +00:00
Commented Dec 29, 2013 at 16:56 — user2672373
– user2672373, Commented Dec 29, 2013 at 16:56

putvande · Accepted Answer · 2013-12-29 16:57:05Z

3

If you pass this as argument can do:

<a name="fs1" onClick="updateArea1(this);"></a>

updateArea1(el){
  alert( el.name)
}

edited Dec 29, 2013 at 16:57

putvande

15.3k3 gold badges37 silver badges51 bronze badges

answered Dec 29, 2013 at 16:50

charlietfl

172k14 gold badges125 silver badges154 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

adroxx Over a year ago

thanks @putvande - Can you also please tell me how I would complete the function to update the db? Basically the part that does this (UPDATE row WHERE id = 1 WITH name)

charlietfl Over a year ago

you would need to send name to server with ajax

adroxx Over a year ago

thanks @charlietfl - I updated my code above. I am referencing another PHP file to update the DB but I'm not sure I'm going about it correctly.

charlietfl Over a year ago

no...you have no form to serialize, want to do something like:$.post(url,{name: el.name}) then receive in php $_POST['name']

Rajaprabhu Aravindasamy · Accepted Answer · 2013-12-29 16:47:35Z

2

Since you have tagged this question with Jquery, why dont you use a click handler for that element like,

$('a').click(function(e){
  e.preventDefault();
  updateAreat1($(this).attr('name'));
})

answered Dec 29, 2013 at 16:47

Rajaprabhu Aravindasamy

67.2k17 gold badges107 silver badges133 bronze badges

Comments

Vikram Deshmukh · Accepted Answer · 2013-12-29 17:04:04Z

2

It's pretty simple. Here's the demo

 <a name="temp"       onClick="updateArea1(this.name);">label</a>


 function updateArea1(el){
   alert( el)
 }

answered Dec 29, 2013 at 17:04

Vikram Deshmukh

16.1k4 gold badges40 silver badges44 bronze badges

1 Comment

adroxx Over a year ago

thanks @srvikram13 - Can you also tell me how I would complete the function to update the db? Basically the part that does this (UPDATE row WHERE id = 1 WITH name)

Anirudhan J · Accepted Answer · 2013-12-29 16:52:41Z

1

When you assign a function to onclick event, you can access the element that triggered the event using this (If the function is global or in window scope).

So just use this.name within updateArea1 function.

function updateAreaa1(){
  updateDb(this.name);  //this will refer to the element that triggered the click event.
}

Hope this helps.

answered Dec 29, 2013 at 16:52

Anirudhan J

2,0726 gold badges27 silver badges46 bronze badges

1 Comment

putvande Over a year ago

Can you explain If the function is global or in window scope?

Collectives™ on Stack Overflow

Update database from onClick using Javascript

4 Answers 4

4 Comments

Comments

1 Comment

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

4 Comments

Comments

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related