I have 2 forms
<form name= "form1" action="">
<input type="hidden" name="max" id= "max1" value="100"/>
<input type="submit" class="submit" value="part 1" />
</form>
<form name= "form2" action="">
<input type="hidden" name="max2" id= "max2" value="200"/>
<input type="submit" class="submit" value="part 2" />
</form>
I get the values from this form here
$(".submit").click(function () {
here --> var max_res = $("input#max1").val();
var Results = "Max Result " + max_res;
});
My question is how can i dynamically change the id from max1 to max2 so I can store max2's value in max-res when a click is made in form2
var max_res = $('input[id^="max"]', $(this).parent()).val();
//selects the id starting with max in this form
var Results = "Max Result " + max_res;
var i = 1;
var max_res = $("input#max"+i).val();
/edit: I would add common class to all inputs like class="max" and then:
var max_res = $(this).parent().find("input.max").val();
var max_res = $(this).closest("form").find("input:hidden").val()
Related
How do I make this calculator display the result on the first page after the ='s sign without destroying all of the html on the page with document.write()?
I know that document.write() is the problem, but I don't know of anything else to use. I'm very new to coding, so any help is greatly appreciated.
I also have a problem with the division part because it is putting the result right next to the remainder, however, once the document.write() problem is resolved, I think that the solution should become more apparent. Thank You!
<head>
<script language="javascript" type="text/javascript">
function add() {
var input1 = parseInt(document.getElementById("t1").value);
var input2 = parseInt(document.getElementById("t2").value);
var result = input1 + input2;
document.write(result);
}
function divide() {
var input1 = parseInt(document.getElementById("t3").value);
var input2 = parseInt(document.getElementById("t4").value);
var result = Math.floor(input1 / input2);
var remainder = input1 % input2
document.write(result)
document.write(remainder)
}
function multiply() {
var input1 = parseInt(document.getElementById("t5").value);
var input2 = parseInt(document.getElementById("t6").value);
var result = input1 * input2;
document.write(result);
}
function subtract() {
var input1 = parseInt(document.getElementById("t7").value);
var input2 = parseInt(document.getElementById("t8").value);
var result = input1 - input2;
document.write(result);
}
</script>
<title>java</title>
</head>
<body>
Addition
<p>
<input type="text" id="t1" name="t1"> +
<input type="text" id="t2" name="t2">
<input type="button" id="add" value="=" onClick="add();">
</p>
<p>
Subtraction
<p>
<input type="text" id="t7" name="t7"> -
<input type="text" id="t8" name="t8">
<input type="button" id="subtract" value="=" onClick="subtract();">
<p>Multiplication
<p>
<input type="text" id="t5" name="t5"> *
<input type="text" id="t6" name="t6">
<input type="button" id="multiply" value="=" onClick="multiply();">
</p>
<p>Division
<p>
<input type="text" id="t3" name="t3"> ÷
<input type="text" id="t4" name="t4">
<input type="button" id="divide" value="=" onClick="divide();">
</p>
</body>
</html>
You can either use textContent or innerHTML.
Here's an example using textContent:
function add() {
var input1 = parseInt(document.getElementById("t1").value);
var input2 = parseInt(document.getElementById("t2").value);
var result = input1 + input2;
document.getElementById('add-result').textContent = result;
}
function divide() {
var input1 = parseInt(document.getElementById("t3").value);
var input2 = parseInt(document.getElementById("t4").value);
var result = Math.floor(input1 / input2);
var remainder = input1 % input2
document.getElementById('divide-result').textContent = result;
document.getElementById('divide-remainder').textContent = remainder;
}
function multiply() {
var input1 = parseInt(document.getElementById("t5").value);
var input2 = parseInt(document.getElementById("t6").value);
var result = input1 * input2;
document.getElementById('multiply-result').textContent = result;
}
function subtract() {
var input1 = parseInt(document.getElementById("t7").value);
var input2 = parseInt(document.getElementById("t8").value);
var result = input1 - input2;
document.getElementById('subtract-result').textContent = result;
}
<div>
<h1>Addition</h1>
<input type="text" id="t1" name="t1"> +
<input type="text" id="t2" name="t2">
<input type="button" id="add" value="=" onClick="add();">
<span id="add-result"></span>
</div>
<div>
<h1>Subtraction</h1>
<input type="text" id="t7" name="t7"> -
<input type="text" id="t8" name="t8">
<input type="button" id="subtract" value="=" onClick="subtract();">
<span id="subtract-result"></span>
</div>
<div>
<h1>Multiplication</h1>
<input type="text" id="t5" name="t5"> *
<input type="text" id="t6" name="t6">
<input type="button" id="multiply" value="=" onClick="multiply();">
<span id="multiply-result"></span>
</div>
<div>
<h1>Division</h1>
<input type="text" id="t3" name="t3"> ÷
<input type="text" id="t4" name="t4">
<input type="button" id="divide" value="=" onClick="divide();">
<span id="divide-result"></span> |
<span id="divide-remainder"></span>
</div>
With textContent you can only set text, with innerHTML you can set HTML:
function add() {
var input1 = parseInt(document.getElementById("t1").value);
var input2 = parseInt(document.getElementById("t2").value);
var result = input1 + input2;
document.getElementById('add-result').innerHTML = `<i style="color: blue">${result}</i>`;
}
function divide() {
var input1 = parseInt(document.getElementById("t3").value);
var input2 = parseInt(document.getElementById("t4").value);
var result = Math.floor(input1 / input2);
var remainder = input1 % input2
document.getElementById('divide-result').innerHTML = `<i style="color: blue">${result}</i>`;
document.getElementById('divide-remainder').innerHTML = `<i style="color: blue">${remainder}</i>`;
}
function multiply() {
var input1 = parseInt(document.getElementById("t5").value);
var input2 = parseInt(document.getElementById("t6").value);
var result = input1 * input2;
document.getElementById('multiply-result').innerHTML = `<i style="color: blue">${result}</i>`;
}
function subtract() {
var input1 = parseInt(document.getElementById("t7").value);
var input2 = parseInt(document.getElementById("t8").value);
var result = input1 - input2;
document.getElementById('subtract-result').innerHTML = `<i style="color: blue">${result}</i>`;
}
<div>
<h1>Addition</h1>
<input type="text" id="t1" name="t1"> +
<input type="text" id="t2" name="t2">
<input type="button" id="add" value="=" onClick="add();">
<span id="add-result"></span>
</div>
<div>
<h1>Subtraction</h1>
<input type="text" id="t7" name="t7"> -
<input type="text" id="t8" name="t8">
<input type="button" id="subtract" value="=" onClick="subtract();">
<span id="subtract-result"></span>
</div>
<div>
<h1>Multiplication</h1>
<input type="text" id="t5" name="t5"> *
<input type="text" id="t6" name="t6">
<input type="button" id="multiply" value="=" onClick="multiply();">
<span id="multiply-result"></span>
</div>
<div>
<h1>Division</h1>
<input type="text" id="t3" name="t3"> ÷
<input type="text" id="t4" name="t4">
<input type="button" id="divide" value="=" onClick="divide();">
<span id="divide-result"></span> |
<span id="divide-remainder"></span>
</div>
It's worth noting, with innerHTML there are security concerns as mentioned here:
...there are ways to execute JavaScript without using elements, so there is still a security risk whenever you use innerHTML to set strings over which you have no control. For example:
const name = "<img src='x' onerror='alert(1)'>";
el.innerHTML = name; // shows the alert
For that reason, it is recommended that you do not use innerHTML when inserting plain text; instead, use Node.textContent. This doesn't parse the passed content as HTML, but instead inserts it as raw text.
Here are some other methods used to manipulate the DOM:
insertAdjacentElement
innerText
insertAdjacentHTML
insertAdjacentText
insertBefore
appendChild
replaceChild
removeChild
nodeValue
outerHTML
outerText
remove
See the full list here.
As you have discovered, document.write() is tricky because it has a tendency to overwrite the existing content when used. Let's see what the documentation has to say about it:
Note: Because document.write() writes to the document stream, calling document.write() on a closed (loaded) document automatically calls document.open(), which will clear the document.
Hmm, well what else can we do? Fortunately, it is possible to target specific parts of the page and replace content in those elements only. So, for example we could add <span> elements with ids like #add-result, #div-result etc to the page which will contain the results of their respective action. Then, instead of using document.write() to output the results, we can replace the content in those elements.
Let's add a <span> to contain our add result:
Addition<p>
<input type="text" id="t1" name="t1" /> +
<input type="text" id="t2" name="t2" />
<input type="button" id="add" value="=" onClick="add();" />
<span id="add-result></span>
</p>
(Note: remember to close your <input /> tags with a />!)
How do we target a specific element? With document.querySelector(). Docs
Then, we can easily change the content inside of that element by updating the element.textContent property, just like you would a variable:
function add(){
var input1 = parseInt(document.getElementById("t1").value);
var input2 = parseInt(document.getElementById("t2").value);
var result = input1+input2;
// get the element with the #add-result ID
var element = document.querySelector("#add-result");
// update the content in that element
element.textContent = result;
}
Now when you add two numbers together and press =, the result will appear inside of the <span id="add-result"></span> element instead of overwriting the entire page. See if you can get it working for the other inputs as well. Remember you will need a unique id for each element you want to display a result in, and update the calculation functions accordingly!
I'm creating a form in which there are 2 variables namely 'vkey' and 'gene+varient' which is obtained by JS code.
The value is displayed correctly in the html form, just that I cant POST this value when I submit the form.
How can I POST the 2 mentioned values when I submit the form?
<form action="acmg_controller.php" method="POST" target="_blank">
<p>
Source:
<select name="source">
<option value="pubmed">PubMed</option>
<option value="other">other</option>
</select>
PMID:
<input type="text" name = "pmid" style="width: 80px"> <br>
<input type="hidden" name="vkey" id="pvkey">
vkey:
<script>
var hashParams = window.location.hash.substr(1).split('&');
var temVkey = hashParams[2].split('=');
var vkey = temVkey[1];
document.write(vkey);
</script> <br>
gene+varient
<input type="hidden" name="genevar">
<script>
var hashParams = window.location.hash.substr(1).split('&');
var temvarient = hashParams[1].split('=');
var varient = temvarient[1];
var hashParams_ = window.location.hash.substr(1).split('&');
var temgene = hashParams_[0].split('=');
var gene = temgene[1];
document.write(gene+' '+varient);
</script> <br>
</p>
<label>Summary:</label> <br>
<textarea style = "width: -webkit-fill-available;height: 400px" name="text">
</textarea> <br><br>
<input type="submit" value="Submit">
</form>
You just need to set the variables equal to the value in your hidden fields, like:
document.getElementById('pvkey').value = vkey;
Should give you:
<form action="acmg_controller.php" method="POST" target="_blank">
<p>
Source:
<select name="source">
<option value="pubmed">PubMed</option>
<option value="other">other</option>
</select>
PMID:
<input type="text" name = "pmid" style="width: 80px"> <br>
<input type="hidden" name="vkey" id="pvkey">
vkey:
<script>
var hashParams = window.location.hash.substr(1).split('&');
var temVkey = hashParams[2].split('=');
var vkey = temVkey[1];
document.write(vkey);
document.getElementById('pvkey').value = vkey;
</script> <br>
gene+varient
<input type="hidden" name="genevar" id="genevar">
<script>
var hashParams = window.location.hash.substr(1).split('&');
var temvarient = hashParams[1].split('=');
var varient = temvarient[1];
var hashParams_ = window.location.hash.substr(1).split('&');
var temgene = hashParams_[0].split('=');
var gene = temgene[1];
document.write(gene+' '+varient);
document.getElementById('genevar').value = gene+' '+varient;
</script> <br>
</p>
<label>Summary:</label> <br>
<textarea style = "width: -webkit-fill-available;height: 400px" name="text">
</textarea> <br><br>
<input type="submit" value="Submit">
</form>
I've js script for gets elements array:
var inputs = '';
var form_name=document.getElementById("my_form");
for ( var i=0; i < form_name.elements.length; i++ ) {
var input_name = form_name.elements[i].name;
var input_value = form_name.elements[i].value;
inputs += input_name + '=' + input_value + '&';
}
from the HTML form:
<form action="" method="post" id="my_form">
<input type="text" name="input_1">
<input type="text" name="input_2">
</form>
But with that script I can't get elements array from the form with a <div></div> tags:
<div><form action="" method="post" id="my_form_with_divs">
<div><input type="text" name="input_1"></div>
<div><input type="text" name="input_2"></div>
</form></div>
The script can't get input names and values from the my_form_with_divs.
What to do to get elements array from a my_form_with_divs form ?
It would seem that your Javascript was looking for the wrong element.
var form_name=document.getElementById("my_form"); //Incorrect
var form_name=document.getElementById("my_form_with_divs");
But you can test out the snippet below.
var inputs = '';
var form_name = document.getElementById("my_form_with_divs");
for ( var i=0; i < form_name.elements.length; i++ ) {
var input_name = form_name.elements[i].name;
var input_value = form_name.elements[i].value;
console.log(input_name);
console.log(input_value);
inputs += input_name + '=' + input_value + '&';
}
console.log(inputs);
<div><form action="" method="post" id="my_form_with_divs">
<div><input type="text" name="input_1"></div>
<div><input type="text" name="input_2"></div>
</form></div>
Give all the inputs a class so you can select them with document.getElementsByClassName.
<div><form action="" method="post" id="my_form_with_divs">
<div><input type="text" name="input_1" class="inputs" value="testvalue1"></div>
<div><input type="text" name="input_2" class="inputs" value="testvalue2"></div>
</form></div>
<script>
var inputs = document.getElementsByClassName("inputs");
for (var i=0; i < inputs.length; i++ ) {
console.log("Name: "+inputs[i].name+" Value: "+inputs[i].value);
}
</script>
I would probably use the FormData object and let it figure out all the elements in the form. You just have to give it the form element.
var formData = new FormData( document.getElementById('my_form_with_divs') );
var text = '';
formData.forEach(function(value, key){
if ( text ) text += '&';
text += key +'='+ value;
});
console.log( text );
<div><form action="" method="post" id="my_form_with_divs">
<div><input type="text" name="input_1" value="x"></div>
<div><input type="text" name="input_2" value="y"></div>
<div>
<select name="gender">
<option>Male</option>
<option selected>Other</option>
<option>Male</option>
</select>
</div>
</form></div>
I would use ids or classes on the inputs, so you can access them directly, like this:
<div><form action="" method="post" id="my_form_with_divs">
<div><input id="input_1" type="text" name="input_1"></div>
<div><input class="input_2" type="text" name="input_2"></div>
</form></div>
// javascript
var input_1 = document.getElementById('#input_1').value;
var input_2 = document.getElementsByClassName("input_2");
input_2 = input_2[0]; // this may not be the exact code, but this is the idea.
the only bad thing about using classes in plain javascript is you will have to iterate through them to get the values, even if there is only one or use the index. Not as good, ID is easier but too many of them in a page can kill performance. With a few ids though, you should be fine.
I have a form on my webpage that looks like this:
<form id="numberForm">
<input type="radio" name="number" value="singular"> singular <br>
<input type="radio" name="number" value="plural"> plural <br>
</form>
How do I pull the value of the currently selected radio button (without a submit action) in Javascript?
What I'd like is something along the lines of the following:
var formInput = document.getElementById("numberForm");
var numberInputValue = formInput.SELECTEDBUTTON.value;
Try this (using querySelector in JS) :
function getSel() {
var formInput = document.getElementById("numberForm");
var rb=formInput.querySelector('[type="radio"]:checked'); //get selected radio button
document.getElementById('spVl').innerHTML = 'Selected value = '+rb.value;
}
<form id="numberForm">
<input type="radio" name="number" value="singular"> singular <br>
<input type="radio" name="number" value="plural"> plural <br>
<input type="button" value="Get selected radio button value" onclick="getSel();" /><br>
<span id="spVl"></span>
</form>
var form = document.getElementById('numberForm');
var radios = form.getElementsByTagName('input');
for(var i = 0; i < radios.length; ++i) {
if(radios[i].checked) {
console.log("Radio button '" + radios[i].value + "' is checked");
}
}
I am trying to get the value of a checkbox to store in my database, but my code crashes right after running the serialized array.
Here is the javascript:
$(function () {
$('.form-signin').on('submit', function (e) {
e.preventDefault();
var data = $(this).serializeArray(),
pname = data[0].value,
score = data[1].value,
cheatm = data[2].value;
var GameScore = Parse.Object.extend("GameScore");
var gs = new GameScore();
gs.set("score", parseInt(score));
gs.set("playerName", pname);
gs.set("cheatMode", cheatm === 'true');
gs.set("user", Parse.User.current());
.
.
.
It crashes after cheatm = data[2].value;
Here is the HTML:
<form class="form-signin" role="form">
<h2 class="form-signin-heading" id="login-greeting">Enter Game Score</h2>
<input type="text" name="Player Name" class="form-control" placeholder="Player Name" required="" autofocus="">
<input type="number" name="Score" class="form-control" placeholder="Score" required="">
<input type="checkbox" value = 'true'> Cheat Mode<br>
<button class="btn btn-lg btn-primary btn-block" type="submit">Submit</button>
</form>
You could give the check-box an id and call it in JavaScript like:
HTML:
<input type="checkbox" id="myCheckbox"/>
jQuery:
var isMyCheckboxChecked = $("#myCheckbox").is(":checked");