i want to redirect to another url when the form is submitted how can i do it
i am new to ajax so please tell where to add the code which can do it
here is my code
<script type="text/javascript">
function submitForm() {
if ($("#fields_fname").val() == "") {
$("#fields_fname").focus();
alert("The First Name field is required.");
return false;
}
if ($("#fields_lname").val() == "") {
$("#fields_lname").focus();
alert("The Last Name field is required.");
return false;
}
if ($("#fields_email").val() == "") {
$("#fields_email").focus();
alert("The Email field is required.");
return false;
}
if ($("#fields_phone").val() == "") {
$("#fields_phone").focus();
alert("The Phone field is required.");
return false;
}
if ($("#fields_zip").val() == "") {
$("#fields_zip").focus();
alert("The Postal Code field is required.");
return false;
}
if ($("#fields_suffix").val() == "") {
$("#fields_suffix").focus();
alert("The 'I'm Interested In' field is required.");
return false;
}
$.ajax({
url: 'zohoprocess.php',
type:'POST',
data:$('#ContactForm').serialize(),
success: function(){
$(".form_result").html('Form 1 submitted successfully');
$.ajax({
url: 'https://app.icontact.com/icp/signup.php',
type:'POST',
data:$('#ContactForm').serialize(),
success: function(){
$(".form_result").html('Form 2 submitted successfully');
},
error:function(){
alert("success");
$(".form_result").html('');
return false;
}
});
},
error:function(){
alert("failure");
$(".form_result").html('');
return false;
}
});
return false;
}
</script>
<form id="ContactForm">
<input type="hidden" name="redirect" value="http://tennispronow.com/thanks.html">
<input type="hidden" name="errorredirect" value="http://www.icontact.com/www/signup/error.html">
<div id="SignUp">
<table width="260" class="signupframe" border="0" cellspacing="0" cellpadding="5">
<tr>
<td valign="top" align="right">
<span class="required">*</span>Email
</td>
<td align="left">
<input type="text" name="fields_email" id="fields_email">
</td>
</tr>
<tr>
<td valign="top" align="right">
<span class="required">*</span>First Name
</td>
<td align="left">
<input type="text" name="fields_fname" id="fields_fname">
</td>
</tr>
<tr>
<td valign="top" align="right">
<span class="required">*</span>Last Name
</td>
<td align="left">
<input type="text" name="fields_lname" id="fields_lname">
</td>
</tr>
<tr>
<td valign="top" align="right">
<span class="required">*</span>What Level Player are you?
</td>
<td align="left">
<select name="fields_prefix" id="fields_prefix">
<option></option>
<option value="Beginner">Beginner</option>
<option value="Upper Beginner">Upper Beginner</option>
<option value="Intermediate">Intermediate</option>
<option value="Advanced">Advanced</option>
</select>
</td>
</tr>
<tr>
<td valign="top" align="right">
<span class="required">*</span>I am Interested in:
</td>
<td align="left">
<select name="fields_suffix" id="fields_suffix">
<option></option>
<option value="Private Lessons">Private Lessons</option>
<option value="Lessons & Equipment">Lessons & Equipment</option>
<option value="Classes">Classes</option>
<option value="Equipment">Equipment</option>
</select>
</td>
</tr>
<tr>
<td valign="top" align="right">
<span class="required">*</span>Other Info:
</td>
<td align="left">
<input type="text" name="fields_fax" id="fields_fax">
</td>
</tr>
<tr>
<td valign="top" align="right">
<span class="required">*</span>Phone
</td>
<td align="left">
<input type="text" name="fields_phone" id="fields_phone">
</td>
</tr>
<tr>
<td valign="top" align="right">
<span class="required">*</span>Postal Code
</td>
<td align="left">
<input type="text" name="fields_zip" id="fields_zip">
</td>
</tr>
<input type="hidden" name="listid" value="42670">
<input type="hidden" name="specialid:42670" value="D1CQ">
<input type="hidden" name="clientid" value="860526">
<input type="hidden" name="formid" value="4668">
<input type="hidden" name="reallistid" value="1">
<input type="hidden" name="doubleopt" value="0">
<tr>
<td></td>
<td><span class="required">*</span> = Required Field</td>
</tr>
<tr>
<td></td>
<td><input type="submit" name="Submit" value="Submit" onClick="return submitForm()">
</td>
</tr>
</table>
<div class="form_result"> </div>
</div>
</form>
please check it dont know what to write more
Just add action attribute to the form tag.
Related
I am trying to make a table includes table in every row, and nested x-for is used with alpine.js.With clicking the button located in the lower right corner of the table, new row is added and all cells in the rows have the same value. I couldn't set the rows' values independently. Could you please help?
Thanks in advance for your help,
Cem
function handler() {
return {
fields1: [],
fields: [],
rows: [],
addRate() {
this.fields1.push({
value1: '',
value2: '',
value3: '',
rType: '',
typeA: '',
value4: '',
typeBDateFrom: '',
typeBDateTo: ''
});
},
listField() {
this.fields.splice(0);
this.fields1.splice(0);
this.rows.push({
id: this.id++
});
this.fields1.push({
value1: '',
value2: '',
value3: '',
rType: '',
typeA: '',
value4: '',
typeBDateFrom: '',
typeBDateTo: ''
});
this.fields.push({
value5: '3',
value6: '20',
value7: 'DC',
value8: '40',
value9: '523',
value10: '654',
value11: 'TEST',
value12: 'true',
value13: 'Class1',
value14: '5656',
value15: 'TRM78799',
id:'1'
});
},
}
};
function setDecimal(event) {
this.value = parseFloat(this.value).toFixed(3);
};
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<div class="container col-md-10 offset-md-1">
<div class="row" x-data="handler()" x-init="listField()">
<div class="col">
<table class="table align-items-center table-sm" style="text-align: center;">
<tr>
<template x-for="(row, index) in rows" :key="index">
<p>
<table class="table align-items-center table-sm table-bordered" style="text-align: center;">
<tbody>
<template x-for="(field1, index) in fields1" :key="index">
<tr class="table-success">
<td style="width:100px;"><b>Type</b></td>
<td style="width:100px;">
<select x-model="field1.rType" class="custom-select" name="rType"
id="rType" required>
<option selected>---</option>
<option value="Type A">Type A</option>
<option value="Type B">Type B</option>
</select>
</td>
<td x-show="field1.rType==='Type A'" style="width:120px;">
<b>Type A Name</b>
</td>
<td x-show="field1.rType==='Type A'">
<input x-model="field1.typeA" type="text" class="form-control"
name="typeA" id="typeA">
</td>
<td x-show="field1.rType==='Type A'" style="width:150px;">
<b>Value4</b>
</td>
<td x-show="field1.rType==='Type A'">
<input x-model="field1.value4" type="text" class="form-control"
name="value4" id="value4">
</td>
<td x-show="field1.rType==='Type B'" style="width:120px;">
<b>From</b>
</td>
<td x-show="field1.rType==='Type B'">
<input x-model="field1.typeBDateFrom" type="Type B" class="form-control"
name="typeBDateFrom" id="typeBDateFrom">
</td>
<td x-show="field1.rType==='Type B'" style="width:150px;">
<b>To</b>
</td>
<td x-show="field1.rType==='Type B'">
<input x-model="field1.typeBDateTo" type="Type B" class="form-control"
name="typeBDateTo" id="typeBDateTo">
</td>
</tr>
</template>
</tbody>
</table>
</p>
<p>
<table class="table align-items-center table-sm table-bordered" style="text-align: center;">
<thead class="thead-dark">
<tr>
<th>No</th>
<th style="width:20px;">Value5</th>
<th style="width:80px;">Value6</th>
<th style="width:150px;">Value7</th>
<th style="width:120px;">Value8</th>
<th style="width:120px;">Value9</th>
<th style="width:130px;">Value11</th>
<th style="width:180px;">Value12</th>
<th style="width:180px;">Value1</th>
<th style="width:180px;">Value2</th>
<th style="width:180px;">Value3</th>
</tr>
</thead>
<tbody>
<template x-for="(field, index) in fields" :key="index">
<tr>
<td x-text="index + 1"></td>
<td x-text="field.value5"></td>
<td x-text="field.value6"></td>
<td>
<p x-text="field.value7"></p>
<p
x-show="field.value7==='RFR' | field.value7==='RFRHC'">
<span x-text="field.value8"></span><span>
℃</span>
</p>
</td>
<td x-text="field.value9"></td>
<td x-text="field.value10"></td>
<td x-text="field.value11"></td>
<td x-show="field.value12">
<p>
<label><b>Value13 </b><span x-text="field.value13"></span></label>
</p>
<p>
<label><b>Value14 </b><span x-text="field.value14"></span></label>
</p>
</td>
<td x-show="!field.value12">
<p>
</p>
</td>
<td class="table-success">
<input x-model="field.value1" type="number" class="form-control"
onchange="setDecimal" min="0" max="10000000" name="value1"
id="value1" step="0.001" value="0.000" required>
</td>
<td class="table-success">
<select x-model="field.value2" class="custom-select" name="value2"
id="value2" required>
<option selected>---</option>
<option value="USD">USD</option>
<option value="EUR">EUR</option>
</select>
</td>
<td class="table-success">
<input x-model="field.value3" type="text" class="form-control"
name="value3" id="value3">
</td>
</tr>
</template>
</tbody>
</table>
</p>
</template>
</tr>
<tr>
<td colspan="12" class="text-right"><button type="button" class="btn btn-info"
#click="listField()">+ Add Row</button></td>
</tr>
</table>
</div>
</div>
</div>
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script src="https://cdn.jsdelivr.net/gh/alpinejs/alpine#v2.8.2/dist/alpine.min.js" defer></script>
I hope some of you have an idea about this. I'm still new to Spring but till this point I could figured out every problem myself. I'm using also Thymeleaf for the templates.
In the Controller the function for #GetMapping works as intended, but the #PostMapping function doesnt return the template which I specified in the return parameter and so the browser shows the wrong page.
The #PostMapping function gets triggered by the ajax statement in the html script.
I get no errors or warnings on server side as well as on client side. So I have no idea were the spot the mistake.
Hope some of you can spot the mistake. Thanks in advance anyway.
Controller:
#Controller
public class SpringController {
#RequestMapping(value="/tank", method = RequestMethod.GET)
public String loadData(Model model){
Tankstelle[] data = TankerAPI.getTankData(lat, lng, 5, sort, type);
model.addAllAttributes(convertdata("name", data));
model.addAllAttributes(convertdata("dist", data));
model.addAllAttributes(convertdata("price", data));
return "home";
}
#RequestMapping(value = "/tank", method = RequestMethod.POST)
public String getChangedData(#RequestBody JSONObject incomingjson) {
lat = Float.parseFloat(incomingjson.get("lat").toString());
lng = Float.parseFloat(incomingjson.get("lng").toString());
BigDecimal biglat = new BigDecimal(lat).setScale(3, RoundingMode.HALF_UP);
BigDecimal biglng = new BigDecimal(lng).setScale(3, RoundingMode.HALF_UP);
lat = biglat.floatValue();
lng = biglng.floatValue();
sort = "price"; //for seeing a difference
System.out.println(incomingjson.get("lat")+" "+incomingjson.get("lng"));
return "test"; //here it should return the template "test" but it return "home"
}
home.html:
<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org/">
<head>
<meta charset="UTF-8"/>
<title>guenstigertanken.de</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<style>...
</style>
</head>
<body onload="getLocation()">
<div class="ueberschriftbox"></div>
<h2 class="header">guenstigertanken.de</h2>
<h2 class="subheader">Wir finden die günstigsten Spritpreise für Sie</h2>
<div class="backrounding">
<div class="steuerelementebox"></div>
<div class="steuerelementespritsorteueberschrift">
<h2>Spritsorte</h2>
<label class="container1">Super E5
<input type="radio" id="E5" name="radio1" onclick="autoSubmit()">
<span class="checkmark1"></span>
</label>
<label class="container1">Super E10
<input type="radio" id="E10" name="radio1" onclick="autoSubmit()">
<span class="checkmark1"></span>
</label>
<label class="container1">Diesel
<input type="radio" id="Diesel" name="radio1" onclick="autoSubmit()">
<span class="checkmark1"></span>
</label>
</div>
<div class="steuerelementesortierennachueberschrift">
<h2>Sortieren nach</h2>
<label class="container2">Preis aufsteigend
<input type="radio" checked="checked" name="radio2" onclick="autoSubmit()">
<span class="checkmark2"></span>
</label>
<label class="container2">Preis absteigend
<input type="radio" name="radio2" onclick="autoSubmit()">
<span class="checkmark2"></span>
</label>
<label class="container2">Distanz aufsteigend
<input type="radio" name="radio2" onclick="autoSubmit()">
<span class="checkmark2"></span>
</label> <label class="container2">Distanz absteigend
<input type="radio" name="radio2" onclick="autoSubmit()">
<span class="checkmark2"></span>
</label>
<label class="container2" id="alph">Name alphabetisch
<input type="radio" name="radio2" onclick="autoSubmit()">
<span class="checkmark2"></span>
</label>
</div>
<div class="buttonsbox"></div>
<div class="tabellenbox"></div>
<div class="ueberuns">
<p>Über uns</p>
</div>
<div class="agb">
<p>AGB</p>
</div>
<div class="datenschutz">
<p>Datenschutz</p>
</div>
<div class="impressum">
<p>Impressum</p>
</div>
<div class="left show">
<table id="datatable">
<thead>
<tr> <th>Name</th> <th>Entfernung</th> <th>Preis</th> <th>Favorit</th> </tr>
</thead>
<tbody>
<tr> <td th:text="${name1}">AGIP</td> <td th:text="${dist1}">7km</td> <td th:text="${price1}">1,20€</td> <td><input type="checkbox"></td> </tr>
<tr> <td th:text="${name2}">Aral</td> <td th:text="${dist2}">12km</td> <td th:text="${price2}">1,23€</td> <td><input type="checkbox"></td> </tr>
<tr> <td th:text="${name3}">Esso</td> <td th:text="${dist3}">2km</td> <td th:text="${price3}">1,25€</td> <td><input type="checkbox"></td> </tr>
<tr> <td th:text="${name4}">Esso</td> <td th:text="${dist4}">10km</td> <td th:text="${price4}">1,25€</td> <td><input type="checkbox"></td> </tr>
<tr> <td th:text="${name5}">Esso</td> <td th:text="${dist5}">5km</td> <td th:text="${price5}">1,25€</td> <td><input type="checkbox"></td> </tr>
<tr> <td th:text="${name6}">BP</td> <td th:text="${dist6}">13km</td> <td th:text="${price6}">1,35€</td> <td><input type="checkbox"></td> </tr>
<tr> <td th:text="${name7}">BP</td> <td th:text="${dist7}">13km</td> <td th:text="${price7}">1,35€</td> <td><input type="checkbox"></td> </tr>
<tr> <td th:text="${name8}">BP</td> <td th:text="${dist8}">13km</td> <td th:text="${price8}">1,35€</td> <td><input type="checkbox"></td> </tr>
</tbody>
</table>
</div>
</div>
<a class="cssbuttonfavoriten" href="test.html">Favoriten></a>
<a class="cssbuttonleaderboard" href="test.html">Leaderboard></a>
<a class="cssbuttonstatistiken" href="test.html">Statistiken></a>
<script>
function getLocation() {
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(showPosition);
} else {
}
}
function showPosition(position) {
var posdata = '{"lat":"'+position.coords.latitude+'","lng":"'+position.coords.longitude+'","typeselect":"'+type+'"}';
$.ajax({
type: 'post',
url: '/tank',
data: JSON.stringify(posdata),
contentType: "application/json; charset=utf-8",
traditional: true,
success: function(posdata) {
//alert("ajax success: refresh page to sort after price[prob current setting]")
},
error: function(){
alert("ajax error")
}
});
}
</script>
</body>
</html>
When you make any request through ajax you just receive corresponding response in your callback function:
success: function(posdata) {
//alert("ajax success: refresh page to sort after price[prob current setting]")
},
So browser will not show you a new template page. Your page is in "postdata" response
form validation:
Component
public function onContact()
{
$input = post();
//$contact = Contact::create($input);
$rules = [
'name' => 'required|alpha',
'designation' => 'required',
'note' => 'required',
'contactNo' => 'required|numeric|max:10',
'emailIdText' => 'required|email',
'companyName' => 'required'
];
$validator = Validator::make($input, $rules);
if ($validator->fails()) {
throw new ValidationException($validator);
} else {
$contact = new Contact;
$contact->name = $input['name'];
$contact->designation = $input['designation'];
$contact->note = $input['note'];
$contact->inquiry_about = $input['option'];
$contact->email_id = $input['emailIdText'];
$contact->contact_no = $input['contactNo'];
$contact->company_name = $input['companyName'];
$contact->save();
}
}
default.htm
<form id="myform" autocomplete="off" action="{{ 'contactUs'|page }} "
data-request="{{ __SELF__ }}::onContact" data-request-validate data-request-flash
method="post" name="myform" class="contact-form">
<table height="" cellpadding="0" cellspacing="15" class="contactUs">
<tbody>
<tr >
<td class="Fieldname" >Inquiry About : </td>
<td valign="top" >
<select class="comboFieldontact" name="option" id="option" >
<option value="Existing Client" selected>Existing Client</option>
<option value="Prospect">Prospect</option>
<option value="Media">Media</option>
<option value="Investor">Investor</option>
<option value="Association">Association</option>
<option value="Career">Career</option>
</select>
<span class="Error" data-validate-for="inquiry_about" id="optionTextError" ></span>
</td>
</tr>
<tr>
<td valign="top" class="Fieldname">Name :</td>
<td valign="top">
<input type="text" id="name" name="name" class="textFieldContact">
<span class="Error" data-validate-for="name" id="nameTextError" ></span></td>
</tr>
<tr>
<td valign="top" class="Fieldname">Email : </td>
<td valign="top">
<input type="text" id="contactemailIdText" name="emailIdText" class="textFieldContact" >
<span class="Error" data-validate-for="emailIdText" id="contactemailIdTextError" ></span></td>
</tr>
<tr>
<td valign="top" class="Fieldname">Contact No :
</td>
<td valign="top">
<input type="text" maxlength="15" id="contactNo" name="contactNo" class="textFieldContact"
>
<span class="Error" data-validate-for="contactNo" id="contactNoTextError" ></span></td>
</tr>
<tr>
<td valign="top" class="Fieldname">Company Name :</td>
<td valign="top">
<input type="text" id="companyName" name="companyName" class="textFieldContact"
>
<span class="Error" data-validate-for="companyName" id="companyNameTextError" ></span></td>
</tr>
<tr>
<td valign="top" class="Fieldname">Designation :</td>
<td valign="top">
<input type="text" id="designation" name="designation" class="textFieldContact" >
<span class="Error" data-validate-for="designation" id="designationTextError" ></span></td>
</tr>
<tr>
<td class="Fieldname"> Note :</td>
<td valign="top">
<textarea class="textarea" name="note" id="note" style="color: #000;" ></textarea>
<span class="Error" data-validate-for="note" id="fromTextError" ></span></td>
</tr>
<tr>
<td class="Fieldname"></td>
<td valign="top">
<input type="submit" class="contactBtn" value="Submit" >
<input type="reset" id="resetbtn" class="contactBtn" value="Reset">
</td>
</tr>
</tbody>
</table>
</form>
form validation is perfectly fine but i want to reset form along with validation error message how can i do this?
when clicking to reset button input in input fields resets but error msgs are still shown......................................................
what should i do
Here, use this JavaScript code to clear out all of your tags that have an error class.
<script>
function clearErrors() {
var form = document.getElementById('myform').querySelectorAll('span.Error');
for (i=0; i<=form.length; i++) {
form[i].innerText = '';
}
}
</script>
<form id="myform" autocomplete="off" action="{{ 'contactUs'|page }} "
data-request="{{ __SELF__ }}::onContact" data-request-validate data-request-flash
method="post" name="myform" class="contact-form">
<table height="" cellpadding="0" cellspacing="15" class="contactUs">
<tbody>
<tr >
<td class="Fieldname" >Inquiry About : </td>
<td valign="top" >
<select class="comboFieldontact" name="option" id="option" >
<option value="Existing Client" selected>Existing Client</option>
<option value="Prospect">Prospect</option>
<option value="Media">Media</option>
<option value="Investor">Investor</option>
<option value="Association">Association</option>
<option value="Career">Career</option>
</select>
<span class="Error" data-validate-for="inquiry_about" id="optionTextError" ></span>
</td>
</tr>
<tr>
<td valign="top" class="Fieldname">Name :</td>
<td valign="top">
<input type="text" id="name" name="name" class="textFieldContact">
<span class="Error" data-validate-for="name" id="nameTextError" ></span></td>
</tr>
<tr>
<td valign="top" class="Fieldname">Email : </td>
<td valign="top">
<input type="text" id="contactemailIdText" name="emailIdText" class="textFieldContact" >
<span class="Error" data-validate-for="emailIdText" id="contactemailIdTextError" ></span></td>
</tr>
<tr>
<td valign="top" class="Fieldname">Contact No :
</td>
<td valign="top">
<input type="text" maxlength="15" id="contactNo" name="contactNo" class="textFieldContact"
>
<span class="Error" data-validate-for="contactNo" id="contactNoTextError" ></span></td>
</tr>
<tr>
<td valign="top" class="Fieldname">Company Name :</td>
<td valign="top">
<input type="text" id="companyName" name="companyName" class="textFieldContact"
>
<span class="Error" data-validate-for="companyName" id="companyNameTextError" ></span></td>
</tr>
<tr>
<td valign="top" class="Fieldname">Designation :</td>
<td valign="top">
<input type="text" id="designation" name="designation" class="textFieldContact" >
<span class="Error" data-validate-for="designation" id="designationTextError" ></span></td>
</tr>
<tr>
<td class="Fieldname"> Note :</td>
<td valign="top">
<textarea class="textarea" name="note" id="note" style="color: #000;" ></textarea>
<span class="Error" data-validate-for="note" id="fromTextError" ></span></td>
</tr>
<tr>
<td class="Fieldname"></td>
<td valign="top">
<input type="submit" class="contactBtn" value="Submit" >
<button type="reset" onclick="clearErrors()">Reset</button>
</td>
</tr>
</tbody>
</table>
</form>
Did you try to hide the elements with the class 'error' with jQuery by clicking on the reset button ?
Another method is to change the reset button with an empty href. By clicking on the button it will refresh the page and the form I guess.
Am getting the below error:
stale element reference: element is not attached to the page document.
When I select a country from the country dropdown the page gets refreshed since we have used 'onchange' attribute, so when i try to locate rest of the fields in the form its throwing me the stated exception.
Note: I have cross verified the locators before and after the page gets loaded,
there is no change in it as most of the locators used are id's.
Here is my HTML,
<form method="post" action="/eClaims/app" name="mainForm" id="mainForm"
accept-charset="utf-8">
<div style="display: none;">
<input type="hidden" name="formids"
value="ifErrors,hasErrors,If,If_0,statusDate1,If_1,If_3,If_5,If_7,If_2,callDate,If_8,If_4,countryList,If_9,If_6,languageList,If_10,If_11,If_12,customerEmail,If_13,If_14,customerTitle,If_15,customerFirstName,If_16,If_17,customerLastName,If_18,customerCompany,If_19,If_20,If_21,customerFaxPhoneCode,customerFaxNumber,If_22,If_23,customerPhoneCode,customerPhoneNumber,If_24,If_25,qualificationSystem,If_26,If_27,caseId,If_28,If_29,productNumber,If_30,If_31,serialNumber,If_32,If_33,If_34,purchaseDate,If_35,If_36,problemDescription,If_37,qualificationAgent,If_38,If_39,If_40,cancelDoaAuth,If_41,Submit_0,If_42,Submit_1,If_43,Submit_2,If_44,If_45,If_46,If_47,Submit_6,Submit_7,Submit_8">
<input type="hidden" name="component" value="mainForm"> <input
type="hidden" name="page" value="DoaAuthorisationForm">
</div>
<table width="100%">
<tbody>
<tr>
<td colspan="3"></td>
</tr>
<tr class="theme">
<th width="100%" colspan="3">
<h2 class="themeheader">Authorisation to return DOA product</h2>
</th>
</tr>
<tr>
</tr>
<tr>
<td colspan="10"><font color="red">please obtain a valid
proof of purchase from the customer before proceeding with this
form. </font></td>
</tr>
<tr>
<td colspan="3"><hr width="100%"></td>
</tr>
<!-- <tr style="visibility: hidden;">
<td>
<span key="label.status" ></span>
</td>
<td class="inputFormCell">
<span jwcid="statusList" ></span>
</td>
</tr> -->
<tr style="visibility: hidden;">
<td>Status Date</td>
<td class="inputFormCell"><input type="text" name="statusDate1"
value="" title="dd MMM yyyy" id="statusDate1"> <a
href="javascript:calendar_statusDate1.toggle(document.mainForm.statusDate1);"><img
src="/eClaims/app?digest=d1154f8b7bf653ba6128f8cb1f5c8e95&path=%2Forg%2Fapache%2Ftapestry%2Fform%2FDatePickerIcon.png&service=asset"
border="0"></a></td>
</tr>
<tr>
<td>Call Date<font color="red"> *</font>
</td>
<td class="inputFormCell"><input type="text" name="callDate"
value="" title="dd MMM yyyy" id="callDate"> <a
href="javascript:calendar_callDate.toggle(document.mainForm.callDate);"><img
src="/eClaims/app?digest=d1154f8b7bf653ba6128f8cb1f5c8e95&path=%2Forg%2Fapache%2Ftapestry%2Fform%2FDatePickerIcon.png&service=asset"
border="0"></a></td>
</tr>
<tr>
<td>Country<font color="red"> *</font>
</td>
<td class="inputFormCell"><select name="countryList"
id="countryList" style="width: 180px;"
onchange="javascript:onChangeCountry(this);">
<option value="">--please select--</option>
<option value="AF">Afghanistan</option>
<option value="AS">American Samoa</option>
<option value="AU" selected="selected">Australia</option>
<option value="BD">Bangladesh</option>
<option value="WF">Wallis And Futuna</option>
<option value="WS">Samoa</option>
</select></td>
</tr>
<tr>
<td>Language<font color="red"> *</font>
</td>
<td class="inputFormCell"><select name="languageList"
id="languageList" style="width: 180px;">
<option value="" selected="selected">--please select--</option>
<option value="EN">English</option>
</select></td>
</tr>
<tr>
<td>Customer Email<font color="red"> *</font><font color="red">
*</font>
</td>
<td class="inputFormCell"><input type="text"
name="customerEmail" value="" id="customerEmail"></td>
</tr>
<tr>
<td colspan="3">**Fax Number mandatory for 'Save & Fax',
e-Mail mandatory for 'Save & Mail'</td>
</tr>
<tr>
<td class="section_content"><input type="submit"
name="Submit_6" value="[BUTTON.SUBMIT1]" id="submitDummy"
class="primButton" style="visibility: hidden;"></td>
<td class="section_content"><input type="submit"
name="Submit_7" value="[BUTTON.SUBMIT2]" id="submitAuth"
class="primButton" style="visibility: hidden;"></td>
</tr>
<tr>
<td class="section_content"><input type="submit"
name="Submit_8" value="[BUTTON.SUBMIT2]" id="submitMailAuth"
class="primButton" style="visibility: hidden;"></td>
</tr>
</tbody>
</table>
</form>
I have tried the following solutions,
new WebDriverWait(driver, 500)
.ignoring(StaleElementReferenceException.class)
.until(new Predicate<WebDriver>() {
public boolean apply(#Nullable WebDriver driver) {
Select selectLanguage;
try {
selectLanguage = new Select(getWebElement("apj.newdoa.language"));
selectLanguage.selectByValue("EN");
} catch (Exception e) {
// TODO Auto-generated catch block
e.printStackTrace();
}
return true;
}
});
2nd Solution,
Wait<WebDriver> wait = new FluentWait<WebDriver>(driver)
.withTimeout( 120, TimeUnit.SECONDS )
.pollingEvery( 20, TimeUnit.SECONDS )
.ignoring( NoSuchElementException.class, StaleElementReferenceException.class );
// using a customized expected condition
Select foo1 = wait.until(new Function<WebDriver, Select>() {
Select selectLanguage;
public Select apply(WebDriver driver) {
try {
selectLanguage = new Select(getWebElement("apj.newdoa.language"));
logger.info("Value of Option:\t" +selectLanguage.toString());
return selectLanguage = new Select(getWebElement("apj.newdoa.language"));
} catch (Exception e) {
// TODO Auto-generated catch block
e.printStackTrace();
}
return selectLanguage;
}
});
foo1.selectByValue("EN");
Thanks in advance
I'm trying to implement a creditcard payment service (of datatrans.ch) into a wordpress based site. Datatrans offers an Ajax API, which you can take a look at here:
Datatrans Ajax API
Example Code
I copy/pasted the example code and saved it inside a html file on my machine. Running it works properly. In the next step I tried implementing it in wordpress by creating the following function:
function datatrans_payment_ajax($lang, $currency, $amount) {
$merchant_id = 101...; // ... on my machine it is numeric of course ;)
wp_deregister_script('datatrans-ajax');
wp_register_script('datatrans-ajax', 'https://pilot.datatrans.biz/upp/ajax/api.js?merchantId='.$merchant_id, false);
wp_enqueue_script('datatrans-ajax');
?>
<noscript>
<p class="err">
JavaScript is disabled in your browser.<br/>
This showcase requires JavaScript.
</p>
</noscript>
<div>
<h3>Step 1: Ajax UPP.paymentRequest(...)</h3>
<form id="uppform">
<fieldset>
<input type="hidden" name="language" value="<?php echo $lang; ?>"/>
<table cellspacing="0" cellpadding="3" width="550">
<tr>
<td align="left">Merchant Id :</td>
<td style="width: 10px"> </td>
<td align="left"><input type="text" size="20" name="merchantId" value="<?php echo $merchant_id; ?>"/>
</td>
</tr>
<tr>
<td align="left">Amount :</td>
<td> </td>
<td align="left"><input type="text" size="20" name="amount" value="<?php echo $amount; ?>"/> (= 10.00)
</td>
</tr>
<tr>
<td align="left">Currency :</td>
<td> </td>
<td align="left"><input type="text" size="20" name="currency" value="<?php echo $currency; ?>"/>
</td>
</tr>
<tr>
<td colspan="3"> </td>
</tr>
<tr>
<td align="left">Card Number :</td>
<td> </td>
<td align="left"><input type="text" size="24" name="cardNumber" value="4242424242424242"/>
</td>
</tr>
<tr>
<td align="left">Expiry :</td>
<td> </td>
<td align="left">
<input type="text" size="4" name="expm" value="12"/>
<input type="text" size="4" name="expy" value="15"/> (MM/YY)
</td>
</tr>
<tr>
<td align="left">CVV code :</td>
<td> </td>
<td align="left"><input type="text" size="4" name="cvv" value="123"/>
</td>
</tr>
<tr style="display: none;">
<td align="left">Process mode :</td>
<td> </td>
<td align="left">
<input type="radio" name="mode" id="auto" value="auto" checked="checked"/> <label for="auto">Automatic 3D ACS call using API</label>
<br/>
<input type="radio" name="mode" id="manual" value="manual"/> <label for="manual">Manual redirection to 3D ACS</label>
</td>
</tr>
<tr>
<td colspan="3"> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td align="left"><input type="button" class="button"
onclick="callPayment()" value="send"/><span class="buttend"></span>
</td>
</tr>
</table>
</fieldset>
</form>
<div id="frameHolder"></div>
<div id="response" style="width: 400px;"></div>
<div id="step2" style="display: none;">
<h3>Step 2: XML authorizeSplit (server-2-server request)</h3>
<form action="https://pilot.datatrans.biz/upp/jsp/XML_authorizeSplitEx.jsp" method="post" target="_parent">
<fieldset>
<textarea style="width: 400px; height: 150px;" name="xmlRequest"></textarea>
<div>
<input type="submit" class="button" value="send"/><span class="buttend"></span>
</div>
</fieldset>
</form>
</div>
<script type="text/javascript">
var mode;
var params;
function callPayment()
{
mode = $("input[name=mode]:checked").val();
// read form values
params = {
merchantId: $("input[name=merchantId]").val(),
cardNumber: $("input[name=cardNumber]").val(),
expy: $("input[name=expy]").val(),
expm: $("input[name=expm]").val(),
cvv: $("input[name=cvv]").val(),
currency: $("input[name=currency]").val(),
amount: $("input[name=amount]").val()
}
// call paymentRequest, response will be received in responseCallback
if ( mode == "auto" )
{
params.returnUrl = "https://pilot.datatrans.biz/upp/ajax/sample-merchant-return-page.html";
UPP.paymentRequest( params, responseCallback, frameCallback );
}
else
if ( mode == "manual" )
{
UPP.paymentRequest( params, responseCallback );
}
};
function frameCallback()
{
// create iframe and add it to document
var iframe = $("<iframe/>").attr( "id", "paymentIFrame" ).width( 390 ).height( 400 );
$("#frameHolder").append( iframe );
$("form#uppform").hide(); //hide the form
return iframe[0];
};
function responseCallback( response )
{
var responseElm = $("#response");
responseElm
.empty()
.append( "<h4>Ajax response:</h4>")
.append( $("<div/>").text("status: " + response.status) )
.append( $("<div/>").text("uppTransactionId: " + response.uppTransactionId) );
if ( JSON.stringify )
responseElm
.append( $("<div/>").html( "Complete JSON response: " + JSON.stringify( response ).replace( /,/g, ", ") ) )
if ( mode == "auto" )
{
if ( response.status == "success" )
{
// This step will be done server-2-server
$("#step2 textarea").val(
"<<?php?>?xml version=\"1.0\" encoding=\"UTF-8\" ?>\n" +
"<authorizationSplit version=\"1\">\n" +
"<body merchantId=\"" + $("input[name=merchantId]").val() + "\">\n" +
"<transaction refno=\"to_be_filled\">\n" +
" <request>\n" +
" <uppTransactionId>" + response.uppTransactionId + "</uppTransactionId>\n" +
" <amount>" + $("input[name=amount]").val() + "</amount>\n" +
" <currency>" + $("input[name=currency]").val() + "</currency>\n" +
" </request>\n" +
" </transaction>\n" +
"</body>\n" +
"</authorizationSplit>"
);
$("#step2").show();
$("#uppform").hide();
}
if ( response.is3DEnrolled ) // close/remove the iframe
{
$("#paymentIFrame").remove();
}
}
else
if ( mode == "manual" ) // manual mode used, browser has to be redirected to ACSURL
{
if ( response.is3DEnrolled && response.status == "success" )
{
responseElm.append( $("<div/>").html( "Redirecting page to ACS in 3 seconds..." ) );
setTimeout( function() {
params.uppTransactionId = response.uppTransactionId;
params.errorUrl = "https://pilot.datatrans.biz/upp/merchant/errorPage.jsp";
params.returnUrl = "https://pilot.datatrans.biz/upp/merchant/successPage.jsp";
window.parent.location = response.ACSURL + "?" + $.param( params );
}, 3000 );
}
}
};
</script>
</div>
When I run it, I receive an error status code 1003, saying that the uppTransactionId is undefined which should result from the responseCallback. So I guess it has something to do with the usual processing of Ajax calls in wordpress which must go through the admin-ajax.php file in the wp-admin folder!? I am not sure how to cut this datatrans implementation into pieces to make it fit the wordpress Ajax processing. Furthermore I would like to know if you think that my guess is even right regarding what causes the error?
Thanks in advance.
Cheers,
Tim
Ask them to open test account for you, and then you could test with your MerchantID on pilot servers with all features. If you copy/paste code from their examples i think this will not work. Those are just examples of implementation.
You can try to use Merchant-ID:1000011011 but this is shared from all users, so you cannot set landing redirect pages (on success, on error)
Also check what encoding you use:
UTF-8 encoding: /jsp/upStart.jsp
ISO encoding: /jsp/upStartIso.jsp
And most common mistake is price format, if you price is 15.25 you need to send 1525.
Also if you wish to use 3D secure, you need to activate this in datatrans backend.