javascript - How to reuse an ajax form-loading function to open up several tabs with different parameters each?
Get the solution ↓↓↓I have a 3 forms on different web pages, each with a submit button. Clicking submit on an individual page, opens up an AJAX call toprocess_form
function of unknown origin (see function below), which loads the form for you. Essentially, upon clicking Submit, the function assembles form values, into a request and loads up a sub-page via an AJAX request.
Each form of the 3 is the same at its core, but has slight variations and options.
What I want to do is to merge the 3 forms into a single one, and then have my clicking Submit open up 3 new browser tabs, one for each specific form option.
So I am looking for a way to reuse thisprocess_form
function (desirable), to open up the windows, or maybe modify it (undesirable as its being used by lots of other files) to accomplish my goal.
See snippet below to see how it works on my end. An answer I am seeking is to have a single form that opens up the 3 original forms, but each being in a new tab window.
//abridged version of the library function I use for AJAX
function process_form(form, url, redir, response, method, delay) {
var formObj = document.getElementById(form);
var post_str = "";
if (method == "POST") {
for (var i = 0; i < formObj.length; i++) {
if (formObj.elements[i].tagName == "INPUT") {
if (formObj.elements[i].type == "text") {
post_str += escape(formObj.elements[i].name) + "=" + encodeURIComponent(formObj.elements[i].value) + "&";
}
}
}
}
//here this will be a load_page() call
//but replaced here with alert to show functionality
alert("Load Form with [" + post_str + "]");
}
<form id="a">
<input name="opt_a" type="text" value='4' />
<input type="button" onclick="process_form('a', '', '', '', 'POST', '')" value="SelectA" id="selButton" name="selButton" />
</form>
<form id="b">
<input name="opt_b" type="text" value='5' />
<input type="button" onclick="process_form('b', '', '', '', 'POST', '')" value="SelectB" id="selButton" name="selButton" />
</form>
<form id="c">
<input name="opt_c" type="text" value='6' />
<input type="button" onclick="process_form('c', '', '', '', 'POST', '')" value="SelectC" id="selButton" name="selButton" />
</form>
Answer
Solution:
Your<form>
tags have no attributes, so if your actual code does the same, it's sending the form values via GET.
Using JavaScript, you could grab the values of the form elements, build the appropriate URLs with the values from the forms included in the URL (ex.mypage.php?input1=value1&input2=value2
), and then usewindow.open()
to open three new tabs with the appropriate URL in each.
Example:
function process_form() {
var value1 = document.getElementById('value1').value;
var value2 = document.getElementById('value2').value;
var value3 = document.getElementById('value3').value;
window.open('mypage.php?value1=' + value1);
window.open('mypage.php?value2=' + value2);
window.open('mypage.php?value3=' + value3);
}
<form>
<input type="text" name="value1" id="value1" />
<input type="button" onclick="process_form()" value="SelectA" id="selButton" name="selButton" />
</form>
<form>
<input type="text" name="value2" id="value2" />
<input type="button" onclick="process_form()" value="SelectB" id="selButton" name="selButton" />
</form>
<form>
<input type="text" name="value3" id="value3" />
<input type="button" onclick="process_form()" value="SelectC" id="selButton" name="selButton" />
</form>
Share solution ↓
Additional Information:
Link To Answer People are also looking for solutions of the problem: to enable extensions, verify that they are enabled in your .ini files
Didn't find the answer?
Our community is visited by hundreds of web development professionals every day. Ask your question and get a quick answer for free.
Similar questions
Find the answer in similar questions on our website.
Write quick answer
Do you know the answer to this question? Write a quick response to it. With your help, we will make our community stronger.
About the technologies asked in this question
PHP
PHP (from the English Hypertext Preprocessor - hypertext preprocessor) is a scripting programming language for developing web applications. Supported by most hosting providers, it is one of the most popular tools for creating dynamic websites.
The PHP scripting language has gained wide popularity due to its processing speed, simplicity, cross-platform, functionality and distribution of source codes under its own license.
https://www.php.net/
JavaScript
JavaScript is a multi-paradigm language that supports event-driven, functional, and mandatory (including object-oriented and prototype-based) programming types. Originally JavaScript was only used on the client side. JavaScript is now still used as a server-side programming language. To summarize, we can say that JavaScript is the language of the Internet.
https://www.javascript.com/
HTML
HTML (English "hyper text markup language" - hypertext markup language) is a special markup language that is used to create sites on the Internet.
Browsers understand html perfectly and can interpret it in an understandable way. In general, any page on the site is html-code, which the browser translates into a user-friendly form. By the way, the code of any page is available to everyone.
https://www.w3.org/html/
Welcome to programmierfrage.com
programmierfrage.com is a question and answer site for professional web developers, programming enthusiasts and website builders. Site created and operated by the community. Together with you, we create a free library of detailed answers to any question on programming, web development, website creation and website administration.
Get answers to specific questions
Ask about the real problem you are facing. Describe in detail what you are doing and what you want to achieve.
Help Others Solve Their Issues
Our goal is to create a strong community in which everyone will support each other. If you find a question and know the answer to it, help others with your knowledge.