How to access my form values in document.ready - javascript

I am new to javascript and have a very basic question:
I have this in my HTML
Total Cost: <input type="text" name="total" id="total" class="MyInput" />
I want to assign a value to this textbox at the program startup, for that I am using document.ready, but its not working.
<SCRIPT LANGUAGE="JavaScript">
$(document).ready(function() {{
$("#total").value = "2";
});
What is the correct way of doing this?

Do:
$(document).ready(function(){
$("#total").val('2');
});

You got some jQuery in your javascript... do you mean how to do it in jQuery?
To do this in pure javascript, here's the code:
oFormObject = document.forms['myform_id']; //the id of your form
oFormElement = oFormObject.elements["total"];
oFormElement.value=2;
And with jQuery:
$(document).ready(function(){
{
$("#total").val("2");
});

You can do it without using JavaScript at all if you just want to set the initial value - and of course you know that value :
<input type="text" name="total" id="total" value="2" class="MyInput" />
using the value="" parameter in the input tag

Related

Is it possible to assign value of text-field to radio button

I am providing multiple check-box and radio button when i enter any value in text field than the same value will assign to radio button and How it is possible using jQuery. Below is the image for reference. I am storing Question and multiple answer and i am going to store true answer out of them like shown in image.
$data = array();
for($i=0,$j=1;$i<count($_REQUEST['quiz_options']);$i++,$j++)
{
$data["quiz_Options".$j] = $_REQUEST['quiz_options'][$i];
}
$data["quiz_Id"] = $Quiz_ID;
$data["quiz_Correct_Answer"] = $_REQUEST['quiz_opt'];
$quiz->insertOptions($data,'quizoptions');
<input class="col-md-4" type="text" name="quiz_options[]" value=""/>
<input type="radio" name="quiz_opt[]" value=""/>
//Here I want to assign my textfield value to the radio button when i write something in my text field.
Please see the example here
You could attach a keydown event to the the textbox and update the value of the radiobutton.
something like this(pseudocode):
$('#textboxId').on('keydown',function(){
$('#radiobuttonId').val($(this).value);
});
Maybe you can use a data attributes (HTML5)
Example
:)
You have to on blur or onchange and should use one class for all dynamic textbox creation. try this code
<input name="quiz_options[]" class ="changesNo1" value="" />
<input name="quiz_options[]" class ="changesNo1" value="" />
<input name="quiz_options[]" class ="changesNo1" value="" />
<input type=radio value="" name="quiz_opt[]">
<input type=radio value="" name="quiz_opt[]">
<input type=radio value="" name="quiz_opt[]">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
var test_arr = $("input[name='quiz_options[]']");
$(document).on('change keyup blur','.changesNo1',function(){
$.each(test_arr, function(i, item) {
$("input[name='quiz_opt[]']").val($(item).val());
var d=$("input[name='quiz_opt[]']").val(); // your reference
//alert(d); // This alert for your reference
});
});
</script>

Remove dollar sign from query on Submit

I am working on a website where there is a donate box with a field and a contribute button.
<div id="donate-bar">
<form name="donate" id="donate">
<span class="donate-text">DONATE</span>
<input type="text" class="amount" name="amount" id="amount" value="$10" size="5">
<input type="submit" id="contribute" formaction="https://website.com/donate" accept-charset="utf-8" formmethod="GET" value="CONTRIBUTE">
</form>
</div>
However, the query gets sent to the donation processor's website as https://website.com/donate?amount=%2410 and doesn't tick the $10 box. If I remove the $ and submit the query again the value is sent and the correct amount is seen on the second page.
Is there an easy way using PHP or Javascript to have it remove the $ when the form is submitted so that https://website.com/donate?amount=%2410 changes to https://website.com/donate?amount=10.
I've tried a couple of things but nothing I've tried has worked. Some examples of code would be super helpful since I'm newer to some of this. Can I parse it as integer on submit? Any help would be greatly appreciated. Thank you!
Why not put the Dollar sign outside of the input and store the value as "10":
<div id="donate-bar">
<form name="donate" id="donate">
<span class="donate-text">DONATE</span>
$<input type="text" class="amount" name="amount" id="amount" value="10" size="5">
<input type="submit" id="contribute" formaction="https://website.com/donate" accept-charset="utf-8" formmethod="GET" value="CONTRIBUTE"></form></div>
$('form#donate').on('submit',function() {
var $input = $('input#amount');
$input.val(parseInt($input.val().replace(/\$/,''),10));
});
$_POST['amount'] = str_replace("$", "", $_POST['amount']);
There is a simple way to fix this.
First of all, one of my suggeestions is that you change the field to
type="number"
Second of all, in PHP, you can use the following to remove the dollar sign:
$amount = str_replace('$', '', $_REQUEST['amount']);
You can use split function in jquery as follows
var value = ($('#amount').val()).split('$');
var amount = value[1] ;
In PHP
$value = explode('$',$_POST['amount']); //results array elements
without $ symbols $amount = $value[1];
Or also in PHP
$amount = preg_replace("/[^0-9]/","",$_POST['amount']);
//gets only integer parts and omits all other
Also in PHP
$amount = str_replace('$', '', $_POST['amount']);
Hope this helps the simplest way is a hidden field:
<html>
<head>
<script src="http://code.jquery.com/jquery-latest.min.js"
type="text/javascript"></script>
<script>
$(document).ready(function() {
//number regex - the format $10
var regex = /\$[1-9][0-9]+/;
//Setting validations
$(document).on('blur', '#pretty_amount', function() {
if(!regex.test($(this).val())) {
//Do something probably clear field
alert("Error Invalid number: " + $(this).val());
} else {
var newValue = $(this).val().match(/[1-9][0-9]+/g);
$('#amount').val(newValue);$('#amount').innerHtml(newValue);
}
});
});
</script>
</head>
<body>
<div id="donate-bar">
<form name="donate" id="donate">
<span class="donate-text">DONATE</span>
<input type="text" style="display: none;" name="amount" id="amount">
<input type="text" class="amount" name="pretty_amount" id="pretty_amount" value="$10" size="6">
<input type="submit" id="contribute" formaction="https://website.com/donate" accept-charset="utf-8" formmethod="GET" value="CONTRIBUTE"></form></div>
</body>
</html>
This does what you want, if I'm not mistaken.
Best regards

Preselect of value on input

I want ask you for help. I have form, where I change id by check-boxes:
<input id="SP_sid" type="hidden" name="sid" value="" />
<!--radio-->
<input name="sid_id" type="radio" value="1">One</input>
<input name="sid_id" type="radio" value="2">Two</input>
<!--script-->
<script>
jQuery('input[name="sid_id"]').click(function() {
jQuery('#SP_sid').val(this.value);
});
</script>
but I need to have value of sid from beginning pre-set to "1".
If I put "1" to value of sid, I am not able to change it by script to "2".
Is there any easy solution to get it work like this?
You can try with:
jQuery('input[name="sid_id"]').change(function() {
jQuery('#SP_sid').val(jQuery(this).val());
});

javascript or jQuery function for interaction between input fields value

I have a html form where people can enter number of purchase item. Default value of that text field is 1.
<input type="text" size="5" value="1" id="position" class="amntstyle" name="position">
I want another text input field for price where the value would be 15 times of position automatically.
For example if someone enter 3 in position field, the price input field will get value 45 automatically. Like this
<input type="text" size="5" value="45" id="price" class="amntstyle" name="price">
Is it possible?
Thanks a lot for your help.
simple .. use javascript functions and onkeyup
<script type="text/javascript">
function updatePrice(amount, element){
var amount = parseInt(amount);
if(!amount) amount = 0;
var toUpdate = amount*15;
document.getElementById(element).value = toUpdate;
}
</script>
<input type="text" size="5" value="1" id="position" class="amntstyle" name="position" onkeyup="updatePrice(this.value,'price');">
<input type="text" size="5" value="45" id="price" class="amntstyle" name="price">
Here is the YUI3 version:
<script src="http://yui.yahooapis.com/3.6.0/build/yui/yui-min.js"></script>
<script>
YUI().use("node", function(Y) {
var priceNode = Y.one("#price");
var positionNode = Y.one("#position");
positionNode.on("change", function(e) {
priceNode.set("value", positionNode.get("value")*15);
});
});
</script>
Working demo: http://jsfiddle.net/YgheP/
Made it for specific scenario but you can tweak it to your needs.
Hope it feeds your cause. :)
also look for isNaN check and float value as well! parseFloat(string)
code
$('#position').keyup(function() {
var price = parseInt(this.value) * 15;
$('#price').prop('value', price);
});​
if you are using jquery then by using plugin formInteract, you just need to do this.
<input type="text" size="5" value="1" id="position" class="amntstyle" name="position">
<input type="text" size="5" value="45" id="price" class="amntstyle" name="price" data-bind-change-value="#position*15">
at bottom of the page just include this plugin file, everything else will be done itself.
here is the link to project
https://bitbucket.org/ranjeet1985/forminteract
You can use this plugin for many purpose like getting value of form, putting value to form, validation of form and many more. you can see some example of code in index.html file of project
You can use this code to attach a eventhandler that will solve your problem:
$("#position").bind("change", function(){
$("#price").val(parseInt($("#position").val()) * 15);
});
Hope that helps

