Member Avatar for xuexue

hi guys, i just want to ask how could i input an action to a link?? the best choice was to create a button which will do the act, however, im having difficulties with it. now my resort was to add the code to the link..meaning instead of the submit button to perform the action, the link will do it..how could i do that? thanks...^_^

  • 3 Contributors
  • 6 Replies
  • 1K Views
  • 1 Day Discussion Span
  • Latest Post Latest Post by vaultdweller123

Dani AI

Generated

Nice question, . If you need a link to trigger work, keep two rules in mind: give the anchor a real href so the page still works without JS, and choose GET (navigation) vs POST (changes data). showed the GET idea and sketched a redirect; just note that in JavaScript you concatenate with + (not .) and you should URL-encode values.

Example: build a query from the page, then navigate.

<input id="val" type="text" placeholder="value">
<a id="doAction" href="/yourpage.php">Do action</a>

<script>
document.getElementById('doAction').addEventListener('click', function (e) {
  e.preventDefault();
  const v = document.getElementById('val').value.trim();
  const url = this.href + '?x=' + encodeURIComponent(v);
  window.location.assign(url);
});
</script>

On the server you can read it with PHP:

$x = $_GET['x'] ?? '';
// validate/sanitize $x, then act

If you do not want to leave the page, send the data to PHP with POST via fetch and update the UI with the result:

<a id="save" href="/api/do-action.php">Save</a>
<script>
document.getElementById('save').addEventListener('click', async (e) => {
  e.preventDefault();
  const v = document.getElementById('val').value.trim();
  const res = await fetch(e.currentTarget.href, {
    method: 'POST',
    headers: {'Content-Type': 'application/json'},
    body: JSON.stringify({ x: v }),
    credentials: 'same-origin'
  });
  const json = await res.json();
  console.log(json);
});
</script>
// /api/do-action.php
header('Content-Type: application/json');
$payload = json_decode(file_get_contents('php://input'), true);
$x = $payload['x'] ?? '';
// validate, authorize, then:
echo json_encode(['ok' => true]);

Notes: validate on the server, use CSRF tokens for POST, avoid href="#" (it jumps the page), and prefer a <button> for purely client-side actions.

Recommended Answers

All 6 Replies

Member Avatar for CJesusSaves

Perform what kind of action? JS, PHP..?

<script language="javascript">
function doAction(){
alert("Hello World");
}
</script>
<a href="#" onclick="doAction()">Do action</a>

<?php
if ($_GET['act'] == "DoAction")
echo "Hello World";
?>
<a href="myPage.php?act=DoAction">Do action</a>
Member Avatar for vaultdweller123

put an event to your anchor link
ex. lets put a javascript onclick event on your anchor tag

<html>
<head>
<script>
function do_your_thing(){
//put want you want to happen here, ex. an alert script
alert('End of the World!');
}
</script>
</head>
<body>
<a href='#' onclick='do_your_thing()'>click me</a>
</body>
</html>
Member Avatar for xuexue

okei sir, i almost got it, i have another problem, how could i pass the data coming from a javascript to the php?? ^^

Member Avatar for vaultdweller123

then use form... upon submitting the form. all it's data will be send to the server which then PHP parses.

Member Avatar for vaultdweller123

okei sir, i almost got it, i have another problem, how could i pass the data coming from a javascript to the php?? ^^

then make a javascript function.

<script>
function do_your_thing(val){
window.location='yourpage.php?x='.val;
}
Member Avatar for vaultdweller123

<script>
function do_your_thing(val){
window.location='yourpage.php?x='.val;
}
</script>

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.