Develop Reference

Javascript handle 2 forms in one page

I have 2 forms. I ask for an API-KEY int he first form to load values account in some inputs of the second form and submit it.
The first form:
<form id="formAPI" name="formAPI">
<label for="" >API-KEY</label>
<input type="text" class="form-control" id="inputApi" placeholder="XXX-XXX>
<input id="continue" type="submit" value='Continue' onclick="submit_api()"/>
</form>
The second is like this:
<form id="form2" >
<label for="inputName3" >Name</label>
<input type="text" id="inputName3">
<label for="selectDevices" >Device</label>
*here devices have to be loaded automatically due to the API KEY*
<select class="form-control" name ="device_s" id="id_devices">
<option value="1"> Device 1 </option>
<option value="2">Device 2</option>
<option value="3">Device 3</option>
</select
<input id="rule1" type="text" placeholder="Give a rule" />
<input id="btn2" type="submit" value='Submit' />
</form>
I have no choice if the page is reloaded outright or not. the essential is to preload some data from the second form via the API KEY of the first form.

You can use LocalDB js in your form1.
Create a js to write your api values and when submit the form2... receive this infos and fill where you need it.
Localdb support refresh and don't loose data.
Example:
https://www.codeproject.com/Tips/1021483/Localdb-js

How to choose an action page from a form and then submit values to that page HTML,PHP,Javascript

I'm trying to create a page with <form>, <option> and <select> attributes in a php page where I can select an action page from a dropdown menu. Like this Linking to other pages in HTML via drop-down menu And then depending on the option selected ask the user to input a text and be able to submit that reason to that action page. Similar to this Add input-box when selecting a specific option into select drop down
Also please post how you would submit the values to the action page in the way you have your code setup as currently I have been following this method. https://stackoverflow.com/a/1977439/9010400
Example of my form submission which doesn't have the action page selection.
If the below form action page is selected then post the values to that page, but I would like it to ask for a text input for the "reason" before posting.
<form action="url/page.php" method="POST">
<input type="hidden" name="user" value="tester" />
<input type="hidden" name="reason" value="test" />
<input type="submit" value="Ok"/>
In a way I'm trying to combine those different questions/answers I have mentioned in this post. I hope I have been clear as to what I trying to ask for help. Any help is much appreciated. Thank you.
Edit:
Some more info:
I want to able to post values to the form action I select. For example:
Change form action on select option
But I would also like to add a user input option and then submit that value as well to the action form.

Try this.
It will look for the form which name matches the selected option value and show it. Every other form will be hidden.
function showSelectedForm(){
var selected_form = document.querySelector('select').value
var forms = document.querySelectorAll('form')
for(var i=0;i<forms.length;i++){
if(forms[i].getAttribute('name')==selected_form)
forms[i].style.display = 'block'
else
forms[i].style.display = 'none'
}
}
form{
margin-top: 25px;
display: none;
}
form label{
display: block;
}
Action:
<select onchange="showSelectedForm()">
<option disabled selected>Please choose</option>
<option value="change_name">Change Name</option>
<option value="report_user">Report User</option>
<option value="delete_account">Delete Account</option>
</select>
<form name="change_name" action="/php/change_name.php">
<label>Name <input type="text" name="name"></label>
<label>Reason <input type="text" name="reason"></label>
<input type="submit">
</form>
<form name="report_user" action="/php/report_user.php">
<label>User <input type="text" name="user"></label>
<label>Report <textarea name="report"></textarea></label>
<input type="submit">
</form>
<form name="delete_account" action="/php/delete_account.php">
<label>Name <input type="text" name="name"></label>
<label>Are you sure? <input type="checkbox"></label>
<input type="submit">
</form>

How to pass input value from one form to another form at same jsp page?

I have two forms in my jsp page, first form have input values and second form have submit button,
i can't use both in same form because of some issue. now i want to access first form value into second form.
My Sample Code is Here,
<form name="onchange" id="first">
<div><input type="text" name="n1"></div>
<select onchange="document.forms['onchange'].submit();" name="select">
<option value="A">A</option>
<option value="A">A</option>
</form>
<form action="servlet" id="second">
<input type="submit" name="sub" value="Submit">
</form>
I need to access a first form value to second form on submit. is it any way to access? Thank You.

I dont exactly know what you want to do.But you cant send data of one form using a submit button of another form.
You could do one thing either use sessions or use hidden fields that has the submit button.
You could use javascript/jquery to pass the values from the first form to the hidden fields of the second form.Then you could submit the form.
Or else the easiest you could do is use sessions.
IN Jquery
<form>
<input type="text" class="input-text " value="" size="32" name="user_data[firstname]" id="elm_6">
<input type="text" class="input-text " value="" size="32" name="user_data[lastname]" id="elm_7">
</form>
<form action="#">
<input type="text" class="input-text " value="" size="32" name="user_data[b_firstname]" id="elm_14">
<input type="text" class="input-text " value="" size="32" name="user_data[s_firstname]" id="elm_16">
<input type="submit" value="Continue" name="dispatch[checkout.update_steps]">
</form>
$('input[type=submit]').click(function(){
$('#elm_14').val($('#elm_6').val());
$('#elm_16').val($('#elm_7').val());
});
This is the jsfiddle for it http://jsfiddle.net/FPsdy/102/

getElementById() and input form

I have a
function calcRoute() {
var start = document.getElementById('start').value;
}
And then a
<select id="start" onchange="calcRoute();">
<option value="somevalue">Dropdown 1</option>
<option value="somevalue">Dropdown 2</option>
<option value="somevalue">Dropdown 3</option>
</select>
Everything works properly. Now, instead of a dropdown list I need an input box. The problem is that I tried with
<form onsubmit="calcRoute();" method="get" id="start" action="#">
<input type="text" id="start" name="start">
<input type="submit" value="Go">
</form>
But it doesn't work (it's submitting the form to the server).. you can see a demo here. Remember that I don't need the dropdown list (it's there only to prove everything works), so it can go (there's no problem of double-called function). Thanks in advance :-)

You should change from:
<input type="text" id="startText" name="start">
To:
<input type="text" id="start" name="start">
As Javascript is searching for ID, not for name. (and in your code the ID is different from what Javascript is searching)
If you want use the input and the dropdown list in the same page, you just change your variable definition to something as:
var start = document.getElementById('startText').value || document.getElementById('start').value;
As if the input is empty, Javascript uses the value from the dropdown list.
Update
In adition to the change of the ID, change your form to something as:
<form>
<input type="text" id="start" name="start">
<input type="button" onclick="calcRoute();" value="Go">
</form>
To not allow form submission.

JavaScript - Form validation loop through specific fields

I'm wondering, what would be a short/good way of performing form validation in JavaScript by looping through all input-text as well as <select>, however, the condition on the select is that out of the 2 selects, ONLY one needs to be selected.
<form id="daform">
<input type="text" value="" name="name" id="name" />
<input type="text" value="" name="last" id="last" />
<select id="choice1" name="choice1">
<option>Bye</option>
<option>Hello</option>
</select>
<select id="choice2" name="choice2">
<option>Bye</option>
<option>Hello</option>
</select>
<input type="submit" />
</form>

Look into,document.getElementsByTagName().

You really should use some javascript toolkit for help with this, but if not this might help:
validateSelectChoices = function(){
return document.getElementById('choice1').selectedIndex || document.getElementById('choice2').selectedIndex;
}
This will check to see if one of the select boxes has the 'hello' value selected (keep in mind that dropdowns will always default to the first option in the list, in your case 'bye'.

Have you tried the jQuery validation plugin?
You can see a demo here.