Submitting forms and processing - javascript

I need to be able to have one submit button for multiple forms. I only took two forms from my coding for the sake of simplicity. Each form has its own unique ID, but each form is very much identical to one another save a few discrepancies. My problem is only the first form is submitted successfully. I realize the reason for that is my input fields have the same name in each and every form so it will not recognize a duplicate input field currently. Is there a way that each field can be submitted successfully even though the input fields are the same, I hope that with help I will be able to submit both 'input_1' values and process it as 'form1:input_1' and 'form2:input_1' respectively.
Thank you very much in advance
<body><form name="form1">
<input type="hidden" name="formID" value="form2"/>
<input type="hidden" name="redirect_to" value=""/>
<INPUT TYPE=TEXT NAME="input_1" SIZE=10 />
<INPUT TYPE=TEXT NAME="input_A" SIZE=15>/<INPUT TYPE=TEXT NAME="input_C"style="width: 1em" maxlength="1"><sup>s</sup>
<INPUT TYPE=TEXT NAME="input_B" SIZE=10 />
<INPUT TYPE="button" VALUE="+" name="SubtractButton" onkeydown="CalculateIMSUB(this.form)">
<INPUT TYPE=TEXT NAME="Answer" SIZE=12>
<input type="hidden" name="val" value="298" />
<INPUT TYPE=TEXT NAME="Answer_2" SIZE=4></form>
<form name="form2">
<input type="hidden" name="formID" value="form2"/>
<input type="hidden" name="redirect_to" value=""/>
<INPUT TYPE=TEXT NAME="input_1" SIZE=10 />
<INPUT TYPE=TEXT NAME="input_A" SIZE=15>/<INPUT TYPE=TEXT NAME="input_C"style="width: 1em" maxlength="1"><sup>s</sup>
<INPUT TYPE=TEXT NAME="input_B" SIZE=10 />
<INPUT TYPE="button" VALUE="+" name="SubtractButton" onkeydown="CalculateIMSUB(this.form)">
<INPUT TYPE=TEXT NAME="Answer" SIZE=12>
<input type="hidden" name="val" value="298" />
<INPUT TYPE=TEXT NAME="Answer_2" SIZE=4></form>
<input type="submit" name="Submit" id="button" value="Submit" onClick="submitAllDocumentForms()"></body>
Javascript code:
<script language="javascript" type="text/javascript">
/* Collect all forms in document to one and post it */
function submitAllDocumentForms() {
var arrDocForms = document.getElementsByTagName('form');
var formCollector = document.createElement("form");
with(formCollector)
{
method = "post";
action = "process.php";
name = "formCollector";
id = "formCollector";
}
for(var ix=0;ix<arrDocForms.length;ix++) {
appendFormVals2Form(arrDocForms[ix], formCollector);
}
document.body.appendChild(formCollector);
formCollector.submit();
}
/* Function: add all elements from ``frmCollectFrom´´ and append them to ``frmCollector´´ before returning ``frmCollector´´*/
function appendFormVals2Form(frmCollectFrom, frmCollector) {
var frm = frmCollectFrom.elements;
var nElems = frm.length;
for(var ix = nElems - 1; ix >= 0 ; ix--)
frmCollector.appendChild(frm[ix]);
return frmCollector;
}
</script>

name is not a standard attribute for the form tag. I suggest that you use id for identiying your forms.
I have not tested the below changes, but I expect them to work:
function appendFormVals2Form(frmCollectFrom, frmCollector) {
var currentEl;
var frm = frmCollectFrom.elements;
var nElems = frm.length;
for(var ix = nElems - 1; ix >= 0 ; ix--) {
currentEl = frm[ix];
currentEl.name = frmCollectFrom.name + ':' + currentEl.name;
frmCollector.appendChild(currentEl);
}
return frmCollector;
}

Related

How can I get URL of next page of a .asp page?

