want to action form in two urls - Jquery

Sohail
October 12, 2022
196 views
1 vote
2 Answers

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.

Answers

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>

Please signup or login to give your own answer.

Click here to cancel reply.

want to action form in two urls – Jquery

Answers