I know that, using Javascript, I can tell a form to submit using something like this:
document.forms[0].submit()
However, if there are a number of forms on a page, which could be in any order, how would I target the submit link in this form:
<form action="/services/auth/" method="post">
<div id="auth-allow-container" class="button-container">
<a class="Butt" id="auth-allow" type="submit" href="#"><span>SUBMIT</span></a>
<a class="Butt CancelButt" id="auth-disallow" href="#home"><span>CANCEL</span></a>
</div>
</form>
..so that it is as if the user has clicked SUBMIT?
You could make a function:
function submitFormById(id) {
var el = document.getElementById(id);
while ( el && el.tagName.toLowerCase() != 'form') {
el = el.parentNode;
}
el && el.submit();
}
Then you use this function like so:
submitFormById('auth-allow');
submitFormById('auth-disallow');
Both will submit the form.
Give the form a name attribute. Then you can do document.name.submit(). i.e.
<form name="MyForm" ....>
<input ... />
</form>
You would then be able to do document.MyForm.submit()
EDIT:
As you have said you can't change the html, solutions adding an ID are also no help. You will have to identify which numerical form element on the page this specific one is and do docuemnt.forms[x].submit() where x is the index of this form.
put in the link:
onclick="this.parentNode.parentNode.submit();"
this is a bit fragile if you change the dom structure but it is a generic link for this kind of form
update:
document.addEventListener("DOMContentLoaded", function() {
document.getElementById("auth-allow").addEventListener("click", submithAuthForm, false);
}, false);
function submithAuthForm(){
document.getElementById('auth-allow').parentNode.parentNode.submit();
}
Related
Due to the layout of my page I would like to place a custom element outside of a form.
Can I make something like <my-custom-element form="foo"> work?
Presuming you want the submit button to return the value of your element even though it is outside the form. This is one way, there are many more (including using the function here called addExtras() to dynamically append your external name/value pair(s) to the form).
<my-custom-element> <input name="custom" id="custom" value="foo"></my-custom-element>
<form id="myForm" onsubmit="return addExtras()" method="post">
<input type="hidden"" name="customItem" id="customItem" />
<input name="anotherField" value="india" />
<button type="submit">submit</button>
</form>
<script>
function addExtras() {
document.getElementById("customItem").value = document.getElementById("custom").value;
return true;
}
// ==========================================================
//Code to display the submitted items, and prevent submission for test purposes
//Not needed for production
document.getElementById("myForm").addEventListener('submit', function (e) {
//prevent the normal submission of the form
e.preventDefault();
for (var i = 0; i < document.getElementById("myForm").elements.length; i++) {
var e = document.getElementById("myForm").elements[i];
console.log(e.name, e.value)
}
});
</script>
I have a textfield:
Voornaam: <h3 class="title1">Kevin</h3>
<input type="text" id="myTextField1" />
<input type="submit" id="byBtn" value="Change" onclick="change1()"/><br/>
I can set a value of this using this function:
function change1(){
var myNewTitle = document.getElementById('myTextField1').value;
if( myNewTitle.length==0 ){
alert('Write Some real Text please.');
return;
}
var titles = document.getElementsByClassName('title1');
Array.prototype.forEach.call(titles,title => {
title.innerHTML = myNewTitle;
});
}
Now in my other page, I want to use the value. I know I can for example pass a value from one page to another like this:
<a href='convert.php?var=data'>converteren.</a>
And then for example show it by doing this in the other page:
echo $_GET['var'];
But I cant really seem to figure out how to use the value which I've set using my textfield.
So my goal for now is to display the value I've set using my textfield in the other page using the method I just described.
Basically all I want to happen is for my textfield to change the value inside here aswell:
<a href='convert.php?var=data'>converteren.</a>
So where data is the value, I want it to become what I've put in the textfield.
Could anybody provide me with an example?
I've altered a bit your javascript code to make the link as you want.
To explain the answer, i've added document.getElementById("myLink").href="convert.php?var=" + myNewTitle ; which updates your a href while your function runs and is not empty.
function change1(){
var myNewTitle = document.getElementById('myTextField1').value;
if( myNewTitle.length==0 ){
alert('Write Some real Text please.');
return;
}
document.getElementById("myLink").href="convert.php?var=" + myNewTitle ;
var titles = document.getElementsByClassName('title1');
Array.prototype.forEach.call(titles,title => {
title.innerHTML = myNewTitle;
});
}
<a id="myLink" href='#'>converteren.</a>
Wrap your inputs inside a form element.
In the action attribute, specify the destination url.
In the method attribute, choose between GET and POST.
For example:
<form method="GET" action="convert.php">
<input type="text" id="myTextField1" />
<input type="submit" id="byBtn" value="Change" onclick="change1()"/>
</form>
Clicking the submit button will call "convert.php?myTextField1={value}".
I've tried to search for an answer here but there are no answers that match what I need. I have more than 1 form with class name .sbt-form:
<form class='sbt-form'>
<input name='kord' val=1/>
</form>
<form class='sbt-form'>
<input name='kord' val=2/>
</form>
<form class='sbt-form'>
<input name='kord' val=3/>
</form>
When one form is submitted (let's say the third one) I want just to get the value of input element with name = 'kord'
How do i do this using jQuery?
You can attach a submit handler to the forms and search within them for the element you want to find. Try this:
$('.sbt-form').submit(function(e) {
e.preventDefault(); // stop the form submission to the server. Comment this if not needed.
var inputValue = $(this).find('input[name=kord]').val();
});
Try this :
$("mySubmitButton").click(function () {
$(this).closest(".sbt-form").find("input[name='kord']").val();
});
try
$('.sbt-form').click(function() {
$(this).find("input[name='kord']").val();
});
OR you can get whole form's value with serialize() function on submitting the form:
JS Code:
$(".sbt-form").submit(function(e){
e.preventDefault();
console.log($(this).serialize());
});
i have 8 text fields and two textareas in my form.i am trying to access all of them and check whether they are empty or not.But somehow the javascript i wrote is not working.here is the code:
javascript:
function textboxes(formobj)
{
var ip = formobj.getElementsByTagName('input');
for(var i=0; i<ip.length; i++)
{
if(ip[i].value == "")
{
alert("empty field");
ip[i].focus();
return false;
}
}
}
The id of the form is 'genform' and this is passed as an arguement to the above javascript code while the button is clikced :
HTML:
<input type="submit" name="submit" value="Generate Questions"
onclick="return textboxes('genform'); return false;" />
This would be a lot easier with jQuery. Thats for another day :)
The onclick event handler passes the text 'genform' to your function. You have to grab the DOM element from this.
var ip = document.getElementById(formobj).getElementsByTagName('input');
I'm new to html and im trying to hide/show forms if the user ticks a box a form appears below it.
I have a form e.g.
Name :
Username :
Add More Users: (tickbox)
If the user ticks the 'Add More Users', another form with the fields 'Name,Username,Add More Users' appears below it. How is this possible?
HTML
<input type="checkbox" onclick="display(this)">Add more users</input>
<div id="yourDiv"> ...other forms... </div>
JavaScript
function display(e){
if (e.checked)
document.getElementById('yourDiv').style.display = 'block';
else
document.getElementById('yourDiv').style.display = 'none';
}
An even better way to do this (thanks to What)
HTML
<input id="more" type="checkbox">Add More Users</input>
<div id="yourDiv"> ...other form... </div>
JavaScript
window.onload = function () {
document.getElementById('more').onclick = function () {
if (this.checked)
document.getElementById('yourDiv').style.display = 'block';
else
document.getElementById('yourDiv').style.display = 'none';
}
}
You will need to use scripts for that.
First of all put the form you want to Show/Hide inside a <div id="myForm"> tag
and enclose it with
Then use jQuery http://www.jquery.com (download the jquery library and link it to your page and add an event at the loading of the page to run a function to check if the combo box is checked then execute:
("#myForm").toggle();
You can use .clone() and .append() (requires jQuery). You have give name attribute like
<input type="text" name="test[]" />