I am trying to scrape the data at this link: https://thereserve2.apx.com/myModule/rpt/myrpt.asp?r=112
I am able to get the first page, but when I get to next page (using the "next" button at bottom of page) the URL to the next page is generic: https://thereserve2.apx.com/myModule/rpt/myrpt.asp
How can I get a more specific URL to use in my automated scraping effort?
Thanks.
Check below HTML and JS code that submits the asp page and go to needed page, "next" button submit the form as you see in below JS an X999whichpage is the next page, you need to do the same submit the form with the needed page number.
function submitform2(X999sort, X999field, X999paging, X999whichpage, X999csv, X999action, X999actionfield) {
document.xxxx2.X999csv.value = X999csv;
document.xxxx2.X999action.value = X999action;
document.xxxx2.X999actionfield.value = X999actionfield;
document.xxxx2.X999sort.value = X999sort;
document.xxxx2.X999field.value = X999field;
document.xxxx2.X999paging.value = X999paging;
document.xxxx2.X999whichpage.value = X999whichpage;
document.xxxx2.submit();
}
<form id="xxxx2" name="xxxx2" action="https://thereserve2.apx.com/myModule/rpt/myrpt.asp?r=112" method="POST">
<input type="hidden" name="X999myquery" value="">
<input type="hidden" name="X999tablenumber" value="2">
<input type="hidden" name="X999csv" value="">
<input type="hidden" name="X999sort" value="">
<input type="hidden" name="X999action" value="">
<input type="hidden" name="X999actionfield" value="">
<input type="hidden" name="X999field" value="On">
<input type="hidden" name="X999paging" value="">
<input type="hidden" name="X999whichpage" value="3">
</form>
Enter Page Number:<input type="text" id="whichpage" value="2">
<button onclick="javascript:submitform2('','','On',document.getElementById('whichpage').value,'','','')">Move to Page</button>
Another solution without JS
<form id="xxxx2" name="xxxx2" action="https://thereserve2.apx.com/myModule/rpt/myrpt.asp?r=112" method="POST">
<input type = "hidden" name = "X999tablenumber" value = "2" />
<input type = "hidden" name = "X999csv" value = "" />
<input type = "hidden" name = "X999sort" value = "" />
<input type = "hidden" name = "X999action" value = "" />
<input type = "hidden" name = "X999actionfield" value = "" />
<input type = "hidden" name = "X999field" value = "" />
<input type = "hidden" name = "X999paging" value = "On" />
<input type = "text" name = "X999whichpage" value = "3" />
<input type="submit" value="Go To Page" />
</form>

HTML form:input calculate 2 fields

