I have this script that will enable the submit button once one of the four checkboxes is selected. This script works successfully in chrome on a PC but not on an iPad device using safari. What am I doing wrong?
<!---JQuery Iniialization --->
<link rel="stylesheet" href="//code.jquery.com/ui/1.11.2/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.2/jquery-ui.js"></script>
<!--- This script disables submit button until check box is checked.--->
<script>
window.onload = function() {
var checkboxes = $("input[type='checkbox']"),
submitButt = $("input[type='submit']");
checkboxes.click(function() {
submitButt.attr("disabled", !checkboxes.is(":checked"));
});
}
</script>
Here is my form
<form action="signature_action.cfm?ticketID=#url.ticketID#&TT=#url.TT#&techID=#url.techID#&device=ipad" method="post" NAME="SigForm" id="SigForm">
<input name="equipment_dropped_off" type="checkbox" id="check1" value="equipment_dropped_off" />
<label for="check1"><span class="style1">Equipment Dropped Off </span></label>
<span class="style1">
<input name="work" type="checkbox" id="check2" value="work"/>
<label for="check2">Work performed </label>
<input name="payment" id="check3" type="checkbox" value="payment" />
<label for="check3">Payment Recieved </label>
<input name="equipment_picked_up" id="check4" type="checkbox" value="equipment_picked_up" />
<label for="check4">Equipment Picked Up</label>
<input name="submit" type="submit" id="submit" class='btn-style-mobile' value="Click Here To Accept Signature" disabled>
</form>
$(document).ready(function () {
var checkboxes = $("input[type='checkbox']"),
submitButt = $("#submit");
function allChecked() {
var result = true;
checkboxes.each(function() {
if(!$(this).is(":checked")) {
result = false;
}
});
return result;
}
checkboxes.on('change', function(e){
e.preventDefault();
if(!allChecked()) {
submitButt.attr('disabled','disabled');
} else {
submitButt.removeAttr('disabled');
}
});
});
https://jsfiddle.net/hb7f4k2r/
//If you need this functionality for only one check-box.
//Add a specific class/id to that particular check-box.
$(".specific-checkbox").on('change', function () {
if ($(this).is(':checked')) {
submitButt.removeAttr('disabled');
} else {
submitButt.attr('disabled','disabled');
}
});
Related
Let's say I have 5 of these
<input type="button" class="button" value="A">
<input type="button" class="button" value="B">
<input type="button" class="button" value="C">
<input type="button" class="button" value="D">
<input type="button" class="button" value="E">
So basically I want all the buttons with a class of button to change its value from uppercase (A) to lowercase (a) when I click on a specific button like this
<input type="button" id="ChangeBtn">
I tried using JavaScript (which im new to) to do this.
<script>
//The button I want to click to perform the function
Var button = document.gelementById("ChangeBtn");
//The buttons with a class button I want to change its value to lowercase
Var value = document.querySelector(".button").value;
button.onclick = function (){
Value.classList.toggle("change");
}
</script>
Using the class list
.change{
text-transform : lowercase
}
you have to use document.querySelectorAll to access multiple elements. Then Array will be created.
var buttonArray = document.querySelectorAll(".button");
for(btn in buttonArray){
btn.addEventListener("click", function(){
//action that will happen after click
});
}
you can use this code example:
<!DOCTYPE html>
<html>
<body>
<input type="button" onclick="Lowercase();" value="Change Letters" />
<input type="button" class="button" value="A" />
<input type="button" class="button" value="B" />
<input type="button" class="button" value="C" />
<input type="button" class="button" value="D" />
<input type="button" class="button" value="E" />
<script>
function Lowercase() {
const nodeList = document.querySelectorAll(".button");
for (let i = 0; i < nodeList.length; i++) {
nodeList[i].style.textTransform = "lowercase";
}
}
</script>
</body>
</html>
(document).ready(function() {
$("input[type='radio']").click(function() {
var radioVal = $("input[name='price']:checked").val();
});
}
I need to pass radioVal value to another jsp
Please Take the help of Following Example.
page1.jsp
<script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.2.1.min.js"></script>
<script>
$(document).ready(function () {
var radioVal;
$("input[type='radio']").click(function() {
radioVal = $("[name=radio]:checked").val();
alert(radioVal);
$.post("page2.jsp", {"processId": radioVal })
});
});
</script>
<input type="radio" name="radio" value="first"/> 1 <br/>
<input type="radio" name="radio" value="second"/> 2 <br/>
page2.jsp
<%
System.out.println(request.getParameter("processId"));
%>
I need to implement the Mercado Pago custom checkout to receive payments in my site. To do it I need to run the javascript code to get the card_token_id, like described in this link: https://developers.mercadopago.com/documentation/custom-checkout?lang=en_US.
But my website, for business restrictions, need to get this card_token_id running into a Java code, into my class. I need to run this javascript code into my Java class, get the result, e use him in a http POST. I already tried use ScriptEngine, but not works.
See below the complete code that works in html.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Pagar</title>
<script src="https://code.jquery.com/jquery-1.11.0.min.js"></script>
<script type="text/javascript" src="https://secure.mlstatic.com/org-img/checkout/custom/1.0/checkout.js"></script>
</head>
<body>
<h1>Fluxo de pagamento personalizado (avançado)</h1>
<form action="" method="post" id="form-pagar-mp">
<input id="amount" type="hidden" value="100"/>
<p>Número do cartão: <input data-checkout="cardNumber" type="text" value="4509953566233704"/></p>
<p>Código de Segurança: <input data-checkout="securityCode" type="text" value="123"/></p>
<p>Mês de vencimento: <input data-checkout="cardExpirationMonth" type="text" value="12"/></p>
<p>Ano de vencimento: <input data-checkout="cardExpirationYear" type="text" value="2020"/></p>
<p>Titular do cartão: <input data-checkout="cardholderName" type="text" value="Joao"/></p>
<p>Número do documento: <input data-checkout="docNumber" type="text" value="19313777584"/></p>
<input data-checkout="docType" type="text" value="CPF"/>
<p id="issuersField">Bancos: <select id="issuersOptions"></select>
<p>Parcelas: <select id="installmentsOption"></select>
<p><input type="submit" value="Concluir pagamento"></p>
</form>
<script type="text/javascript">
/* Troque com a sua public_key */
Checkout.setPublishableKey("TEST-cba0f2d5-c989-4c97-8e61-847121530093");
$("input[data-checkout='cardNumber']").bind("keyup",function(){
var bin = $(this).val().replace(/ /g, '').replace(/-/g, '').replace(/\./g, '');
if (bin.length == 6){
Checkout.getPaymentMethod(bin,setPaymentMethodInfo);
}
});
// Estabeleça a informação do meio de pagamento obtido
function setPaymentMethodInfo(status, result){
$.each(result, function(p, r){
$.each(r.labels, function(pos, label){
if (label == "recommended_method") {
Checkout.getInstallments(r.id ,parseFloat($("#amount").val()), setInstallmentInfo);
Checkout.getCardIssuers(r.id,showIssuers);
return;
}
});
});
};
// Mostre as parcelas disponíveis no div 'installmentsOption'
function setInstallmentInfo(status, installments){
var html_options = "";
for(i=0; installments && i<installments.length; i++){
html_options += "<option value='"+installments[i].installments+"'>"+installments[i].installments +" de "+installments[i].share_amount+" ("+installments[i].total_amount+")</option>";
};
$("#installmentsOption").html(html_options);
};
function showIssuers(status, issuers){
var i,options="<select data-checkout='cardIssuerId'><option value='-1'>Escolha...</option>";
for(i=0; issuers && i<issuers.length;i++){
options+="<option value='"+issuers[i].id+"'>"+issuers[i].name +" </option>";
}
options+="</select>";
if(issuers.length>0){
$("#issuersOptions").html(options);
}else{
$("#issuersOptions").html("");
$("#issuersField").hide();
}
};
$("#issuersOptions").change(function(){
var bin = $("input[data-checkout='cardNumber']").val().replace(/ /g, '').replace(/-/g, '').replace(/\./g, '').slice(0, 6);
Checkout.getInstallmentsByIssuerId(bin,this.value,parseFloat($("#amount").val()),setInstallmentInfo);
});
$("#form-pagar-mp").submit(function( event ) {
var $form = $(this);
Checkout.createToken($form, mpResponseHandler);
event.preventDefault();
return false;
});
var mpResponseHandler = function(status, response) {
var $form = $('#form-pagar-mp');
if (response.error) {
alert("Ocorreu um erro: "+JSON.stringify(response));
} else {
var card_token_id = response.id;
$form.append($('<input type="text" id="card_token_id" name="card_token_id"/>').val(card_token_id));
alert("card_token_id: "+card_token_id);
$form.get(0).submit();
}
}
</script>
</body>
</html>
I have a jsp file contains a form and I need to validate the form. The jsp page will be opened as pop-up page and hence I choose not to pop-up the validation message again. Here is my code.
<script type="text/javascript">
function validateForm() {
var x=document.forms["myForm"]["name1"].value;
if (x.trim().length<=4){
return false;
}
}
</script>
<form name="myForm" method="POST" action="write.jsp" onsubmit="return validateForm();">
Name: <input type="text" name="name1" value="<%=name%>" size="20"/> <br>
Price: <input type="text" name="price" value="<%=price%>" size="20" /><br>
Due time: <input type="text" name="DueTime" value="<%=dueday%>" size="20" /><br>
Location: <input type="text" name="Location" value="<%=address%>" size="20" /><br>
Photo Url: <input type="text" name="url" value="<%=imagePath%>" size="20" /><br>
Description: <input type="text" name="desc" value="<%=desc%>" size="20" /><br>
<input type="submit" name="submit" onclick="window.close()"/>
<% if(validateForm = false) { %> <a>error message</a> <% } %>
</form>
I am validating for first input "name1" only and the input length is less than 4.
I'd like to display a error message below the submit button. The codes is not working, can anyone help me to fix this?
document.getElementsByName('name1')[0].value;
in place of
document.forms["myForm"]["name1"].value;
use a span below the submit button
html
<span id="error"></span>
script
function validateForm()
{
var x=document.getElementsByName('name1')[0].value;
if (x.trim().length<=4)
{
document.getElementById("error").innerHTML="atleast 4 letters required in name";
return false;
}
}
Use document.getElementsByName("name1") instead of document.forms["myForm"]["name1"].value;
Use as
function validateForm()
{
var x=document.getElementsByName("name1").value;
if (x.trim().length<=4)
{
alert("Message");
return false;
}
}
I need to save event data to an xml file.I need to do this using a java code.i am using html5.
So from the javascript i need to call this java code and need to save event text,date and other details to an xml file.And whenever the data is needed it should be displayed back in the dhtmlx scheduler.How can i do this?
function init() {
scheduler.config.xml_date="%Y-%m-%d %H:%i";
scheduler.config.prevent_cache = true;
scheduler.init('scheduler_here',new Date(2010,0,20),"month");
scheduler.load("data/data.xml");
}
function show() {
alert(scheduler.toXML());
}
function save() {
var form = document.forms[0];
form.action = "./data/xml_writer.php";
form.elements.data.value = scheduler.toXML();
form.submit();
}
function download() {
var form = document.forms[0];
form.action = "./data/xml_download.php";
form.elements.data.value = scheduler.toXML();
form.submit();
}
xml_writer.php
<?php
file_put_contents("./data.xml",$_POST["data"]);
header("Location:./dummy.html");
?>
<?php
if(empty($_POST['data'])) {
echo "why";
exit;
}
xml_download
$filename = "data.xml";
header("Cache-Control: ");
header("Content-type: text/plain");
header('Content-Disposition: attachment; filename="'.$filename.'"');
echo $_POST['data'];
?>
html code
<form action="./php/xml_writer.php" method="post" target="hidden_frame" accept-charset="utf-8">
<input type="hidden" name="data" value="" id="data">
</form>
<iframe src='about:blank' frameborder="0" style="width:0px; height:0px;" id="hidden_frame" name="hidden_frame"></iframe>
<div id="scheduler_here" class="dhx_cal_container" style='width:100%; height:100%;'>
<div class="dhx_cal_navline">
<div class="dhx_cal_prev_button"> </div>
<div class="dhx_cal_next_button"> </div>
<div class="dhx_cal_today_button"></div>
<div class="dhx_cal_date"></div>
<input type="button" name="download" value="Download" onclick="download()" style="right:500px;" />
<input type="button" name="show" value="Show" onclick="show()" style="right:400px;" />
<input type="button" name="save" value="Save" onclick="save()" style="right:300px;" />
<div class="dhx_cal_tab" name="day_tab" style="right:204px;"></div>
<div class="dhx_cal_tab" name="week_tab" style="right:140px;"></div>
<div class="dhx_cal_tab" name="month_tab" style="right:76px;"></div>
</div>
<div class="dhx_cal_header">
</div>
<div class="dhx_cal_data">
</div>
This much code i have.But code for saving to an xml file is in php.I need java code instead of php.