I have a script, that takes the value from two select tags, and then do a simple math multipy to calculate a price. The thing I need, but cannot figure out is, how to get that calculated price, and use it as an php variable in a POST form.
As the calculated price is dynamic, how can I archive this?
If you want to send that value directly to a PHP script, you can use the jQuery post method:
$.post("yourScript.php", { price: yourPriceVar }, function(data) {
//Success! Do something interesting
});
Alternatively, you could set the value of a hidden input element to your calculated value, so that it can be submitted along with the rest of your form:
$("#hiddenInput").val(yourPriceVar);
HTML:
<input type="hidden" id="hiddenInput" name="price" />
to set the calculated price in the form use :
document.FORMNAME.FIELDNAME.value = CALCULATED_VALUE;
or jquery style
$('input[name="FIELDNAME"]').value(CALCULATED_VALUE);
in your javascript.
in the form add an hidden field IE.
<input type="hidden" name="FIELDNAME" value="" />
if you are using $.ajax() or $.post(), simply append a new value to data parameter
if you are using common form submit, simply create a new input with the name attribute inside the form and set the calculated price to the value
Related
Good Day,
I'm trying to create a form calculate (a currency converter), in which when you are typing in the value of amount in USD, the other field is updated immediately without clicking any submit button. I have been searching but haven't gotten an answer (maybe due to searching for the wrong keywords).
An Example
<html>
<form action="">
<input type="number" name="amountUSD" value="1"><br/>
<input type="number" name="amountNGN" value="">
</form>
</html>
What I want to achieve is when the page loads, automatically, the value of amountNGN field should be 365 and of I remove the value of amountUSD field or make the value 0, the 365 in amountNGN field should go away or become 0.
Which makes the calculation: value(amountNGN) = value(amountUSD) * 356; (just an illustration, not sure this language exist).
The value of amountNGN field updates on the fly. Please how can I use JavaScript/jQuery to do this
Thanks
I believe this is what you want:
function convertCurrency(value) {
// your calculation here
return (value * 356);
}
$('[name="amountUSD"]').on('change keyup', function() {
value = $(this).val();
$('[name="amountNGN"]').val(convertCurrency(value));
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form action="">
<input type="number" name="amountUSD" value="1"><br/>
<input type="number" name="amountNGN" value="">
</form>
If you want your server to do this work then use ajax (not recommended, but posible).
If you want to change it on client side JAVASCRIPT will do the job (but then is not a php question); I recommend using the onkeyup javascript event on the field you are working with referencing the one you want to change.
In my View, I have this hidden field
<input type="hidden" id="logoID" name="logoID" class="logoID" value="123">
I add additional data to it using data attribute via jQuery like this
$('.logoID').data('fileName', 'xyz.jpg')
// adds data attribute to input element -> <input ... data-fileName='xyz.jpg' />
Now I need to retrieve this fileName inside my controller. I know I can get value of this hidden field by
$form['logoID']->getData(); // 123
But I also need the value of the data-attribute (fileName). How can I go about it? Any leads are much appreciated.
data-attributes are not available directly by the PHP scripts. You need to send that value using another hidden input or retrieve the value with Jquery later and post it as data using Ajax.
So this is the deal:
I have an order page and I use two forms.
The first form contains input data for ONE order item and when I press OK I will pass the form's input data to javascript through onsubmit=send_item_data(this) and at the end i will return false; in send_item_data function so it doesn't get posted.
In the second one I want to append/substract the former data in div groups (so I can add more or delete them easily) but I can't think (or find) of a solution that puts in group the data from the first form in one div and appends that child div to the second form.
In the end, by the push of a button, the second form will post all the divs' data and I will handle it with PHP backend code.
Code body:
<form action="" id="first_form" method="post" onsubmit="return send_item_data(this)">
<div id="Select_list">
<select blah blah>
---bunch of options---
</select>
</div>
<div id="extras">
---Some extras that you can choose by a checkbox input (I generate it via PHP)---
example:
<input name="checkbox[<?php echo $row['column_data_from_query']?>]" type="checkbox" value="checked">
</div>
--->Possibly two more input fields here<---
<input type="button" value="clear" onclick="clear_form()">
<input type="submit" value="OK">
</form>
<form action="" id="finalize_order_form" method="post">
--->This is the second form<---
--->In here I want to put the data from the first form so i can handle them by group<---
if I click OK three times in the first form there should be three groups here that contain each form's data
<input type="submit" class="button" value="Finallize order"/>
</form>
I mainly use PHP Mysql and Javascript (including AJAX, not jQuery).
So you want to have the order items listed in the second form like a pre-checkout shopping cart. If you use divs for that, they will not be submitted with the POST data to the server - they will be display-only. So you need to follow Robert's advice and save the 1st form's data to the DB each time an item is added/removed (in addition to his other reasons like not losing a customer's session info). That way the DB will already be up-to-date when they click Confirm Order. Or else you need to hook the Confirm Order button to a JS function that converts the divs back to JSON and posts that to the server to be stored in the DB.
As far as creating the display-only div from the 1st form's data, your send_item_data function needs to loop over all the form's inputs, get their values, and add them to the div however you want them to be displayed. Then you can just insert the div into the second form. Since you are passing "this" to the function, which is the form object itself, you can get the inputs via something like:
var inputs = this.getElementsByTagName("input");
for(var i = 0; i < inputs.length; i++) {
if(inputs[i].type == 'submit') continue; //ignore the Submit button
var name = inputs[i].name, value = inputs[i].value;
---use the name and value of this input to construct a span or something to insert inside your div---
}
---now you can insert the div into the 2nd form---
Pretty new to PHP and I'm wondering if there's a way to dynamically modify which inputs are available on an HTML form using PHP without the form data needing to be submitted. I'm making a site with a calendar for a teacher and I need to make the "duedate" input in this form gray out as soon as the user selects the option "announcement."
<form action="calendaradd.php" method="post">
Event name: <input name="eventname" type="text" autocomplete="off"/></br>
Event type: <select>
<option value="homework">Homework</option>
<option value="announcement">Announcement</option>
</select>
Event date: <input type="date" name="eventdate"></br>
Due date: <input type="date" name="duedate"></br></br>
<input name="submit" type="submit" value="Submit"/>
</form>
Many thanks. Also, am I using the select/option control correctly? Are the options supposed to use value attributes instead of name?
Bind an onchange to the select, and the if the value matches your criterium, set the input as disabled:
Using jQuery to make it easier:
$('#select').on('change',function(){
var value = $(this).val();
if(value == 'announcement'){
$('#duedate').prop('disabled',true);
}
else{
$('#duedate').prop('disabled',false);
}
});
You need to supply the proper IDs to the elements (you can get them also with DOM traversing, but an ID will be faster and easier), though. Also, your select is missing the name attribute, you need it in order to fetch the value server-side.
You might wanna take a look at some client-side scripting, since server-side (as in PHP) cannot alter a page's contents once they've been loaded. Check it out here
You can set the onTextChanged event to a javascript function that changes the attribute disabled in the input to true.
Honestly, the easiest, in my opinion, would be some jQuery animation. You could make it where when the user clicks on the announcement input the due date changes color and other attributes.
JQuery is the way to go, and easier than PHP when it comes to something like this.
I have a multi field search form I'm creating. There are 9 different search fields. None of them are mandatory, though. The only requirement is that you have to fill in at least one field.
They all show a default value (i.e. 'State') upon load instead of using labels to indicate what the purpose of the search field is. So, if you edit one field but leave the other eight alone then all nine will still have a value posted.
Is there any good, efficient way to handle this? I'd prefer to not have to manually do the logic in either jQuery before posting (e.g.if($(inputid).val() == 'Default Value') { ...) or the controller (e.g. if($this->input->post('name') == 'default value') { $data['name'] = '') because there will be a few iterations of this search throughout the site, so a dynamic solution would be incredibly helpful and save a bunch of time.
Thanks!
EDIT
here's the gist of what I ended up with after #veddermatic's post below:
rendered form:
<form id="search-form" action="spend/search">
<input id='fname' value='First Name' data-original_value='First Name' name='fname'/>
<input id='lname' value='Last Name' data-original_value='Last Name' name='lname'/>
...
</form>
ghost form:
<form id="ghost-form" action="spend/search">
<!--nothing here yet-->
</form>
jquery to handle it all:
$('.do-the-search').click(function(e) {
e.preventDefault();
$('#search-form input').each(function() {
var $this = $(this);
if($this.attr('data-original_value') != $this.val())
{
var clone = $this.clone();
$("#ghost-form").append(clone);
}
});
$("#ghost-form").submit();
});
One option would to have two forms, the "normal" form you have currently, and a "ghost" form (it has no submit button or visible fields) with the same target and action as the one presented to the user.
When you build / render the form to the user, give each input a class you can use to iterate over them with, and put the pre-filled value into a data attribute:
<input type="text" class="myFormInput" name="in1" data-original_value="blah" value="blah" />
<input type="text" class="myFormInput" name="in2" data-original_value="something" value="something" />
....
Then handle the user-facing form submit with javascript, iterate over the .myFormInput elements, and if they have a value different from the original value, create an input element with the same name in your "ghost" form, then submit that form. This will only send changed elements, and if for some reason they have javascript off / disabled, your gracefully degrade because your original form will still submit.
EDIT: you could very easily turn this into a plugin and use it on all your forms if you do have multiple instances so you'd just have to do something like: jQuery('#userFacingForm').ghostForm();