Array textboxes with onchange event

<INPUT name="Qty[]" id="Qty[]" type="text" class="south" />
<INPUT name="Amount[]" id="Amount[]" type="text" class="south"/>
<INPUT name="TotalAmount[]" id="TotalAmount[]" type="text" class="south" disabled="disabled"/>
Here i have problem with my code that i need to calculate multiply the first two textboxes. and that result will be appear into the last one, i mean third textbox as TotalAmount. Could you help me? here three textboxes appeared in single row with add button. when i submit the add button new created with three boxes again. I need to finish it in jquery of java script. please help me guys
First of all, remove the array-declaration, you're not using the the input fields as arrays. they are single values.
<INPUT name="Qty" id="Qty" type="text" class="south" />
<INPUT name="Amount" id="Amount" type="text" class="south"/>
<INPUT name="TotalAmount" id="TotalAmount" type="text" class="south" disabled="disabled"/>
And the jquery.
$(document).ready(function(){
qty = $("#Qty").val();
amount = $("Amount").val();
$("#Qty, #Amount").keyup(function(){
$("#TotalAmount").val((qty)*(amount));
});
});
Here is your JavaScript:
$(document).ready(function () {
var $quantity = $('#Qty\\[\\]'),
$amount = $('#Amount\\[\\]'),
$total = $('#TotalAmount\\[\\]'),
quantity,
amount;
$($quantity.add($amount)).keyup(function () {
quantity = Number($quantity.val().replace(/[^0-9,.]/g, ''));
amount = Number($amount.val().replace(/[^0-9,.]/g, ''));
$total.val(quantity * amount);
});
});
UPDATE Changed to keep the DOM ids the same in case they have to be that way. For an unmentioned reason as mentioned by #Ken Keenan.

Categories