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>
Related
My goal with this is to have forms that contain a beginning input, and if the '+' button next to it is pressed, it will create another input below it. All of these inputs will eventually be inserted in AJAX.
Right now my form is inside a PHP foreach loop, so I have multiple forms, each with their own set of inputs and buttons.
If I click the '+' button in each form, it will create a new input below, but the way I'm trying to limit each form to 10 inputs, it's going across all forms like this:
So in that image, I clicked the '+' button of the first form 3 times (up to item 4) and then I pressed it in the next form which gave Item 5.
The functionality is basically working here, but I need each form to have it's own inputs, limited to 10. This way if they save items on any form, I can pass only those inputs to AJAX.
<form id="Items" method="post">
<label id="ItemLabel">Item 1:</label>
<input type="text" name="Items[]"><br/>
<button type="button" class="moreItems_add" onclick="moreItems(this);">+</button>
<input type="hidden" name="tickerID" id="tickerID" value="xyz">
<input type="submit" name="saveTickerItems" value="Save Ticker Items">
</form>
<!-- ticker modal JS -->
<script type="text/javascript">
var maxItems = 1;
function moreItems(button) {
if (maxItems < 10) {
var label = document.createElement("label");
label.id="ItemLabel"+maxItems;
label.innerHTML = "Item "+(maxItems+1)+": ";
var input = document.createElement("input");
input.type='text';
input.name = 'item'+maxItems;
$($(label)).insertBefore($(button));
$($(input)).insertBefore($(button));
//Insert a line break so that the next label and input are on new line
$('<br/>').insertBefore($(button));
maxItems++;
}
}
</script>
You're using a global variable as your counter so it will increment with every use for every form. Why not have the button check what's in the form and do the counting itself? And while you're at it, may as well go full jQuery.
$("button.moreItems_add").on("click", function(e) {
var numItems = $("input[type='text']", $(this).closest("form")).length;
if (numItems < 10) {
var html = '<label class="ItemLabel">Item ' + (numItems + 1) + ': </label>';
html += '<input type="text" name="Items[]"/><br/>';
$(this).before(html);
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form id="Items" method="post">
<label class="ItemLabel">Item 1:</label>
<input type="text" name="Items[]"><br/>
<button type="button" class="moreItems_add">+</button>
<input type="hidden" name="tickerID" id="tickerID" value="xyz">
<input type="submit" name="saveTickerItems" value="Save Ticker Items">
</form>
Also you were naming your text inputs sequentially, which I assume was a mistake?
Here's a solution after a couple modifications to your code.
function moreItems(button) {
var maxItems = Number(button.attributes.cnt.value);
maxItems += 1;
button.setAttribute("cnt", maxItems);
if (maxItems < 10) {
var label = document.createElement("label");
label.id = "ItemLabel" + maxItems;
label.innerHTML = "Item " + (maxItems + 1) + ": ";
var input = document.createElement("input");
input.type = 'text';
input.name = 'item' + maxItems;
$($(label)).insertBefore($(button));
$($(input)).insertBefore($(button));
$('<br/>').insertBefore($(button));
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form id="Items" method="post">
<label id="ItemLabel">Item 1:</label>
<input type="text" name="Items[]"><br/>
<button type="button" cnt="0" class="moreItems_add" onclick="moreItems(this);">+</button>
<input type="hidden" name="tickerID" id="tickerID">
<input type="submit" name="saveTickerItems" value="Save Ticker Items">
</form>
<br><br>
<form id="Items" method="post">
<label id="ItemLabel2">Item 1:</label>
<input type="text" name="Items[]"><br/>
<button type="button" cnt="0" class="moreItems_add" onclick="moreItems(this);">+</button>
<input type="hidden" name="tickerID" id="tickerID2">
<input type="submit" name="saveTickerItems" value="Save Ticker Items">
</form>
Changes made:
add a custom attribute to each + button, in here cnt="0".
in moreItems() function, increment value of cnt of respective form's + button.
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>
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>
I checked for duplicates but didn't find an exactly same problem so here we go. I have two radio-buttons and I need to return their values upon form submission. The problem is that when I click the submit button I always get the same radio-button value. Here is some code:
<div id="automatic">
<p>Title1
<input type="radio" id ="mode" name="mod" value="auto" >
</p>
</div>
<div id="selection">
<p>Title2
<input type="radio" id ="mode" name="mod" value="nonauto" >
</p>
</div>
<form id="search" action="test.jsp" method="GET" onsubmit="if (document.getElementById('search_text').value.length < 1) return false;">
<input id="search_text" type="text" name="q">
<input id="searchButton" type="submit" onclick="displayRadio()" value="Search" autocomplete="off" size="115">
</form>
And here is the Javascript code:
function displayRadio() {
alert(document.getElementById("mode").value)
}
Use different ids and use your function to lookup which of them is checked and return the value of that.
function displayRadio() {
var modeauto = document.getElementById('modeauto');
var modenoauto = document.getElementById('modenoauto');
var value = modeauto.checked ? modeauto.value : modenoauto.value;
alert(value);
}
I would recommend using jQuery for simplicity though.
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;
}