Develop Reference

Submit function when the same form is on the page twice

I have the below JavaScript submit function for a form that works fine. But when the form is on the page twice it only works for the first form and not for the second. I presume I need to use something with this so it only works on the active form?
HTML:
<form action="resultsnew.php" method="get" style="margin-bottom: 0" class="store-search-form">
<input type="text" name="d" value="Enter Postcode..." onclick="this.value='';" onfocus="this.select()" onblur="this.value=!this.value?'Enter Postcode...':this.value;" class="find-form-input field store-search-postcode" />
<input type="submit" onclick="java" value="Search" class="button" />
</form>
JavaScript:
$('.store-search-form').submit(function() {
//get the input's value
var postcodeinput = $('.store-search-postcode').val();
//remove spaces
postcodeinput = postcodeinput.replace(/\s/g, '');
//if valid postcode length trim it down
if (postcodeinput.length >= 5 && postcodeinput.length <= 7) {
//set the input's value
$('.store-search-postcode').val(postcodeinput.substring(0,postcodeinput.length - 3));
}
});

Do your searching relative to $(this) via find, i.e., change this:
var postcodeinput = $('.store-search-postcode').val();
to this:
var $this = $(this);
// ...
var postcodeinput = $this.find('.store-search-postcode').val();
(And in the other places you use it.)
Remember, within an event handler, this refers to the element the handler was hooked up to. $(this) creates a jQuery instance for that element. And then find searches within that element's descendants.

You need to reference the input that is in each form using $(this).find('.store-search-postcode') and then use that reference:
$('.store-search-form').submit(function() {
//get the input
var postcodeinput = $(this).find('.store-search-postcode');
//get the input's value
var postcode = postcodeinput.val();
//remove spaces
postcode = postcode.replace(/\s/g, '');
//if valid postcode length trim it down
if (postcode.length >= 5 && postcode.length <= 7) {
//set the input's value
postcodeinput.val(postcode.substring(0, postcode.length - 3));
}
});

Validating field input based on a percentage of field value

I've created a form in Acrobat XI pro. I have 3 radio buttons, which when selected, populate a single number value into a field...here is the code I'm using for this:
var v = this.getField("marketRadioButtons").value;
event.value = (v=="Off") ? "" : v;
This works fine, but now I'm trying to restrict the user edit of this this field to a maximum 40% of the default value per selection of each radio button.
I've been able to accomplish this by simply creating 3 fields - one for each radio button, and using validation against an actual number (ie., selecting radio button1 populates text field1 with $700, so:
event.rc = event.value < 980 if (!event.rc) app.alert ("..."))
but prefer to use only one text field for each radio button value.
Any help is greatly appreciated!

Try this solution! I added some new happiness that does as you wish!
The way this program works:
You click a checkbox.
You type a new value for that number.
You click update.
It updates the number by the checkboxes.
Checks:
If the number entered is more than 1.4 * current value, an alert will fire and the value will not be updated.
If no number is entered, nothing happens.
Html:
<form id="form1" action="">
<input class='1' type="radio" onclick="display(this)" name="box" value="700"><span class="1">700</span><br>
<input class='2' type="radio" onclick="display(this)" name="box" value="1200"><span class="2">1200</span><br>
<input class='3' type="radio" onclick="display(this)" name="box" value="1500"><span class="3">1500</span>
</form><br>
<form action="">
<input type="text" id="output" value="$"/>
<button type="button" onclick="update(this)">Update</button>
</form>
Javascript:
var checkedValue = {
'class':0,
'value':0,
}
display = function(me) {
var textbox = document.getElementById('output');
textbox.value = "$" + me.value;
checkedValue.value = Number(me.value);
checkedValue.class = me.className;
}
update = function(me) {
var price = me.form.output.value;
// if no value entered, newAmount sets to 0
var newAmount = Number(price.substring(1, price.length));
if (newAmount) {
var maxChange = Math.round(1.4 * checkedValue.value);
if (newAmount <= maxChange) {
document.getElementsByClassName(checkedValue.class)[1].innerHTML = newAmount;
} else {
alert('Too high!');
}
}
}
jsFiddle.

