We Keep Coding

How to duplicate form field text input in another field simulaneously

Essentially what I'm trying to achieve here is a client brief form, where our company manager can type in the clients name at the top in the quick glance section, and then it's replicated below under the client details section. Ideally i'd like it to replicate it out as he's typing.
I had a look at this discussion, and unfortunately it hasn't helped me. Then again it might be because my Jquery scripting is very poor.
So input in #client_name replicated in #client_name_output in real time is what I'm trying to achieve :)
Any help will be appreciated!
<fieldset>
<legend><span class="number">1</span>At A Glance</legend>
<label for="name">Manager</label>
<select id="manager" name="manager">
<optgroup id="OTA" label="OTA">
<option id="vernon_penny">Vernon Penny</option>
<option id="nick_heygate">Glenn Collie</option>
<option id="nick_heygate">Nick Heygate</option>
</optgroup>
</select>
<input type="text" id="client_name" name="client" placeholder="Client">
<input type="text" id="project_name" name="project_name" placeholder="Project Name">
<label for="date">Deadline</label>
<input type="date" id="date" name="date">
</fieldset>
<fieldset>
<legend><span class="number">2</span>Client Info</legend>
<p id="client_name_output"></p>
<input type="url" id="website" name="client_website" placeholder="Website">
<textarea id="bio" name="client_bio" placeholder="bio"></textarea>
</fieldset>
<button type="submit" class="large btn">Send</button>

I'm not quite sure what you want.The ideas is, you need to capture the #client_name value then assign it value into #client_name_output. Try this code, hopes it help:
$(document).ready(function(){
$('#client_name').on('keyup',function(){
var c_val = $(this).val();
$('#client_name_output').text(c_val);
});
});

$(function() {
$('#client_name').on('keyup', function() {
var text = $(this).val();
$('#client_name_output').text(text);
});
});
Would be the simplest way.
https://jsfiddle.net/jsj7nh6f/2/

You can use JQuery to check if there is a keyup on the input. If so, just update the client_name_output.
$(document).ready(function() {
$('#client_name').keyup(function () {
$('#client_name_output').text($(this).val());
});
});
The document.ready makes sure you wait till the DOM is being loaded before you bind a function on a non-existing id.
Make sure you have a reference to the jquery code in your html.
<script src="//code.jquery.com/jquery-1.11.2.min.js"></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

Pass a javascript variable through a hidden input

Okay, I have javascript to calculate a dynamic price for an HTML form. The code is as follows:
jQuery("input[name='Amount']").change(function() {
if (isNaN(parseFloat(this.value)) || !isFinite(this.value)) {
jQuery(this).val('');
return false;
}
var calc = parseFloat(this.value) * 0.95;
jQuery(this).parents("form").find("input[name='price']").val(calc);
});
This, with this input:
<input class="irrelevant typeahead" type="text" placeholder="Amount" name="Amount"/>
The javascript takes that value, calculates the price, and I want it to fill this:
<input type="hidden" name="price" value=""/>
I believe my javascript is correct. What do I need to do to the price to make it work?

Make sure you have these items wrapped in a <form> tag.
<form>
<input class="irrelevant typeahead" type="text" placeholder="Amount" name="Amount"/>
<br />
<input type="hidden" name="price" value=""/>
</form>
jQuery("input[name='Amount']").change(function() {
if (isNaN(parseFloat(this.value)) || !isFinite(this.value)) {
jQuery(this).val('');
return false;
}
var calc = parseFloat(this.value) * 0.95;
jQuery(this).parents("form").find("input[name='price']").val(calc);
});
I have a working demo here: http://jsfiddle.net/P55ge/
In the demo I have made the price input a text field instead of a hidden field for ease of seeing the value being set.
Also note, that the field is only updated when you enter a valid number and then click off the field input. The following quote is from the jquery documentation for .change() http://api.jquery.com/change/
Now when the second option is selected from the dropdown, the alert is
displayed. It is also displayed if you change the text in the field
and then click away. If the field loses focus without the contents
having changed, though, the event is not triggered.

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.

How to access my form values in document.ready

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