I have a button and on the click of it, I want to have the value of product_id which is its sibling but following code isn't working. It is giving me undefined. Fiddle Html is mostly fixed i can't give any classes
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>prev demo</title>
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
</head>
<body>
<form class="commerce-add-to-cart commerce-cart-add-to-cart-form-3" action="/drupal_commerce/" method="post" id="commerce-cart-add-to-cart-form-3" accept-charset="UTF-8">
<div>
<input type="hidden" name="product_id" value="3">
<input type="hidden" name="form_build_id" value="form-WLgRLYXPHDHNkH-vTSrERT4DGaqutn88pAlta_eJNig">
<input type="hidden" name="form_token" value="UhnJe2M-N6lxx2LdqBvWm6EUbB7gD0Uv3r3OaTc_s1Q">
<input type="hidden" name="form_id" value="commerce_cart_add_to_cart_form_3">
<div id="edit-line-item-fields--2" class="form-wrapper"></div>
<input type="hidden" name="quantity" value="1">
<input class="button01 form-submit" type="submit" id="edit-submit--3" name="op" value="Add to cart">
</div>
</form>
<script>
$('.commerce-add-to-cart input[type="submit"]').on('click', function(event){
console.log($(this).prev('input[name=product_id]').val())
});
</script>
</body>
</html>
Related
i'm new with web programming and i have this problem, I have this little form:
<!DOCTYPE html PUBLIC "-//WAPFORUM//DTD XHTML Mobile 1.0//EN" "http://www.wapforum.org/DTD/xhtml-mobile10.dtd">
<head><meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Orden de Servicio</title>
<link rel="stylesheet" href="css/tabla.css">
<img src="img/logogps.png" alt="GPS" style="float:left; width:64px;height:64px; margin-left:1%;margin-top:1%;">
<script src="scripts/jquery-1.12.4.js"></script>
<script type="text/javascript">
function EnableAnom()
{
if($('#chkanom').is(':checked'))
{
document.getElementById("InputAudio").hidden = false;
document.getElementById("InputText").hidden = false;
document.getElementById("InputImage").hidden = false;
document.getElementById("lblaudio").hidden = false;
document.getElementById("txtdet").hidden = false;
document.getElementById("lblimg").hidden = false;
}
else
{
document.getElementById("InputAudio").hidden = true;
document.getElementById("InputText").hidden = true;
document.getElementById("InputImage").hidden = true;
document.getElementById("lblaudio").hidden = true;
document.getElementById("txtdet").hidden = true;
document.getElementById("lblimg").hidden = true;
}
}
</script>
</head>
<body>
<form action="checkprereg.php" method="POST" enctype="multipart/form-data">
<h2 class="text-center">Check PreInstalación</h2><br /><br />
<input type="hidden" name="id_orden" value=<?php echo $idorden; ?> />
<input type="hidden" name="chkenc" value="0">
<input type="checkbox" name="chkenc" value="1">
<label for="chkenc">Encendido</label><br>
<input type="hidden" name="chkapg" value="0">
<input type="checkbox" name="chkapg" value="1">
<label for="chkapg">Apagado</label><br>
<input type="hidden" name="chkcontig" value="0">
<input type="checkbox" name="chkcontig" value="1">
<label for="chkcontig">Continua / Ignición</label><br>
<input type="hidden" name="chkluces" value="0">
<input type="checkbox" name="chkluces" value="1">
<label for="chkluces">Luces</label><br>
<input type="hidden" name="chkotra" value="0">
<input type="checkbox" name="chkotra" value="1">
<label for="chkotra">Otra</label><br><br>
<label for="videvi">Video de evidencia (arranque):</label>
<input type="file" name="videvi" id="InputFile" accept="video/*"><br><br>
<label for="chkanom">Habilitar registro de anomalías</label>
<input type="checkbox" name="chkanom" id="chkanom" value="1" onclick="EnableAnom()" ><br><br>
<label for="audanom" hidden="true" id="lblaudio">Audio con detalles:</label>
<input type="file" name="audanom" id="InputAudio" accept="audio/*" hidden="true"><br><br>
<label for="textanom" hidden="true" id="txtdet">Detalles:</label>
<textarea name="textanom" id="InputText" rows="5" cols="50" hidden="true"></textarea><br><br>
<label for="imganom" hidden="true" id="lblimg">Imagen con detalles:</label>
<input type="file" name="imganom" id="InputImage" accept="image/*" hidden="true"><br><br>
<button class="button orange" type="submit" value="Submit">Enviar</button>
<button class="button orange" type="reset" value="Reset">Limpiar</button>
</form>
<p>
<a href="menu.php">
<img src="img/home.png" alt="Home" style="float:right; width:64px;height:64px; margin-left:1%;margin-top:1%;">
</a>
</p>
</body>
I did added a litlle script (EnableAnom()) that hides some inputs with a checkbox, but, with this script the form don't do POST, (I receive all vars empty) if I remove the script, the form works ok.
What is wrong in the script? (I did move up script up, down, without success)
Best regards.
<input type="hidden" name="id_orden" value=<?php echo $idorden; ?> />
change to
<input type="hidden" name="id_orden" value="<?php echo $idorden; ?>" />
and test first
I was going through a text book and got caught up with a problem in an example.
Here's my html:
$(function(){
$("#checkAll").click(function(){
$("[name=items]:checkbox").attr("checked", true);
console.log("check all");
});
$("#checkNo").click(function(){
$("[name=items]:checkbox").attr("checked", false);
console.log("check none");
});
$("#checkRev").click(function(){
$("[name=items]:checkbox").each(function(){
this.checked = !(this.checked);
});
});
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!DOCTYPE html>
<html>
<head>
<title>practice</title>
<link rel="stylesheet" type="text/css" href="practice.css">
<script type="text/javascript" src="jquery-3.2.1.js"></script>
</head>
<body>
<form>
<label for="items">你最喜欢的运动是：</label><br>
<input type="checkbox" name="items" value="羽毛球">羽毛球
<input type="checkbox" name="items" value="篮球">篮球
<input type="checkbox" name="items" value="足球">足球
<input type="checkbox" name="items" value="乒乓球">乒乓球
<br>
<input type="button" id="checkAll" value="Check All">
<input type="button" id="checkNo" value="Check None">
<input type="button" id="checkRev" value="Reversed Check">
<input type="button" id="submit" value="Submit">
</form>
<script type="text/javascript" src="practice.js"></script>
</body>
</html>
If you click the "reversed check" button first, the "check all" and "check none" buttons won't work when you click them. Then I changed the codes under the click Event of button "reversed checked" to jQuery functions. Here's the revised js codes:
$(function(){
$("#checkAll").click(function(){
$("[name=items]:checkbox").attr("checked", true);
console.log("check all");
});
$("#checkNo").click(function(){
$("[name=items]:checkbox").attr("checked", false);
console.log("check none");
});
$("#checkRev").click(function(){
$("[name=items]:checkbox").each(function(){
$(this).attr("checked", !($(this).attr("checked"))); //here's the changed part!!!
});
});
})
In this case, if you manually check any checkbox, any of the three buttons won't work on that specific checkbox.
I suspect there's might be a subtle conflict between native HTML-JS attributes and jQuery functions.
I'd really appreciate some of you guys telling me the mechanism that leads to this malfunction. Thanks!
Don't set the attribute, set the property. (Which is what this.checked = ... is doing.) That is, use jQuery's .prop() method not .attr().
$(function(){
$("#checkAll").click(function(){
$("[name=items]:checkbox").prop("checked", true);
console.log("check all");
});
$("#checkNo").click(function(){
$("[name=items]:checkbox").prop("checked", false);
console.log("check none");
});
$("#checkRev").click(function(){
$("[name=items]:checkbox").each(function(){
this.checked = !(this.checked);
});
});
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!DOCTYPE html>
<html>
<head>
<title>practice</title>
<link rel="stylesheet" type="text/css" href="practice.css">
<script type="text/javascript" src="jquery-3.2.1.js"></script>
</head>
<body>
<form>
<label for="items">你最喜欢的运动是：</label><br>
<input type="checkbox" name="items" value="羽毛球">羽毛球
<input type="checkbox" name="items" value="篮球">篮球
<input type="checkbox" name="items" value="足球">足球
<input type="checkbox" name="items" value="乒乓球">乒乓球
<br>
<input type="button" id="checkAll" value="Check All">
<input type="button" id="checkNo" value="Check None">
<input type="button" id="checkRev" value="Reversed Check">
<input type="button" id="submit" value="Submit">
</form>
<script type="text/javascript" src="practice.js"></script>
</body>
</html>
try this...
$(function(){
$("#checkAll").click(function(){
$("input[name=items]").prop("checked", true);
console.log("check all");
});
$("#checkNo").click(function(){
$("input[name=items]").prop("checked", false);
console.log("check none");
});
$("#checkRev").click(function(){
$("input[name=items]").each(function(){
this.checked = !(this.checked);
});
});
})
<!DOCTYPE html>
<html>
<head>
<title>practice</title>
<link rel="stylesheet" type="text/css" href="practice.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
</head>
<body>
<form>
<label for="items">你最喜欢的运动是：</label><br>
<input type="checkbox" name="items" value="羽毛球">羽毛球
<input type="checkbox" name="items" value="篮球">篮球
<input type="checkbox" name="items" value="足球">足球
<input type="checkbox" name="items" value="乒乓球">乒乓球
<br>
<input type="button" id="checkAll" value="Check All">
<input type="button" id="checkNo" value="Check None">
<input type="button" id="checkRev" value="Reversed Check">
<input type="button" id="submit" value="Submit">
</form>
<script type="text/javascript" src="practice.js"></script>
</body>
</html>
In Code B, all checked checkbox items will be posted to server side when I click submit button, the server side will handle all checked checkbox items and recreate web page to return client side.
I hope to do the same thing in Code A, and more I hope the client side can display a Delete prompt information before post when I click the button btnDelete.
How can I write code to post all checked checkbox items to server side using javascript or jquery ?
Code A
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script src="js/jquery1.10.2.min.js?isassets=1" type="text/javascript"></script>
<script type="text/javascript">
function DeleteFile() {
if (confirm("Do you want to delete selected images?")) {
...
}
}
</script>
</head>
<body>
<div id="container">
<form action='' method='post' enctype='multipart/form-data' id="myform">
<input id="a1" name="subBox1" type="checkbox" value="\SD\1.jpg"/>1.jpg <br/>
<input id="a2" name="subBox2" type="checkbox" value="\SD\2.jpg"/>2.jpg <br/>
<input id="a3" name="subBox3" type="checkbox" value="\SD\3.jpg"/>3.jpg <br/>
<input id="a4" name="subBox4" type="checkbox" value="\SD\4.jpg"/>4.jpg <br/>
</form>
<input type="button" name="btnDelete" value="Delete Selected Images" onclick="DeleteFile()" />
</div>
</body>
</html>
Code B
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
</head>
<body>
<div id="container">
<form action='' method='post' enctype='multipart/form-data' id="myform">
<input id="a1" name="subBox1" type="checkbox" value="\SD\1.jpg"/>1.jpg <br/>
<input id="a2" name="subBox2" type="checkbox" value="\SD\2.jpg"/>2.jpg <br/>
<input id="a3" name="subBox3" type="checkbox" value="\SD\3.jpg"/>3.jpg <br/>
<input id="a4" name="subBox4" type="checkbox" value="\SD\4.jpg"/>4.jpg <br/>
<input type='submit' name='submit' value='Delete Selected Images'/>
</form>
</div>
</body>
</html>
You can add an event listener to the submit event and call the event.preventDefault() method when confirm() returns false.
JavaScript
document.querySelector('#myform').addEventListener('submit', event => {
if (!confirm('Do you want to delete selected images?')) {
event.preventDefault();
}
});
HTML
<div id="container">
<form action='' method='post' enctype='multipart/form-data' id="myform">
<input id="a1" name="subBox1" type="checkbox" value="\SD\1.jpg"/>1.jpg <br/>
<input id="a2" name="subBox2" type="checkbox" value="\SD\2.jpg"/>2.jpg <br/>
<input id="a3" name="subBox3" type="checkbox" value="\SD\3.jpg"/>3.jpg <br/>
<input id="a4" name="subBox4" type="checkbox" value="\SD\4.jpg"/>4.jpg <br/>
<input type="submit" name="btnDelete" value="Delete Selected Images" />
</form>
</div>
JS Fiddle demo.
<!DOCTYPE html>
<html>
<head>
<title>Our Company</title>
<link href="site.css" rel="stylesheet">
</head>
<body>
<div id="main">
<h1>E-commerce Website</h1>
<h2>Website Pages:</h2>
<p>Home Page</p>
<p>About Us</p>
<p>Our Products</p>
<p>Buy Now</p>
<footer id="foot01"></footer>
</div>
<script src="script.js"></script>
</body>
<form action="https://www.paypal.com/cgi-bin/webscr" method="post" target="_top">
<input type="hidden" name="cmd" value="_xclick">
<input type="hidden" name="business" value="Email">
<input type="hidden" name="lc" value="GB">
<input type="hidden" name="button_subtype" value="services">
<input type="hidden" name="no_note" value="0">
<input type="hidden" name="currency_code" value="GBP">
<input type="hidden" name="bn" value="PP-BuyNowBF:btn_buynowCC_LG.gif:NonHostedGuest">
<input type="image" src="https://www.paypalobjects.com/en_US/GB/i/btn/btn_buynowCC_LG.gif" border="0" name="submit" alt="PayPal – The safer, easier way to pay online.">
<img alt="" border="0" src="https://www.paypalobjects.com/en_GB/i/scr/pixel.gif" width="1" height="1">
</form>
</html>
It is a very simple HTML page, I am trying to add a code I've got from a paypal website on how to add a paypal button and (They said it should work when I add it to my Page) It is not working though...The form tag is flagging red error ??
Thanks for any Help in advance!
All the HTML content to be displayed needs to be between the
<body>
and
</body>
tags. Just move the Paypal content above the closing </body>.
I need to be able to auto-submit form post data and not have the page redirect like in my current code. Everything I come across on the subject involves jquery and ajax. I just can't get a working version using any of their examples.
Here is my current working page that redirects:
<!DOCTYPE html>
<html>
<head>
<title>Does it work?</title>
</head>`
<body>
<form name="actionBalance" method="post" action="action.php">
<input type="hidden" name="name" value="value2">
<input type="hidden" name="name2" value="value2">
<input type="hidden" name="name3" value="value3">
</form>
</body>
<script>document.actionBalance.submit()</script>
</html>
You need to call jquery post method with your form data like this.
$(document).ready(function() {
$.post( "action.php", $('form[name=actionBalance]').serialize() );
});
$(document).ready(function() {
$.post("action.php", {name: "value", name2: "value2", name3: "value3"});
});
Try this one, it should be working:
<!DOCTYPE html>
<html>
<head>
<title>Does it work?</title>
</head>
<body onload="document.createElement('form').submit.call(document.getElementById('actionBalance'))">
<form id="actionBalance" name="actionBalance" method="POST" action="action.php">
<input type="hidden" name="name1" id="name1" value="value1" />
<input type="hidden" name="name2" id="name2" value="value2" />
<input type="hidden" name="name3" id="name3" value="value3" />
<input type=hidden name="submit" id="submit" value="Continue"/>
</form>
</body>
</html>
Another option is put an iframe, so when page loads, then iframe load your payload (your form with the javascript that you put in your question) and the form will be submit.
I think you are looking for this solution with redirect right after submit:
<!DOCTYPE html>
<html>
<head>
<title>Does it work?</title>
<script type="text/javascript" src="jquery-1.7.2.min.js"></script>
<script>
$(document).ready(function(){
$('form').submit();
});
</script>
</head>
<body>
<form name="actionBalance" method="post" action="action.php">
<input type="hidden" name="name" value="value2">
<input type="hidden" name="name2" value="value2">
<input type="hidden" name="name3" value="value3">
</form>
</body>
</html>
Try to replace your whole script with this and let me know if this is what you wanted :-)
EDIT: If you need only that piece of script then jquery could be an overkill because it is huge library. So here is pure javascript for you :
<!DOCTYPE html>
<html>
<head>
<title>Does it work?</title>
</head>
<body>
<form name="actionBalance" method="post" action="action.php">
<input type="hidden" name="name" value="value2">
<input type="hidden" name="name2" value="value2">
<input type="hidden" name="name3" value="value3">
</form>
<script type="text/javascript">
var form = document.getElementsByName('actionBalance')[0];
form.submit();
</script>
</body>
</html>