I have a form with a submit button:
<form method="post" action="" encrypt="multipart/form-data">
<input type="submit" name="delete" value="Delete">
</form>
I'd like to change the button to an a href:
<form method="post" action="" encrypt="multipart/form-data">
Delete
</form>
However, I dont know how to attribute the name="delete" to it
The input type="submit" actually post you form. but if you use anchor instead of "submit" button, then you have to do something else, since it will not post your form.In this case you can use a trick.
<form method="post" action="" encrypt="multipart/form-data">
<input type="submit" style="display:none;" name="delete" value="Delete">
Delete
</form>
This should work.
Just bind to the click event of your link.
Delete
$('#deleteLink').click(function(evt) {
$.ajax({
url: "/delete"
method: "post",
data:
}
}
<form method="post" action="" encrypt="multipart/form-data">
<input type="hidden" name="delete" value="Delete">
Delete
</form>
Just type hidden your input.
do like this:
<form method="post" action="" encrypt="multipart/form-data">
<input type="submit" name="delete" value="Delete" style="display:none;">
Delete
</form>
Jquery:
$('linkDel').click(function(){
$(this).closest('input[type="submit"]').click();
})
Related
Right now I am using java script to submit two forms with a common function, I want to do it with jQuery. How can I pass data in jQuery as simple as JavaScript. I cannot able to send/retrieve data while event call.
Present Code:
function SaveSample(flag,mode){
//Based on flag and mode i am performing some validations
//save sample
}
<form id="ff1" name="ff1" method="post">
<input type="text" id="dummy2" name="dummy">
<input type="button" value="Save" onclick="SaveSample('A','S')">
</form>
<form id="ff2" name="ff2" method="post">
<input type="text" id="dummy2" name="dummy">
<input type="button" value="Save" onclick="SaveSample('A','D')">
</form>
Required Code:
$(document).ready(function(){
$(".sampleSave").on("click",function(e){
e.preventDefault();
//perform validations
//save sample
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form id="ff1" name="ff1" method="post">
<input type="text" id="dummy1" name="dummy">
<input type="button" value="Save" class="sampleSave">
</form>
<form id="ff2" name="ff2" method="post">
<input type="text" id="dummy2" name="dummy">
<input type="button" value="Save" class="sampleSave">
</form>
You can set the data-* attributes on the button and them access them in the click handler using $(this).attr("<attribute name>").
$(document).ready(function() {
$(".sampleSave").on("click", function(e) {
console.log($(this).attr("data-flag"), $(this).attr("data-mode"));
e.preventDefault();
//perform validations
//save sample
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form id="ff1" name="ff1" method="post">
<input type="text" id="dummy1" name="dummy">
<input type="button" value="Save" data-flag="A" data-mode="B" class="sampleSave">
</form>
<form id="ff2" name="ff2" method="post">
<input type="text" id="dummy2" name="dummy">
<input type="button" value="Save" data-flag="C" data-mode="D" class="sampleSave">
</form>
Another option is not to put the parameters on the form element, but instead have different callbacks for each form.
$(document).ready(function(){
$("#ff1 .sampleSave").on("click",function(e){
e.preventDefault();
SaveSample('A','S');
});
$("#ff2 .sampleSave").on("click",function(e){
e.preventDefault();
SaveSample('A','D');
});
});
You can use this code
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$(".sampleSave").on("click",function(e){
var formData = $(this);
$.ajax( {
type: "POST",
url: formData.attr( 'action' ),
data: formData.serialize(),
success: function( response ) {
console.log( response );
}
} );
e.preventDefault();
//perform validations
//save sample
});
});
</head>
<body>
<form id="ff1" name="ff1" method="post" action="yourfile.php">
<input type="text" id="dummy1" name="dummy">
<input type="button" value="Save" class="sampleSave">
</form>
<form id="ff2" name="ff2" method="post" action="yourfile1.php">
<input type="text" id="dummy2" name="dummy">
<input type="button" value="Save" class="sampleSave">
</form>
</body>
</html>
I have a page with many product listed. Each of those products is inside a div and has a form like this:
<form class="cart" method="post" enctype="multipart/form-data">
<input type="hidden" name="add-to-cart" value="">
<button type="submit" class="single_add_to_cart_button button">Add to Cart</button>
</form>
As you can see the value of add-to-cart is missing.
In the same div where the form is, we have an other div like this that contains the ID of the product (for instance IDPRODUCT), that needs to go inside the value:
<div class="vc_gitem-woocommerce vc_gitem-woocommerce-product-id hideidfromcart vc_gitem-align-left">IDPRODUCT</div>
I need a javascript function that on document ready(?) or onmouseover the div searches for the value inside the div, for instance IDPRODUCT, and copy this value into the value of the input name="add-to-cart"
Of course for each of those different divs there should be the proper IDPRODUCT.
Here is one JSFiddle I tried but it doesn't seem to work:JSFiddle
Any idea of how to solve this?
Thank you so much
UPDATE
The full Example again
$('.cart-add-wrapper').each(function(){
var id = $(this).find('.vc_gitem-woocommerce-product-id').text();
$(this).find('input[name=add-to-cart]').val(id);
console.log("id", id);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="cart-add-wrapper">
<form class="cart" method="post" enctype="multipart/form-data">
<input type="hidden" name="add-to-cart" value="">
<button type="submit" class="single_add_to_cart_button button">Add to Cart</button>
</form>
<div class="vc_gitem-woocommerce vc_gitem-woocommerce-product-id hideidfromcart vc_gitem-align-left">4321</div>
</div>
<div class="cart-add-wrapper">
<form class="cart" method="post" enctype="multipart/form-data">
<input type="hidden" name="add-to-cart" value="">
<button type="submit" class="single_add_to_cart_button button">Add to Cart</button>
</form>
<div class="vc_gitem-woocommerce vc_gitem-woocommerce-product-id hideidfromcart vc_gitem-align-left">1234</div>
</div>
How to pass variable values into url. Here is my code
<?php
if(isset($_POST['submit'])){
echo $v=$_POST['n'];
} ?>
<form method="post" action="/user/<?php echo $v; ?>">
<input type="text" name="n">
<input type="submit" name="submit" value="Submit">
After giving input value and click on submit shows in url:
if input value is raj after click on submit in url i want to display
/user/raj
The requirement can be achieved by using javascript.
<form id="myForm" method="post" action="" onsubmit="return false">
<input type="text" name="n">
<input type="submit" name="submit" value="Submit">
</form>
using jquery
$("#myForm").on("submit",function(){
var val=$("input[name='n']").val();
$(this).attr("action","<?php echo htmlspecialchars($_SERVER["PHP_SELF"]);?>/user/"+val);
$(this).submit();
})
Use method="get" in your form tag.
Working on a really simple form for a district site. I have a really simple form in PHP.
<form method="post">
<fieldset>
<legend>Enter Age and Weight</legend>
<label>Age:</label>
<input type="text" name="age" value="<?php echo #$_POST['age'] ?>">
<label>weight:</label>
<input type="text" name="weight">
<div>
<button class="btn" type="submit" name="action" value="enter">Enter</button>
</div>
</fieldset>
</form>
What I am trying to do is when the user presses the enter button, I want to alert the user of what they have entered.
This is what I have so far in my HTML.
<body onload="document.forms[0].submit()">
<form action="/index.php" onsubmit="" method="POST">
<script>
alert(document.getElementsByName("age").value);
</script>
</form>
</body>
However, I keep seeing "undefined". I am assuming that is happening because on page load my script is being run instead of when the user presses the submit button. Kind of confused how to just do a simple alert. Appreciate any help.
You must insert your code in a function that you must attach to a event handler like onsubmit, something like this:
HTML:
<form method="post" onsubmit="showData();">
JAVASCRIPT:
function showData() {
alert(document.getElementsByName("age")[0].value);
}
I've inserted [0] in your Javascript code because document.getElementsByName returns you an Array of elements, in your case, this Array, obviously contains only one value that is retrievable on the index 0 (first index of any array).
<form method="post" id="myform">
<fieldset>
<legend>Enter Age and Weight</legend>
<label>Age:</label>
<input type="text" name="age" value="<?php echo #$_POST['age'] ?>" id="age">
<label>weight:</label>
<input type="text" name="weight">
<div>
<button class="btn" type="button" name="action" value="enter" onclick="alert(document.getElementById('age').value);document.getElementById('myform').submit()">Enter</button>
</div>
</fieldset>
</form>
Is this what you want?
This was working but has suddenly stopped for some reason. I can't see what's wrong. Can someone tell me what I am doing wrong here? I'm using an onclick event in a span tag then calling this function.
Firefox reports: Error: document.forms[0].submit is not a function
function submitlogin() {
document.forms[0].submit()
}
<form method="post" id="submit" action="something.asp">
<span id="button" onclick="submitlogin()"></span>
</form>
This is what the form looks like
<form method="post" id="myform" action="">
<div>
<input type="text" id="name" name="name" />
</div>
<div id="btn-container">
<span id="button" onclick="submitlogin();"></span>
</div>
</form>
document.forms[0] is searching for a <form> in your code, which you don't have. A quick fix could be
<script type="text/javascript">
function submitlogin() {
document.forms["myform"].submit();
}
</script>
<form method="post" id="myform" action="something.asp">
<span id="button" onclick="submitlogin()">hello</span>
</form>