I'm using spring mvc for my form which has the tag
<form:input type="number" class="value1" id="value1" path="commandName.object.field1" />
<form:input type="number" class="value1" id="value1" path="commandName.object.field2" />
<input type="text" disabled="disabled" id="result" />
I read some questions in regards to calculations and even found a js fiddle:
http://jsfiddle.net/g7zz6/1125/
how do i calculate 2 input fields and put results in 3rd input field
but it doesn't work when the input tag is form:input. Is it possible to do auto calculation of the 2 form:input fields upon keyin and update the 3rd input?
Here you go
HTML
<input type="text" class="input value1">
<input type="text" class="input value2 ">
<input type="text" disabled="disabled" id="result">
JS
$(document).ready(function(){
$('input[type="text"]').keyup(function () {
var val1 = parseInt($('.value1').val());
var val2 = parseInt($('.value2').val());
var sum = val1+val2;
$("input#result").val(sum);
});
});
Fiddle https://jsfiddle.net/1sbvfzcc/
$(document).ready(function(){
var val1 = +$(".value1").val();
var val2 = +$(".value2").val();
$("#result").val(val1+val2);
});
$('.input').blur(function(){
var val1 = +$(".value1").val();
var val2 = +$(".value2").val();
$("#result").val(val1+val2);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" class="input value1" value="20">
<input type="text" class="input value2" value="30">
<input type="text" disabled="disabled" id="result">
Please check the code this might help you understand why your code is not working.
You are using document ready function which is not able to get the value as no default value for input box.
I have added a new blur function which will calculate the value on change of input box
Try this your form tag syntax was wrong
$('form').on('keyup' ,'.value1', function(){
var k=0;
$('.value1').each(function(){
k +=parseFloat($(this).val()|0);
})
$('input:text').val(k)
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
<input type="number" class="value1" id="value1" path="commandName.object.field1" />
</form>
<form>
<input type="number" class="value1" id="value1" path="commandName.object.field2" />
</form>
<input type="text" disabled="disabled" id="result" />

Type on textfield when it has focus using button Javascript

I have one button that displays number "1" when clicked and three text boxes. I want when the button is clicked the number is displayed on the text box that has focus. Can someone help me please.
function run(){
document.calc.txt1.value += "1";
}
<input type=button name="btn1" value="1" OnClick="run()"id="button"><br />
<form name="calc">
<input type="text" id="txt1" name="txt1">
<input type="text" id="txt2" name="txt2">
<input type="text" id="txt3" name="txt3">
</form>
t3">
When you click a button, the previous input looses focus. You could try to store the last focused input element before the click:
(this needs some more work)
var lastFocus = null;
document.addEventListener("blur", function(event) {
// Here, you'll need to find out if the blurred element
// was one of your valid inputs. It's probably best to
// identify them by a class name
if (event.target.type === "text") {
lastFocus = event.target;
}
}, true);
function run() {
// When the user hasn't yet focused on a text input,
// the first one is used by default
(lastFocus || document.calc.txt1).value += "1";
}
<input type=button name="btn1" value="1" OnClick="run()"id="button"><br />
<form name="calc">
<input type="text" id="txt1" name="txt1">
<input type="text" id="txt2" name="txt2">
<input type="text" id="txt3" name="txt3">
</form>
var currId;
function setId(curr){
currId=curr.id;
}
function run(){
if(currId)
{
document.getElementById(currId).value +='1';
}
//document.calc.txt1.value += "1";
//document.activeElement.value += "1";
}
<input type=button name="btn1" value="1" OnClick="run()"id="button"><br />
<form name="calc">
<input type="text" id="txt1" name="txt1" onblur="setId(this)">
<input type="text" id="txt2" name="txt2" onblur="setId(this)">
<input type="text" id="txt3" name="txt3" onblur="setId(this)">
</form>
Ok, so this code snippet should do what you want. The main thing to note though is that whenever you click the button, the input box becomes blurred that you had selected.
Essentially what this code does here is set the onfocus attribute to allow you to figure out which input box was last focused, rather than which input box IS focused, because none are. Also, I'd recommend changing the button to a 'button' tag because it separates it in terms of tag name from the other input boxes.
Hope this helped, and let me know if you have any questions.
var inputs = document.getElementsByTagName('input');
for(var i = 1 ; i < inputs.length; i ++){
inputs[i].onfocus = function(){
this.setAttribute('class','focused');
}
}
function run(){
var inputBox = document.getElementsByClassName('focused')[0];
if(inputBox){
inputBox.value += "1";
inputBox.setAttribute('class','blurred');
}
}
<input type=button name="btn1" value="1" OnClick="run()"id="button"><br />
<form name="calc">
<input type="text" id="txt1" name="txt1">
<input type="text" id="txt2" name="txt2">
<input type="text" id="txt3" name="txt3">
</form>

Passing a js variable value in an input type hidden and then retrieve it with php

I would like to count number of submitted form by user with javascript
and then put the number of submitted form in a value attribute of an input type hidden and then retrieve that value with PHP (with the name attribute of the input hidden)
Here is a simple code I have tried, but it didn't work :
form.html
<form method="post" action="submit.php">
<input type="text" name="name" placeholder="name"/>
<input type="text" name="firstname" placeholder="firstname"/>
<input type="hidden" name="nb_submit" value="" id="nb"/>
<input type="submit" value="OK" onclick="count_nb_submit()"/>
</form>
after the html form ended, I have put the javascript code:
<script type="text/javascript">
var nb=0;
function count_nb_submit()
{
nb ++;
return nb;
document.getElementById('nb').value=nb;
}
</script>
submit.php
<?php
echo $_POST["nb_submit"] ;
?>
In your script you're returning before you've finished your function.
You should only use return when you want to stop the function and return a result. Anything after return will not be read.
This is what your code should look like:
<script type="text/javascript">
var nb=0;
function count_nb_submit() {
nb++;
document.getElementById('nb').value=nb;
return nb;
}
</script>
You are using return before setting the value to field, remove the return hope it will work.The function should be -
function count_nb_submit()
{
// calculate values
document.getElementById('nb').value= //the value you want to assign;
}
JS CODE :
<script type="text/javascript">
var nb = 0;
function count_nb_submit() {
nb++;
var myform = document.getElementById('test');
document.getElementById("nb").value = nb;
myform.submit();
}
</script>
Form CODE :
<form method="post" name="test" action="submit.php" id="test" target="_blank">
<input type="text" name="name" placeholder="name"/>
<input type="text" name="firstname" placeholder="firstname" onblur="count_nb_submit();"/>
<input type="hidden" name="nb_submit" value="0" id="nb"/>
<input type="button" value="OK" onclick="count_nb_submit();" />
</form>
<script type="text/javascript">
var nb = 0;
function count_nb_submit()
{
nb++;
var myform = document.getElementById('test');
document.getElementById("nb").value = nb;
myform.submit();
}
</script>
<form method="post" name="test" action="submit.php" id="test" target="_blank">
<input type="text" name="name" placeholder="name"/>
<input type="text" name="firstname" placeholder="firstname" />
<input type="hidden" name="nb_submit" value="0" id="nb"/>
<input type="button" value="OK" onclick="count_nb_submit();" />
</form>

Change radio button value to the value of text input

I have this code which has a radio button. I want to get the value of the text box and set it as the value of the selected radio button.
HTML
<form action="add.php" id="registration" method="post" name='registration'
onsubmit="return formValidation();">
Monthly amount of<br>
<input id="300" name="amounts" type="radio" value="300"><label for="300">P
300.00</label><br>
<input id="amntother" name="amounts" type="radio" value="">P
<input disabled="disabled" id="otherAmount" name="amntotherSpecify" type=
"text" value=""><label for="amntother">(please specify)</label><br>
<button name="submit" style="width:305px" type="submit" value=
"Submit">ADD</button>
</form>
Javascript
window.onload = function() {
var promised = document.getElementsByName("amounts");
for (var i = 0; i < promised.length; i++) {
promised[i].onclick = function() {
var rads = this.form[this.name];
for (var i = 0; i < rads.length; i++) {
var textField = this.form[rads[i].value.toLowerCase() + "Amount"];
if (textField) textField.disabled = !rads[i].checked;
}
}
}
}
<form form="view" name='registration' method="POST" action="add.php" onSubmit="return formValidation();">
Monthly amount of</br>
<input type="radio" name="amounts" id="300" value="300" ><label for="300">P 300.00</label><br/>
<input type="radio" name="amounts" id="amntother" value="" >P<br/>
<input type="text" name="amntotherSpecify" id="otherAmount" value="" onchange="addValueToRadioBtn();"/><label for="amntother">(please specify)</label><br/>
<button type="submit" name="submit" value="Submit" style="width:305px">ADD</button>
<script>
function addValueToRadioBtn() {
if (document.getElementById("amntother").checked == true){
document.getElementById("amntother").value = document.getElementById("otherAmount").value;
}
//added an alert box just to test that the value has been updated
alert(document.getElementById("amntother").value);
}
</script>
I have removed the disabled value so that a value can be entered, on change of this value and if the radio button (otheramount) is selected then other amount value will reflect the value that was entered in the textbox.
Just to note that if you disable the text then no user will be able to add a value. If this isn't what you are looking for could you explain in more detail as to how the textbox will be populated and more in what you are trying to achieve.
Anyway hope this script helps
You don't specify formValidation or add.php. If all you want to do is add the specified value as an option, you don't need to call back to the server to do that. Just update the form with the new option:
html
<form form="view" name='registration' method="post" action="add.php" onsubmit="return formValidation();">
<div id="amountOptions">
Monthly amount of</br>
<input type="radio" name="amounts" id="opt300" value="300" ><label for="opt300">P 300.00</label><br/>
</div>
<input type="text" name="amntotherSpecify" id="newvalue" value=""/>
<input type="button" id="btnNewValue" value="Specify your own amount"/>
</form>
javascript
var btnNewValue = document.getElementById('btnNewValue');
btnNewValue.addEventListener('click', function()
{
var div = document.getElementById('amountOptions');
var newAmount = document.forms[0].amntotherSpecify.value;
var optCheck = document.getElementById('opt'+newAmount);
if(optCheck !== null)
return;
var newopt = document.createElement('input');
newopt.type = 'radio';
newopt.id = 'opt'+newAmount;
newopt.name = 'amounts';
newopt.value = newAmount;
var newoptLabel = document.createElement('label');
newoptLabel.for = newopt.id;
newoptLabel.innerHTML = 'P ' + newAmount;
var br = document.createElement('br');
div.appendChild(newopt);
div.appendChild(newoptLabel);
div.appendChild(br);
var newAmount = document.forms[0].amntotherSpecify.value = '';
});
Here's a fiddle to demonstrate it in action. You'll want to add in validation that the new option's value is a number and fits whatever constraints you have.
It's important that you note that according to the html spec, ids cannot start with a number, in fact they must start with a character in the range a-zA-Z.
how about this option...
Slight modification to HTML - extra button, extra label tag
HTML
<form form="view" name='registration' method="POST" action="add.php" onSubmit="return formValidation();">
Monthly amount of</br>
<input type="radio" name="amounts" id="300" value="300" ><label for="300">P 300.00</label><br/>
<input type="radio" name="amounts" id="amntother" value="" ><label id="labelamntother" for="amntother">P</label>
<input type="text" name="amntotherSpecify" id="otherAmount" value="" /><label for="amntother">(please specify)</label><br/>
<button type="button" name="reset" value="Reset Value" style="width:305px" onclick="location.reload(true)">Reset Radio Button Value</button>
<button type="submit" name="submit" value="Submit" style="width:305px">ADD</button>
</form>
Javascript
<script>
document.getElementById("otherAmount").onkeyup = function() {
document.getElementById("labelamntother").innerHTML ="P " + this.value;
}
</script>

Categories

Resources