CODEWITHSUNDEEP
javascriptphpbuttontext
LearntoExcel
LearntoExcel

Reputation: 129

Get button text value to determine variable value

I am trying to write a function for my wordpress site that first obtains the text value of a button and then determines the value of a variable from that.

I have three buttons. Each has the same text value, "Select Item". I have written a javascript function (simplified below to show one example only) that changes the text value to "Selected" when clicked. Now I need to find a way to determine whether the text value of the button was changed to "Selected" and then change a variable called $amount to a new value. I know this can be done with jquery but the reason I am trying to avoid it is because I need it to work with a specific wordpress function and calling scripts within functions.php of wordpress gets confusing. I tried to change the buttons to inputs and put them in a form so I can try $_POST method but my understanding for that is that the $_POST method only works for submission and I need the variable to change before any submit.

 <a href="#" class="selectitem1" type="submit">Select Item</a>
 <a href="#" class="selectitem2" type="submit">Select Item</a>
 <a href="#" class="selectitem3" type="submit">Select Item</a>

$(function() {                     
  $("a.selectitem1").click(function() {  
   $("a.selectitem1").text('Selected');
  });
});

//not sure what to do here
add_filter( 'abcde', 'adjust_amount');
function adjust_amount() {

    if selectitem1 text value is now "Selected"{
    $amount = 50;
    if selectitem2 text value is now "Selected"{
    $amount = 150;
    if selectitem3 text value is now "Selected"{
    $amount = 250;
}

Upvotes: 0

Views: 489

Answers (2)

James
James

Reputation: 567

I would use an AJAX:

In your form files at the following:

<!DOCTYPE html>
<html>
<body>

<form action=""> 
<input type="button" id="txt1" value="Select Item" name="£10.00" onclick="showValue(this.name)">
<input type="button" id="txt1" value="Select Item" name="£15.00" onclick="showValue(this.name)">
<input type="button" id="txt1" value="Select Item" name="£20.00" onclick="showValue(this.name)">
</form>

<p>Value: <span id="txtValue"></span></p> 

<script>
function showValue(str) {
  var xhttp;
  if (str.length == 0) { 
    document.getElementById("txtValue").innerHTML = "";
    return;
  }
  xhttp = new XMLHttpRequest();
  xhttp.onreadystatechange = function() {
    if (xhttp.readyState == 4 && xhttp.status == 200) {
      document.getElementById("txtValue").innerHTML = xhttp.responseText;
    }
  };
  xhttp.open("GET", "getinfo.php?q="+str, true);
  xhttp.send();   
}
</script>

</body>
</html>

Then create a file called getinfo.php and add the following:

 <?php
// Array with names
$a[] = "£10.00";
$a[] = "£15.00";
$a[] = "£20.00";


// get the q parameter from URL
$q = $_REQUEST["q"];

$value = "";

if ($q !== "") {
    $q = strtolower($q);
    $len=strlen($q);
    foreach($a as $name) {
        if (stristr($q, substr($name, 0, $len))) {
            if ($value === "") {
                $value = $name;
            } else {
                $value .= ", $name";
            }
        }
    }
}

echo $value === "" , $value;
//More code here for your selected $value variable
?>

Upvotes: 0

Bart
Bart

Reputation: 1609

You already seem to be including jQuery on the page, so I don't see why you would prefer not to use jQuery to set the $amount variable?

The easiest way to get the desired functionality, would be as follows:

$(function() {                     
    $('a.selectitem1').click(function() {  
        $('a.selectitem1').text('Selected');
        $('a.selectitem2').text('Select item');
        $('a.selectitem3').text('Select item');
        $amount = 50;
    });

    // equivalently for selectitem2 and selectitem3
});

Upvotes: 1

Related Questions