We Keep Coding

want to action form in two urls

is there any way to post form in two different urls? I am working on payment gateways and i want to post form in two urls at some conditions.
here is the code...
<h3>Page Redirection Request</h3>
<form action="https://sandbox.bankalfalah.com/SSO/SSO/SSO" id="PageRedirectionForm" class="PageRedirectionForm" method="post" novalidate="novalidate">
<input type="radio" autocomplete="off" id="TransactionTypeId" class= "TransactionTypeId" name="TransactionTypeId" value="Bank account"> Bank Account
<input type="radio" autocomplete="off" id="TransactionTypeId1" class= "TransactionTypeId" name="TransactionTypeId" value="Easypaisa"> Easypaisa
Amount: <input autocomplete="off" id="TransactionAmount" name="TransactionAmount" class="TransactionAmount" placeholder="Transaction Amount" type="text" value="5000">
<button type="submit" class="btn btn-custon-four btn-danger" id="run" class="run">RUN</button>
</form>
let me explain the whole scenario...
Its a form for payment integration.i am using two payment gateways.there are two radio options in the form as you can see.if i check bank account it should go to https://sandbox.bankalfalah.com/SSO/SSO/SSO and if i check easypaisa it should go to https://easypay.easypaisa.com.pk/easypay/Index.jsf
How it will happen?
if anyone have solution then please tell me.
i shall be very thankful.

You can change the action attribute of the form based on the data attribute of the radio button.
a quick example is shown below
function changeForm(e){
var selectedValue = e.target.dataset.url;
document.getElementById("myForm").action = selectedValue;
console.log(selectedValue)
}
document.querySelectorAll("input[name='fieldName1']").forEach((input) => {
input.addEventListener('change', changeForm);
});
<h3>Page Redirection Request</h3>
<form action="" id="myForm">
<input type="radio" name="fieldName1" value="Type 1" data-url="google.com"> Google
<input type="radio" name="fieldName1" value="Type 2" data-url="facebook.com"> Facebook
</form>

You can use the code below
function myFunction2() {
var checkBox = document.getElementById("myCheck2");
var text = document.getElementById("text2");
if (checkBox.checked == true) {
text2.style.display = "block";
}
if (checkBox.checked == false) {
text2.style.display = "none";
}
}
function myFunction1() {
var checkBox = document.getElementById("myCheck1");
var text = document.getElementById("text1");
if (checkBox.checked == true) {
text1.style.display = "block";
}
if (checkBox.checked == false) {
text1.style.display = "none";
}
}
<p>Display some text when the checkbox is checked:</p>
<label for="myCheck2">Bank2:</label>
<input type="checkbox" id="myCheck2" onclick="myFunction2()" />
<label for="myCheck1">Bank1:</label>
<input type="checkbox" id="myCheck1" onclick="myFunction1()" />
<p id="text2" style="display:none">< a href="">Bank2</a></p>
<p id="text1" style="display:none">< a href="">Bank1</a></p>

Is there a way to assign the user's input and/or selection into the message?

<input type="radio" name="T" id="twenT">20
<input type="radio" name="T" id="sixT">60
<input id="uIn"></input>
<button onclick="function()">
How do I make it so that the user selects one option or inputs text and then the text message changes to the text that was selected/entered.
Pure JavaScript is preferred.

Try this
I changed to name="T" to make them valid radios
I also closed the A to make it valid. If you want to click the link and change, then we can remove the button
const href = "sms://+15552345678;?&body="
const sms = document.getElementById("sms");
const uIn = document.getElementById("uIn");
document.getElementById("changeMsg").addEventListener("click",function(e) {
const val = document.querySelector("input[name=T]:checked");
if (val) {
sms.href = href.split("body=")
.join(`body=${encodeURIComponent(val.value)}&uIn=${encodeURIComponent(uIn.value)}`)
console.log(sms.href)
}
else {
console.log("radio not checked")
}
})
<input type="radio" name="T" value="twenT">20
<input type="radio" name="T" value="sixT">60
<input id="uIn" type="text" value="" />
<a id="sms" href="sms://+15552345678;?&body=CHANGE%20THIS">Call us</a>
<button id="changeMsg" type="button">Change</button>

want text to display when submit input is pressed and 3 seconds later it redirects to Index.html

