I have a <button type="reset">, used in a context menu which contains a lot of buttons and displays only the ones needed for each page.
My problem is that this button is supposed to reset all the forms of the page it is in, but it is in a lot of different pages. The only way I found is to pass the id of the form (which is the only way according to the doc) but every page is different so I can't use that method.
If anyone has a solution for this that would be awesome.
Using jquery you can select and reset all forms like this
$("button[type='reset']").click(function(){
$('form').each(function() { this.reset() });
});
This can be accomplished quite easily, but you would need to use javascript, either plain or with some kind of library, such as jQuery.
The plain javascript way
function reset() {
var elements = document.getElementsByTagName("form");
for (var i = 0; i < elements.length; i++) {
elements[i].reset();
}
}
the above will iterate through all forms of your page and reset them one-by-one.
Demo:
function reset() {
var elements = document.getElementsByTagName("form");
for (var i = 0; i < elements.length; i++) {
elements[i].reset();
}
}
<form>
Form 1
<input type="text" />
<input type="text" />
</form>
<form>
Form 2
<input type="text" />
<input type="text" />
</form>
<form>
Form 3
<input type="text" />
<input type="text" />
</form>
<button onClick="reset();">Reset</button>
The jQuery way
You can also use jQuery to do the same thing, much like #AaronUllal´s answer.
$("button[type='reset']").on('click', function() {
$('form').each(function() {
this.reset();
});
});
Demo:
$("button[type='reset']").on('click', function() {
$('form').each(function() {
this.reset();
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<form>
Form 1
<input type="text" />
<input type="text" />
</form>
<form>
Form 2
<input type="text" />
<input type="text" />
</form>
<form>
Form 3
<input type="text" />
<input type="text" />
</form>
<button type="reset">Reset</button>
If you can use jquery assign class to the forms that should be reset and select them by class.
Related
Before anyone marks this as a duplicate, I have looked at many sites and am currently using this one - jQuery - passing value from one input to another for guidance, yet no result... I am trying to pass a value from one input in one form to another input in a 'table'. I have put it in a table because of a very weird reason - it does not display a Sparql value when in a form only displays in a table so the input was placed in a table. My code is below:
Form
<form onclick="txtFullName.value = txtFirstName.value +'_'+ txtLastName.value">
First name : <input type="text" name="txtFirstName" value="#ViewBag.FirstName"/> <br><br>
Last name : <input type="text" name="txtLastName" value="#ViewBag.LastName" /> <br><br>
Full name : <input type="text" id="txtFullName" name="txtFullName"> <br><br />
<input id="submit12" type="button" value="Submit">
</form>
Table
<table id="results">
<Full name:
<br>
<input id="userInput" type="text" name="fullname" ${userJson.userId == ''?'': 'disabled'} value="#ViewBag.DisplayName">
<br>
<input id="submit" type="submit" value="Submit">
</table>
JQUERY
$('#submit12').on('click', function (e) { //Form submit
$('#userInput').change(function () {
$('txtFullName').val($(this).val());
});
});
I am trying to display the txtFullName into userInput input when pressing submit but right now only the `txtFullName' is displayed when pressing submit. Also the submit is the submit button in the FORM.
Anymore info needed let me know:)
You need to change the onclick to action on the form if you are trying to use submit button. The other way is to use input type button instead of submit:
So:
$(document).ready(function() {
$('#submit12').on('click', function (e) {
console.log('test');
$("#txtFullName").val($("#txtFirstName").val() + '_' + $("#txtLastName").val());
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
First name : <input type="text" id="txtFirstName" value="First"/> <br><br>
Last name : <input type="text" id="txtLastName" value="Last" /> <br><br>
Full name : <input type="text" id="txtFullName" name="txtFullName"> <br><br />
<input id="submit12" type="button" value="Submit">
</form>
If you want to display txtFullName into userInput, simply do something like this:
$('#submit12').on('click', function (e) { //Form submit
$('#userInput').val($('#txtFullName').val());
});
And why do you need change function there , if yo need changes when click submit.
Edit your JQuery like this:
$('#submit12').on('click', function (e) { //Form submit
$('#userInput').change(function () {
$('#txtFullName').val($(this).val());
});
});
$('#submit').on('click', function () { //Form submit
$('#userInput').val($('#txtFullName').val());
});
I don't clearly understand why you do it but It can fix your code.
It is not entirely clear what the two buttons do, but the operation itself is really very simple. See comments inline for explanations:
// Wait until the DOM is loaded and all elements are avaialble
window.addEventListener("DOMContentLoaded", function(){
// Get references to the DOM elements you'll need
var theForm = document.getElementById("frmTest");
var txtFirstName = document.getElementById("txtFirstName");
var txtLasttName = document.getElementById("txtLastName");
var txtFulltName = document.getElementById("txtFullName");
var txtUserInput = document.getElementById("txtUserInput");
var btn1 = document.getElementById("btnSubmit1");
var btn2 = document.getElementById("btnSubmit2");
// Function to join names together
function combine(){
txtFullName.value = txtFirstName.value + '_' + txtLastName.value;
}
// Set event handlers
frmTest.addEventListener("click", combine);
btn1.addEventListener("click", combine);
});
<!-- Keep you JavaScript out of your HTML -->
<form id="frmTest">
First name : <input type="text" id="txtFirstName" name="txtFirstName" value="#ViewBag.FirstName">
<br><br>
Last name : <input type="text" id="txtLastName" name="txtLastName" value="#ViewBag.LastName" >
<br><br>
Full name : <input type="text" id="txtFullName" name="txtFullName"> <br><br />
<input id="btnSubmit1" type="button" value="Combine Names">
<table id="results">
<Full name:
<br>
<input id="txtUserInput" type="text" name="fullname" ${userJson.userId == ''?'': 'disabled'} value="#ViewBag.DisplayName">
<br>
<input id="btnSubmit2" type="submit" value="Submit">
</table>
</form>
I am attempting to write JavaScript that traverses multiple HTML forms, checks an input for a given value on edit, then enables/disables the submit button for that form based on the input value.
I have a very simple example script, which overrides the onclick function of checkboxes, to test the flow of my code.
<form>
<input type="checkbox" />
<input type="submit" disabled="disabled" />
</form>
<form>
<input type="checkbox" />
<input type="submit" disabled="disabled" />
</form>
<form>
<input type="checkbox" />
<input type="submit" disabled="disabled" />
</form>
<form>
<input type="checkbox" />
<input type="submit" disabled="disabled" />
</form>
<form>
<input type="checkbox" />
<input type="submit" disabled="disabled" />
</form>
<script type="text/javascript">
forms = document.getElementsByTagName("form");
for(i=0; i<forms.length; i++)
{
inputs = forms.item(i).getElementsByTagName("input");
inputs.item(0).onclick = function()
{
if(this.checked)
inputs.item(1).removeAttribute("disabled");
else
inputs.item(1).setAttribute("disabled","disabled");
}
}
</script>
What I expect to happen: the checkboxes change the value of the submit button in the same form.
What actually happens: all the checkboxes change the value of the submit button in the last form.
The actual code will be somewhat smarter, but I want to understand the flow of JavaScript code before progressing onto something more complex.
Thanks in advance!
Try something like this:
document.body.onchange = function(e) {
// this delegates all the way to the body - if you have a more specific
// container, prefer using that instead.
e = e || window.event;
var t = e.srcElement || e.target;
if( t.nodeName == "INPUT" && t.type == "checkbox") {
// may want to add a className to the checkboxes for more specificity
t.parentNode.getElementsByTagName('input')[1].disabled = !t.checked;
}
};
The reason you are seeing the behaviour you're getting is because inputs' value is not fixed, you are repeatedly re-assigning it to the next form's elements, ultimately resulting in the last one.
I have this input:
<input id="tag1" type="text" name="tags" class="tags" value="#Model.list" />
and I want to get this input value in a hidden input, so I used this:
<input type="hidden" name="tag" value="tags" />
Instead of getting the true value of the first input, I only get the string "tags"! Can you please tell me how to obtain the true value of the first input in my hidden input? Thanks!
EDIT: Actually it's a submit page, the user enters tags in the #tag1 and when he clicks on submit I want to send these tags to my controller, that's why I'm using the hidden input...
My full code:
<form>
<p>
<input id="tag1" type="text" name="tags" class="tags" value="#Model.list" onblur="setValue()"; /></p>
<script>
$('#tag1').tagsInput({
// my parameters here
});
</script>
<style>
#wrapper {
margin: 20px;
}
</style>
<p>
<input type="submit" value="Create" />
<input type="hidden" name="taggg" id="tag2" />
<script type="text/javascript">
function setValue() {
document.getElementById("tag2").value = document.getElementById("tag1").value;
}
window.onload = setValue;
</script>
</p>
</form>
I don't understand why you would want to copy the value of one input field to another (albeit, hidden). But if that is what you want to do, try using the below code.
The function attached to the onblur event of the input field would set the value of the input field to the hidden field whenever it loses focus.
The window.onload = setValue will do the same on page load.
HTML
<input id="tag1" type="text" name="tags" class="tags" value="#Model.list" onblur="setValue();" />
<input type="hidden" name="tag" value="tags" id="tag1_hidden" /> <!-- Note the addition of an id attribute -->
JavaScript
function setValue() {
document.getElementById("tag1_hidden").value = document.getElementById("tag1").value;
}
window.onload = setValue;
Try this
<input id="tag1" type="text" name="tags" class="tags" value="#Model.list" />
<input type="hidden" name="tag" value="tags" id="tag2" />
Jquery:
$("#tag2").val($("#tag1").val());
or
$("#tag1").blur(function() {
$("#tag2").val($(this).val());
});
You can do like this (and you will need javascript for this).
Give a id to your hidden input also like:
<input type="hidden" id="hidden_input" name="tag" value="tags" />
and then use/paste this code when you need it:
var input_value = document.getElementById('tag1').value;
document.getElementById('hidden_input').value = input_value;
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.
the situation I'm struggling with is that there are more forms on the page that looks like this (the hiddenId is different in each form):
<form method="post">
<input type="hidden" name="hiddenId" value="111222">
<input type="submit" value="Proceed">
</form>
<form method="post">
<input type="hidden" name="hiddenId" value="111333">
<input type="submit" value="Proceed">
</form>
How do I submit with javascript (I don't mind using jQuery) a specific form that includes hiddenId of a wished value? Thank you for your help!
Something along these lines should get you started:
var inputs = document.getElementsByTagName("input");
for(var i = 0; i < inputs.length; i++) {
if(inputs[i].type === "hidden" && inputs[i].value === "111333") {
inputs[i].form.submit();
}
}
If you can use jQuery:
$("input[type='hidden'][value='something']").closest("form").submit();
document.forms is an array. document.forms[0] is the first one.
Elements work the same way:
document.forms[0].elements[0].value etc.
You can loop through until you have the value then submit the current form:
document.forms[x].submit()
Access all of the forms using var allForms = document.forms;
loop through them as needed to access inputs
You could use document.querySelector or one of the various JavaScript libraries that emulate it on older browsers to find the hidden input element, then use its form property to access the form and invoke the submit method.
You can add an id to the form and submit button:
<form method="post" id="form1">
<input type="hidden" name="hiddenId" value="111222">
<input type="submit" value="Proceed" id="submit1">
</form>
<form method="post" id="form2">
<input type="hidden" name="hiddenId" value="111333">
<input type="submit" value="Proceed" id="submit2">
</form>
Then use jQuery to submit the form:
$("#submit1").click(function() {
form1.submit();
}
$("#submit2").click(function() {
form2.submit();
}