Text area content changes to "value" after displaying the content for a second

I have a query regarding the textarea field , I came across a very weird problem and I am trying to figure it out.
Firstly , here is what I am trying to do :
I have a drop down menu from which I select one of the template .
when selected I display the value of the template in the textarea { this is the problematic part }
after that I process the data from the text area ..and well rest is not in picture.
Problem Description :
when i try to display the value selected from the Drop down menu to the text area using the function : document.getElementById("mytext").innerHTML=myvalue.value;
it displays for a second and then the page reloads and shows the default value again .
here is my code:
javascript :
<SCRIPT language="javascript">
function add(index_array) {
//create the form
var myform = document.createElement("form");
myform.id="k_form"
for ( i =0 ; i <index_array.length ; i ++)
{
var mytext = document.createElement("input");
mytext.tpye="text";
mytext.name=index_array[i];
mytext.value=index_array[i];
mytext.id=index_array[i];
myform.appendChild(mytext);
}
mydiv=document.getElementById("d_div");
mydiv.appendChild(myform);
}
</SCRIPT>
<SCRIPT>
function getkeywords() {
// var current_Date = new date();
// document.write(current_Date);
var index_array = new Array();
var myString = "one and a two and a three = $ and four = $ and five = $";
var splitresult = myString.split(" ");
for(i = 0; i < splitresult.length; i++)
{
if (splitresult[i] == "$" && i > 1 ) //retireving the keywords..
{
index_array.push(splitresult[i-2]);
}
}
add(index_array);
/*
console.log("inside the if statement");
index_array.push(splitresult[i-2]); //saving the keywords for creating a new form with these as inputs....
}}
for ( i = 0 ; i < index_array.length ; i++ )
{
add(index_array[i]);
}
*/
}
</SCRIPT>
<script>
function populate_text()
{
var myvalue = document.getElementById("rawquery");
document.getElementById("mytext").innerHTML=myvalue.value;
}
</script>
the function "populate_text is the one that populates the textarea .
My HTML code is below :
</HEAD>
<BODY>
<FORM>
<BR/>
<div align = "center">
<form method = "post" action = "<?php echo $_SERVER['PHP_SELF']; ?>">
Select a Template<br />
<select name = "element" id = "rawquery">
<option>Select</option>
<option value = "Alpha query">Alpha</option>
<option value = "Betaquery">Beta</option>
<option value = "Gamma query">Gamma</option>
<option value = "Epsilon query">Epsilon</option>
</select>
<br />
<input type = "submit" onclick="populate_text()" name = "submit"><br /><br />
</form>
<textarea id = "mytext" name = "raw" rows = "10" cols = "50">raw template</textarea>
<br /><br />
<INPUT type="button" value="Click To Enter Values" onclick="getkeywords()"/>
</div>
<div align="center" id="d_div">
<br/> <br/>
</div>
</FORM>
</BODY>
</HTML>
I believe the problem is with the page is rendered into the browser that is line by line , but I cant figure out exactly what is causing this and how to fix it.
any help is appreciated.

You're using a submit button, and giving it an onclick handler. When the button is clicked, it executes your onclick handler, then proceeds to submit the form. This is why you see the value updating and then the page reloading.
If you don't want to submit the form with that button, then an <input type="submit"> is the wrong choice. Use a button instead:
<input type="button" onclick="populate_text()" />
An type=button will do nothing by default, unlike a type=submit which submits the form by default.
W3C docs for type=submit:
The input element with a type attribute whose value is "submit" represents a button for submitting a form.
W3C docs for type=button:
The input element with a type attribute whose value is "button" represents a button with no additional semantics.

