My link:
<?php echo $r['price']; ?>
and my non-working jquery:
$('a[href="buyorderprice"]').click(function(){
$('#sellprice').val($('#buyorderprice').attr('href'))
});
The price value is just a number which is working. Also, I don't want the page to reload when I click the button just update the sellprice input which is:
<input type="text" class="form-control" id="sellprice" name="sellprice" value="<?php echo
$coinTicker->price($coin2[1] , 'sell'); ?>">
the cointicker is the default value of a random number
Using javascript / Vanilla JS, you can achieve it like this:
var a = document.getElementById('buyorderprice');
a.addEventListener('click',setValueNow);
function setValueNow(e) {
e.preventDefault();
var b = document.getElementById('sellprice').value = document.getElementById('buyorderprice').getAttribute('href');
}
Here's a DEMO
Try ...
$("#buyorderprice").click(function() {
$('#sellprice').val($('#buyorderprice').attr('href'));
});
... since #buyorderprice is the id.
To make it more workable, change the href to read href="#" and use value ...
<?php echo $r['price']; ?>
... then you don't have to be concerned about the default anchor functionality that will try to navigate to the price. Then, this line would become ...
$('#sellprice').val($('#buyorderprice').data('value'))
The value of the input is changed, but then your page is reloaded and you don't see what changed. So you need to stop the page from reloading when you click the button.
Here is the code to do that:
$("#buyorderprice").click(function(e) {
e.preventDefault();
$('#sellprice').val($('#buyorderprice').attr('href'));
});
jsFiddle demo here
Related
This code works, but it shows the heading only for an instant, How we can execute an sql query as well as javascript function to change the innerHTML on a form submission.
//HTML
<div id='heading'> </div>
//form
<form method='post'>
<input type='submit name='option' value='option' onclick='myFunction()' >
</form>
//sql query
if(isset($_POST['option'])===true && empty($_POST['option']===true)){
$sql2= 'SELECT * from maptable ORDER by price';
$result = $mysql->query($sql2);
}
//javascript function
<script>
function myFunction(){
document.getElementById('heading').innerHTML ='OptionName';
}
</script>
<input type='submit name='option'
Look at your code here. You skip a quote It should be like this <input type='submit' name='option'
As I see your form submitting without AJAX, so once you click "submit" button, the page will be reloaded and return a result of PHP script execution.
If you want to run your "myFunction" before submitting you can do this:
<form id="myForm">
...
</form>
<input type='button' name='option' onclick="myFunction()">
And "myFunction":
function myFunction(){
document.getElementById('heading').innerHTML ='OptionName';
document.getElementById('myForm').submit();
}
OR, if you want the "heading" div to be shown some time, you can submit the form using timeout:
function myFunction() {
document.getElementById('heading').innerHTML = 'OptionName';
setTimeout(function() {
document.getElementById('myForm').submit();
}, <timeout of submitting in milliseconds>);
}
If my understanding is correct, You want to call the function before the PHP code is executed.
Just change onclick="myFunction()" to onsubmit= "return myFunction()".
It's also a good practice to surrond your document.getElemen.... with a try catch block.
The way you are executing this at the moment isn't going to work. You are posting directly to the same page with your form without AJAX which means the page refreshes. Since JavaScript is client side, it's not going to persist your heading's innerHTML that you set. There are a million and one ways to fix this.
The quickest way to "fix" this is declare what you want the heading to be in your PHP processing and then output that in the H1 element if it exists:
#PHP
if(isset($_POST['option'])===true && empty($_POST['option']===true)){
$sql2= 'SELECT * from maptable ORDER by price';
$result = $mysql->query($sql2);
// Depending on what you want your Heading to be
// $headingName = $_POST['option'];
$headingName = "OptionName";
}
Set your HTML heading like so:
<div id='heading'><?php echo isset($headingName) ? $headingName : '' ?></div>
Also, your input is missing a quotation, and with this change, you don't need the JavaScript portion anymore:
<input type='submit' name='option' value='option'>
I want to pass js variable into hidden form field value. I set value using php echo code but it is not working.
js variable :-
<script type="text/javascript"> var demo = 1; </script>
html :-
<input type="hidden" name="demo_val" value="<?php echo <script>demo</script>" id="demo_val"/>
and in js file call hidden field value :-
$('#demo_val').val();
but it is not working...
How to do it..?
Remove this <?php echo <script>demo</script> from hidden field and leave it blank.
Write followed code
var demo =1;
$('#demo_val').val(demo);
in your script.
You can get value by
var field_vemo = $('#demo_val').val();
Put
document.getElementById("demo_val").value = demo;
in your javascript section
you should pass the variable since javascript yo input hidden, not it´s good idea pass the variable with , you can use jQuery :
var demo = "hola";
$('#demo_val').val(demo);
Now input with name demo_val should have the value "hola"
If you like get the value you can
var valueDemo = $('#demo_val').val();
try this
<input type="hidden" name="demo_val" value="" id="demo_val"/>
<script type="text/javascript">
var demo = 1;
$(document).ready(function() {
$('#demo_val').val(demo);
});
</script>
Im pretty new with javascript programming.
I have some .php code, where 2 dropdown lists (in the same FORM) are populated by 2 different mysqli queries, this works without any problem.
Im trying to get javascript to handle the selected parts of the dropdown lists, with onchange, this works for only one dropdown list, and i cant really figure out how to get around this one.
This is the code that works with one dropdown menu, and it updates automaticly the page without submitting:
$chosen_location = $_GET['Lid'];
$chosen_car = $_GET['Cid'];
?>
<script type="text/javascript">
function changeDropDown(dropdown){
var location = dropdown.options[dropdown.selectedIndex].value;
*var car = dropdown.options[dropdown.selectedIndex].value;*
document.getElementById("form1").action = "test.php?Lid=" + location + "&Cid=" + car;
document.getElementById("form1").submit();
}
</script>
Part of the .php code:
<select size="1" name="form_location_id" id="form_location_id" onchange='changeDropDown(this);'>
<option value = <?php echo ($location_id) ?> selected><?php echo ($location_name) ?></option>
<select size="1" name="form_car" id="form_car" onchange='changeDropDown(this);'>
<option value = <?php echo ($car_type_id) ?>><?php echo "" . ($car_class) . " - " . ($car_manufacturer) . " - " . ($car) . "" ?></option>
The italic marked I know will not catch the correct value, but this is where im at right now...
How is it possible to get an action URL with both selected values ? as this is going to be used in a mysqli query to show data from the actual selection
Thanks in advance... :)
Currently, you are submitting the form through JavaScript. If the selects are inside the form, their values will automatically be submitted when you submit the form. You don't even have to change the action of the form.
So, you can just generate a normal form (including submit button, if you will), and it will work. Then, add a little JavaScript sauce to make it submit automatically.
The code below does just that. JavaScripts adds a class to the body. This is a way to easily change styling based on JavaScript being enabled or not. In this case, I use it to hide the submit button, which is only needed in a non-JavaScript situation.
Then, I bind the on change handler, not unlike yours, to submit the form when a value is selected. By giving the selects a proper name, their values will automatically be added as intended.
Note how the event handlers are bound through code. You don't have to hardcode any calls to JavaScript in the HTML, so you can keep the HTML clean and separate (readability!).
// Bind to load event of the window. Alternatively, put the script at the end of the document.
window.addEventListener("load", function() {
// Indicate that JavaScript works. You can use this to style the document, for instance
// hide the submit button, if the form is automatically submitted on change..
document.body.classList.add("js");
// With JavaScript, you can automatically submit the form, but you still don't have to modify it.
var theform = document.getElementById("theform");
var selects = document.querySelectorAll("#theform select");
for (var i = 0; i < selects.length; ++i) {
selects[i].addEventListener("change",
function() {
alert("submitting now");
theform.submit();
});
}
});
.js button[type="submit"] {
display: none;
}
<!-- Just a form with selects is enough. You don't even have to have JavaScript to post this. -->
<form id="theform" action="test.php" method="get">
<select name="Lid">
<option>Example...</option>
<option>Use PHP,</option>
<option>to fill these.</option>
</select>
<select name="Cid">....</select>
<button type="submit">Post</button>
</form>
You can update your code to following
function changeDropDown(){
var elLocation = document.getElementById('form_location_id');
var elCar = document.getElementById('form_car');
var location = elLocation.options[elLocation.selectedIndex].value;
var car = elCar.options[elCar.selectedIndex].value;
document.getElementById("form1").action = "test.php?Lid=" + location + "&Cid=" + car;
document.getElementById("form1").submit();
}
try to do this
<script>
// get select elements
var form_location_id = document.getElementById('form_location_id');
var form_car = document.getElementById('form_car');
// on change
form_location_id.addEventListener('change', changeDropDown1);
form_car.addEventListener('change', changeDropDown2);
</script>
And change the 'changeDropDown1' and 'changeDropDown2' to your handler function
try this
<script type="text/JavaScript">
var dropdownLocation = document.getElementById("form_location_id");
var dropdownCar = document.getElementById("form_car");
function changeDropDown() {
var location = dropdownLocation.options[dropdownLocation.selectedIndex].value;
var car = dropdownCar.options[dropdownCar.selectedIndex].value;
document.getElementById("form1").action = "test.php?Lid=" + location + "&Cid=" + car;
document.getElementById("form1").submit();
}
</script>
dropdownLocation et dropdownCar are outside the function to save time because this 2 vars need only to be set one time
I want to get the value of the checkbox when #catDelete is clicked.
Below is the html code
<?php $i=1; do { ?>
<input type="checkbox" value="<?php echo $row_cat['cat']; ?>" class="checkboxcat" id="<?php echo $i; ?>" name="catcheckbox" style="border:#cccccc 1px solid; background-color:#fff;"><?php echo $row_cat['cat']; ?>
<span id="CatDelete" style="position:relative; left:10px; color:#ff0000; font-size:10px;">Delete</span>
<?php $i++; } while ($row_cat = mysql_fetch_assoc($cat)); ?>
jquery code - It gives me the value of the first checkbox
$('#CatDelete').click(function(){
alert($('.checkboxcat').attr('id'));
});
Any help appreciated. Did search if there was a duplicate question, but did not find.
You haven't shown much of your stucture, but it looks like the checkbox is a sibling element prior to the span. If so:
$("#CatDelete").click(function() {
var val = $(this).prevAll('input').first().val();
console.log(val);
});
That starts from the clicked element, works backward through siblings looking for input elements, grabs the first one, and gets its value.
But you've edited the question now to say it's in a loop. You cannot have more than one element with the same id ("CatDelete"). You'll need to change the span to use a class instead, and then change the above to use that class. So for instance, if you change it to use the class "CatDelete", then:
// v--- Note the change
$(".CatDelete").click(function() {
var val = $(this).prevAll('input').first().val();
console.log(val);
});
Live Working Copy | Source
But I think I'd probably adjust the structure slightly so that you're not hunting through sibling elements like that. If you put each pair (checkbox and button) inside a container, like a div, you can do something a bit more straightforward to find the matching input:
var val = $(this).closest('div').find('input').val();
E.g.
$(".CatDelete").click(function() {
var val = $(this).closest('div').find('input').val();
console.log("The value for the checkbox is: " + val);
});
Live Working Copy | Source
This wordpress stuff driving me mad again.
I have an output page which uses a short code to call a function (Stores)... the code of which in part is beneath.
It has a dropdown and a table of data, ..the data being dependant on the selected option of the drop down.
I use javascript to set the hidden input...successfully.
In fact I tried a normal, non hidden input as well...same result,..on server side, with$_POST["txtSelection"] or
$_POST["hdnSelect"]
But when I try get it's value on the php server side code, it is empty,..
How on earth do I retrieve it?
the hidden input is inside the form tag.
<?php
function Stores()
{
global $wpdb;
global $MyPage;
$MyPage = str_replace( '%7E', '~', $_SERVER['REQUEST_URI']);
?>
<form name="frmSB_stores" method="post" action="<?php echo $MyPage ?>">
<input type="hidden" name="hdnSelect" id="hdnSelect" value="">
<input type="text" name="txtSelection" size="19" id="txtSelection" value="">
<script type="text/javascript">
function SetDDLValueOnChange (objDropDown) {
var objHidden = document.getElementById("hdnSelect");
if ( objDropDown.value.length > '0')
{
objHidden.value = objDropDown.value; //.substr(0,1);
//alert(" hdn = " + objHidden.value);
window.location = '<?=$MyPage;?>' ;
}
}
</script>
the dropdown's markup here,..then
<table width='100%' border='0' cellspacing='5' cellpadding='3'>
<?php
$Area = $_POST['txtSelection']; //or $_POST['hdnSelect']
which has zilch in it , even though it is set successfully by jvascript
Why is this such an issue in WordPress,
How do i overcome it.
It's nuts spending a full day on something which should be so trivial (works fine in a normal php situation, os asp or asp.net,..but not in WP.)!
TIA
N
This doesn't submit the form it just tell the browser to goto that page. Hence your value always empty.
window.location = '<?=$MyPage;?>' ;
Replace that line with this instead.
document.forms["frmSB_stores"].submit();