Need this site to show some text when the submit input is pressed and when the text shows then a timer starts (3 seconds) to then go back to ../index.html
HTML
<label for="fname">Fornavn</label>
<input type="text" id="fname" name="firstname" placeholder="Ditt fornavn.." required>
<label for="lname">Etternavn</label>
<input type="text" id="lname" name="lastname" placeholder="Ditt etternavn.." required>
<label for="country">Fylke</label>
<select id="country" name="country">
<option value="australia">Agder</option>
<option value="canada">Rogaland</option>
<option value="usa">Viken</option>
</select>
<label for="subject">Tema</label>
<textarea id="subject" name="subject" placeholder="Hva gjelder det.." style="height:200px" required></textarea>
<input id="submitNew" type="submit" value="Send inn">
</form>
</div>
</div>
<div id="success" hidden>
<p><center><strong>Vellykket</strong></center>Du har Vellykket Sendt inn</p>
</div>
Javascript
function myFunction1() {
var x = document.getElementById("success");
if (x.style.display === "none") {
x.style.display = "block";
} else {
x.style.display = "none";
}
}
function formSubmit(form) {
document.getElementById("submitNew").value = "Loading...";
setTimeout(function() {
form.submit();
}, 3000); // 3 seconds
return false;
}
want success text to display when submit button is pressed and 3 seconds later it redirects to Index.html

First wrap your code in a form tag with an id and action="index.html"
<form id="form1" action="index.html">
<!-- your html fields and buttons here -->
</form>
Then, in your script, assign form to a variable and add a listener for the submit.
Note that e.preventDefault() will avoid your form to submit immediately, then call your function to display the message and setTimeout to submit.
var form = document.getElementById('form1');
// Adds a listener for the "submit" event.
form.addEventListener('submit', function(e) {
e.preventDefault();
document.getElementById("submitNew").value = "Loading...";
myFunction1();
setTimeout(function() {
form.submit();
}, 3000); // 3 seconds
return false;
});

Display required fields on click with Javascript

I'm trying to display required fields on click with javascript. I have large form and inside of that form I have some required fields. Idea is to have button so that user can click (like toggle) and see only required fields?
So far my approach is something like this:
function yesnoCheck() {
if (document.getElementById('yesCheck').checked) {} else document.getElementById('ifYes').remove();
}
<button onclick="javascript:yesnoCheck();" id="yesCheck">Click</button>
<div id="ifYes">
<input type="text" name="usrname" required>
</div>
<div>
<input type="text" name="company" required>
</div>
What is the best way to this?

In case you really want to toggle the optional fields, you could just hide all optional elements in form (like in this example).
Keep in mind that yu may want to change the css selector to have more control what elements you want to hide.
eg:
form input:not([required]),
form select:not([required]),
form textarea:not([required]), ....
You may also want to not just hiden those fields but style them differently (opacity or something like that).
function toggleOptionalFields() {
document.querySelectorAll('form > :not([required])').forEach(field => field.hidden = !field.hidden);
}
<form>
<input required value="i am required" />
<input />
<select required>
<option value="1">required! :)</option>
</select>
<input />
<input />
<input required value="i am required too" />
</form>
<button onclick="toggleOptionalFields()">Toggle optional fields</button>
Also this function will not in IE because querySelectorAll().forEach and the arrow function are not supportet.
You could easily change that by using a regular function instead of the arrow-function and iterate differenttly thru the elementlist (eg, for(;;) or [].forEach.call(document.querySelectorAll(), function(element) {...});, ...).

Show and hide optional fields using button click
function toggleOptional(event){
var button = event.currentTarget;
var action = button.getAttribute('data-action');
//var optionalFields = document.querySelectorAll("form input:not([required])");
var optionalFields = document.querySelectorAll("form :not([required])");
if(action == "hide"){
optionalFields.forEach(function(value){
value.style.display = "none";
});
button.setAttribute('data-action','show');
button.innerText = "Show Optional ";
} else {
optionalFields.forEach(function(value){
value.style.display = "inline-block";
});
button.setAttribute('data-action','hide');
button.innerText = "Hide Optional";
}
}
input,textarea,select {
width : 70vw;
}
<button onclick="toggleOptional(event)" data-action="hide" >Hide Optional</button>
<form>
<input type="text" name="usrname" placeholder="usrname" required>
<input type="text" name="phone" placeholder="phone" required >
<input type="text" name="company" placeholder="company" >
<select name="birthyear" required >
<option value="">Select Year of Birth</option>
<option value="1992">1992</option>
<option value="1993">1993</option>
</select>
<textarea required name="description" placeholder="description" ></textarea>
</form>

If you want to do it in javascript then here is a simple solution
Javascript
function yesnoCheck() {
var x = document.getElementById("ifYes");
if (x.style.display === "none") {
x.style.display = "block";
} else {
x.style.display = "none";
}
}
CSS
#ifYes{
display: block;
}