That's just because of you are defined input type as "submit"
<input type = "submit" onclick="populate_text()" name = "submit" />
Whenever the action performed on submit, the page will reload. So, the default values will render again. You must to change it's type as "button".
The better use of <select> in html is, you can listen for its selected item changes like below,
<select name="element" id="rawquery" onchange="populate_text()">
<option>Select</option>
<option value = "Alpha query">Alpha</option>
<option value = "Betaquery">Beta</option>
<option value = "Gamma query">Gamma</option>
<option value = "Epsilon query">Epsilon</option>
</select>
and you can use your populate_text function to update the text area
function populate_text() {
var myvalue = document.getElementById("rawquery");
document.getElementById("mytext").innerHTML = myvalue.value;
}

Fill data in input boxes automatically

I have four input boxes. If the user fills the first box and clicks a button then it should autofill the remaining input boxes with the value user input in the first box. Can it be done using javascript? Or I should say prefill the textboxes with the last data entered by the user?

On button click, call this function
function fillValuesInTextBoxes()
{
var text = document.getElementById("firsttextbox").value;
document.getElementById("secondtextbox").value = text;
document.getElementById("thirdtextbox").value = text;
document.getElementById("fourthtextbox").value = text;
}

Yes, it's possible. For example:
<form id="sampleForm">
<input type="text" id="fromInput" />
<input type="text" class="autofiller"/>
<input type="text" class="autofiller"/>
<input type="text" class="autofiller"/>
<input type="button"value="Fill" id="filler" >
<input type="button"value="Fill without jQuery" id="filler2" onClick="fillValuesNoJQuery()">
</form>
with the javascript
function fillValues() {
var value = $("#fromInput").val();
var fields= $(".autofiller");
fields.each(function (i) {
$(this).val(value);
});
}
$("#filler").click(fillValues);
assuming you have jQuery aviable.
You can see it working here: http://jsfiddle.net/ramsesoriginal/yYRkM/
Although I would like to note that you shouldn't include jQuery just for this functionality... if you already have it, it's great, but else just go with a:
fillValuesNoJQuery = function () {
var value = document.getElementById("fromInput").value;
var oForm = document.getElementById("sampleForm");
var i = 0;
while (el = oForm.elements[i++]) if (el.className == 'autofiller') el.value= value ;
}
You can see that in action too: http://jsfiddle.net/ramsesoriginal/yYRkM/

or if input:checkbox
document.getElementById("checkbox-identifier").checked=true; //or ="checked"

How to use onchange in HTML

I have two text box in html ie:
<input type="text" value="" id="a" name="a" />
<input type="text" value="" readonly="true" id="b" name="b" />
Now if i enter only a number in element id "a" then the product of inserted number by 2 will be appear in element id "b".
Like:
While i m typing a number let say 11 in element "a"
then on the same time 11*2 ie: 22 will appear in element "b"
and if enter backspace or delete any number on the same time change will appear in element "b".
To get my required result i create a function like
onchange = function totalAmount()
{
var value = $("#a").val();
if ( (value > 0) && (value != "") )
{
$("input:text[name=b]").val(2 * value);
}
else
{
$("input:text[name=getCredit]").val("");
}
};
It fulfill 80% of my requirement as it will make change in element "b" if i click on any were after insert a number.

I see that you are using jQuery. You could bind to the change event of the textbox:
$('input:text[name=a]').change(function() {
// invoked when the value of input name="a" changes
// get the new value
var value = $(this).val();
// update the value of input name="b"
$('input:text[name=b]').val(2 * value);
});
This event will be raised when the input loses focus. You could also take a look at keypress and keyup events.

i think using the onkeyup event might help
<input type="text" value="" id="a" name="a" onkeyup="calcTotalAmount()" />
<input type="text" value="" readonly="true" id="b" name="b" />
<script>
function calcTotalAmount() {
var a = document.getElementById("a");
var b = document.getElementById("b");
if (!isNaN(a.value)) {
b.value = a.value * 2;
}
}
</script>
Why onkeyup?
Onkeydown event fires when key is pressed, onkeyup event fires when key is released and the event onkeypress fires if the onkeydown is followed by onkeyup,
and in the time of onkeydown the input field does not containt the value yet.

If you want a call back on every key press you can use the onKeyPress attribute.
(If you are using a library like JQuery/prototype/etc there is probably a nice way of observing a field using the library)