You can take a boolean variable and toggle its value and show or hide your elements based on it.
var toggleIfYes=false;
function yesnoCheck() {
toggleIfYes=!toggleIfYes
if (toggleIfYes) {
//show the elements
} else{
//hide the elements
}
}
<button onclick="javascript:yesnoCheck();" id="yesCheck">Click</button>
<div id="ifYes">
<input type="text" name="usrname" required>
</div>
<div>
<input type="text" name="company" required>
</div>

You could wrap all fields in the container like <div> or <form>
HTML
<div class="container">
<input required />
<input />
<input required />
</div>
then your toggle button function should toggle a class in the container
Javascript
function yesnoCheck() {
let container = document.querySelector('.container')
container.classList.toggle('only-required')
}
now you can use CSS to hide the non-required field if the container has a class only-required
CSS
.container.only-required input:not([required]) {
display: none;
}

You're using document.getElementById('ifYes').remove() which removes the element from the DOM. This way you won't be able to recover your element when you click the toggle button again. Also, you're verifying a <button/> element as if it were an <input type="checkbox" /> so you might want to use a checkbox instead.
You'd be better off using document.getElementById('ifYes').style.display = 'none' as it fits best in this situation:
function yesnoCheck() {
if (document.getElementById('yesCheck').checked) {
document.getElementById('ifYes').style.display = 'none';
}
else {
document.getElementById('ifYes').style.display = '';
}
}
<input type="checkbox" onclick="javascript:yesnoCheck();" id="yesCheck">Click</input>
<div id="ifYes">
<input type="text" name="usrname" required>
</div>
<div>
<input type="text" name="company" required>
</div>

Revealing & Switching Between Hidden HTML Forms

I've read through a lot of tickets like this question but can't seem to get what I want to work. So I've had to ask this one.
I have 2 forms on a HTML page and 2 buttons.
Both forms are hidden using inline styling: style="display:none;"
What I want to do is reveal form 1 with button 1 and hide form 2, and button 2 to hide form 1 and show form 2.
Here is button 1:
<button type="button" id="button7">Click Here If your Serial Number is 549999 or Below</button>
Here is button 2:
<button type="button" id="button8">Click Here If your Serial Number is 550000 or Above</button>
This is form 1:
<form name="lowsearch" id="lowsearch" method="post" action="action.html" target="formresponse" style="display:none;">
<input TYPE="hidden" NAME="command" VALUE="search">
<input TYPE="hidden" NAME="file" VALUE="Repair_Project/R&S2Web.db">
<input TYPE="hidden" NAME="database" VALUE="Old_Serial">
<input TYPE="hidden" NAME="searchfields" VALUE="S_Serial_No;S_Description">
<p><b>Please enter your Serial Number</b></p>
<input TYPE="text" size="10" name="S_Serial_No" id="S_Serial_No" required>
<p><input TYPE="SUBMIT" NAME="b1" id="SUMBIT" VALUE="Find Device" class="buttonText"></p>
</form>
This is form 2:
<form name="highsearch" id="highsearch" method="post" action="action.html" target="formresponse" style="display:none;">
<input TYPE="hidden" NAME="command" VALUE="search">
<input TYPE="hidden" NAME="file" VALUE="Repair_Project/R&S2Web.db">
<input TYPE="hidden" NAME="database" VALUE="Serial">
<input TYPE="hidden" NAME="searchfields" VALUE="S_Serial_No;S_Description">
<p><b>Please enter your Serial Number</b></p>
<input TYPE="text" size="10" name="S_Serial_No" id="S_Serial_No" required>
<p><input TYPE="SUBMIT" NAME="b1" id="SUMBIT" VALUE="Find Device" class="buttonText"></p>
</form>
My issue is I don't know how to finish the Javascript to get the desired affect.
<script>
function func(a) {
var el;
if(a === 1) {
el = document.getElementById("lowsearch");
}
if(a === 2) {
el = document.getElementById("highsearch");
}
document.getElementById('button7').onclick = function () {
func(1);
};
document.getElementById('button8').onclick = function() {
func(2)
};
</script>

What you want to do is change the style property on the forms based on which one you want to show/hide. Inside the if blocks in your func function, you can set the property display values.
function func(a) {
if(a === 1) {
document.getElementById("lowsearch").style.display = "block";
document.getElementById("highsearch").style.display = "none";
}
if(a === 2) {
document.getElementById("lowsearch").style.display = "none";
document.getElementById("highsearch").style.display = "block";
}
}
You can view an example of it working at this fiddle: http://jsfiddle.net/thetimbanks/mzvkxr7d/