jquery - hide not working - javascript

By clicking on "empty cart?", I am unsetting the cart array which is working fine. Now I wanted another form to be hidden if this "empty cart" button is clicked.
html:
<form id="f1" action="checkout.php" method="post">
<input name="cust_login" type="submit" value="Continue" />
</form>
<br>
<button>empty cart?</button>
javascript:
<script>
$(document).ready(function(){
$("button").click(function(){
$("#f1").hide();
});
});
</script>
php code for unsetting array:
if (isset($_GET['cmd']) && $_GET['cmd'] == "emptycart") {
unset($_SESSION["cart_array"]);
But hide is not working here.
My question is, can we use button and link together as I have written ? If not, then how to implement it?

Try to use this:
$(document).ready(function(){
var cmd = '<?php echo $_GET["cmd"] ;?>' ;
if(cmd == "emptycart")
{
$("#f1").hide();
}
});

You can try
$(document).ready(function(){
$("button").click(function(){
$("#f1").attr('style','display: block !important')
});
});
or to add a class to style file that do the same and then just add this class when clicking on the button.

<form id="f1"
action="checkout.php"
style="<?= (isset($_SESSION['cart_array']) && count($_SESSION['cart_array']))? "display:none;": ""; ?>"
method="post">
<input name="cust_login" type="submit" value="Continue" />
</form>
<br>
<button>empty cart?</button>
On rendering form - check if cart is empty - render it on hidden state
But in this case your js code had no sense. So you can add
<script>
$(document).ready(function(){
$(document).on('click', "a[href='cart.php?cmd=emptycart']", function(ev){
ev.preventDefault();
$.get($(this).attr('href', function() {
$("#f1").hide();
});
});
});
</script>
Istead of your js code - this one prevent page reload ( which happens when you click on link ) and send request via AJAX

You can try this solution
HTML
<form id="f1" action="checkout.php" method="post">
<input name="cust_login" type="submit" value="Continue" />
</form>
<br>
<button>empty cart?</button>
JS
$(document).ready(function(){
$("button").click(function(){
//$("#f1").hide();
window.location.href = "cart.php?cmd=emptycart";
});
});

Related

Send button value by post request via jquery

My code
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<form>
<button id="test" value="123" name="test" >ok</button>
</form>
<script>
$(document).ready(function () {
$("#test").click(function() {
var combinedData = $("#test").serialize();
$.post(
"element_submit.php",
combinedData
).done(function(data) {
//alert("Successfully submitted!");
$("#result").html(data);
}).fail(function () {
//alert("Error submitting forms!");
})
});
});
</script>
<div id="result" ></div>
The element_submit.php file
<?php
//just to test it should output in the #result div
echo $_POST['test'];
?>
What I am trying to do is submit the with the value="attribute" so the data is serialized and send the post request, it's not like a submit when user insert a value and submit,What I need is to get the value attribute and submit to the php, this code is only for To simplify and illustrate what I am trying to do, because in this page I have the following buttons with ids #follow #unfollow so I need a way to get the button value to make the user follow and unfollow.
you need to serialize the form - not the elements within it .You can also have the triggering button outside the form which will prevent hte form from submitting on the button click.
<form id="testForm">
<input type="hidden" name="testInput" value="123"/>
</form>
<button name="test" id="testButton">submit</button>
...
<script>
$(document).ready(function () {
$("#testButton").click(function() {
var combinedData = $("#testForm").serialize();...
$(document).ready(function () {
$("#testButton").click(function() {
var combinedData = $("#testForm").serialize();
console.log(combinedData);
})
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form id="testForm">
<input type="hidden" value="123" name="testinput"/>
</form>
<button id="testButton">Click</button>
Straight JS might help you out. Include a function that sends the id and get the value of that id. Then just send a regular post of the value without serialize... easier.
<script>
function fetchButtonValue(theId){
var p = document.getElementById(theId).value;
alert (p);
}
</script>
<button id="myFormBtn" value ="woo"
onclick="fetchButtonValue(this.id)">My Button</button>
this works...
You could also put a class on the button let's say class="followBTN" then on a click you could just snag the value by $(this).val() I'd use this method if I had more than one button per page.

jQuery Popup submit not responding

I have created a popup which allows users to edit a value then they can submit it again
Html:
<body>
<input id="submit" type="submit" value="Submit" data-theme="b" data-icon="check" data-rel="popup"/>
<div id="success" data-role="popup">
</div>
<div id="fail" data-role="popup">
<p>Fail</p>
</div>
</body>
jQuery:
$('#submit').click(function(){
var doStuff = true;
if(doStuff === true){
$("#success").empty();
$("#success").append('<p> <input type="text" value="' + doStuff + '" /> <input type="submit" id="popupConfirm" value="Submit" /> </p>');
$("#success").popup("open");
}else{
$("#fail").popup("open");
}
});
$('#popupConfirm').click(function(){
console.log("jhasgd");
});
Currently the click is not working at all that's why I have gibberish in the console.log and also I am not sure how to get the value of the entered input.
So my question is first how can I get the submit click to work and then output what they wrote?
fiddle of the code
$(document).on('click', '#popupConfirm', function(){
console.log("jhasgd");
});
Where are you adding the jQuery code at? If you are adding it all above the HTML, it might be trying to bind the #submit input before it exists in the DOM. Can you try to wrap the code in a document ready so it won't do the click binding before the DOM gets filled up.
$( document ).ready(function()
{
$('#submit').click(function(){
console.log("clicked the button");
});
});
Edit: I just saw the comment where you figured this out above. You didn't really have a code solution provided, so I will just leave this as is.

remove content using ajax

I am new to ajax.
I have index.html
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("button").click(function(){
$.ajax({url:"n.php",success:function(result){
$("#div1").append(result);
}});
});
});
</script>
<div id="div1" style="margin-left: 25;"></div>
<button>Add Author</button>
demo.php
Name:<input type="text" name="txtname">
age:<input type="text" name="txtage">
Above code adds name and age textboxes on index.html page when 'Add Author' button clicks without refreshing page.
Now I want to put another button 'remove author',and want to perform exact opposite action(i.e) remove Name and age textboxes which are added previously.
I don't know how to do this.Is it possible through something like this
$("#div1").(result);
Thanx in advance.
Try this one
<div id="div1" style="margin-left: 25;"></div>
<button id="addAuthor">Add Author</button>
<button id="removeAuthor">Remove Author</button>
<script>
$(document).ready(function(){
$("#addAuthor").click(function(e){
e.preventDefault();
$.ajax({url:"n.php",success:function(result){
$("#div1").html(result);
}});
});
$("#removeAuthor").click(function(e){
e.preventDefault();
var lastNode = $("#div1").children().last();
lastNode.prev().remove();
lastNode.remove();
});
});
</script>
You can do $("#div1").empty(), which will empty the div. Is that what you need?
Try this:
$(document).ready(function(){
$("#remove").on("click",function(){
$("#div1").empty();
});
});
Or use
$("#div1").html(""); instead of $("#div1").empty();

Form submit through AJAX not working

My form will not submit through AJAX to show the return of the PHP page, 'myscript.php'.
This is the HTML I'm using:
<form name="myform" id="myform" method="post" action="#" enctype="multipart/form-data" accept-charset="utf-8" class="taxonomy-drilldown-dropdowns">
<ul>
<li>
<label>Destination:</label>
<select name="city" id="city">
<option class="level-0" value="atlanta">Atlanta</option>
<option class="level-0" value="miami">Miami</option>
</select>
</li>
</ul>
<input class="srch_btn" type="button" value="{{submit-text}}" />
</form>
Here is the javascript earlier in the page:
jQuery(document).ready(function($) {
$('#city').change(function() {
$(this).parents("form").submit();
});
$('#myform').submit(function() {
$.post(
'myscript.php',
$(this).serialize(),
function(data){
$("#mydiv").html(data)
}
);
return false;
});
});
Here is the myscript.php:
<?php
if ($_POST['city'] == "atlanta") {
echo "Div contents 1";
}
if ($_POST['city'] == "miami") {
echo "Div contents 2";
}
?>
The submit button won't respond at this point or make an attempt to access the 'myscript.php' file. Help is appreciated. Thanks in advance!
It is better to use .closest() rather than .parents() in this case.. As parents selector gets all the ancestors that match the selector.
$('#city').change(function() {
$(this).closest("form").submit();
});
And to stop the Default action use e.preventDefault instead of return false
$('#myform').submit(function(e) {
e.preventDefault();
// Your code here
});
In you HTML code, I think you should change input type=button to input type=submit
<input class="srch_btn" type="submit" value="{{submit-text}}" />
Then when you click that button, the form will be submitted to your php page.
Also, about select change event in your jQuery code, I think you can just try following selector, as you have the name/id attribute available in your HTML.
$('#city').change(function() {
$('#myform').submit();
});
One issue with your code is that it does not actually stop the form from being submitted. return false; does not exactly work in jQuery in the way that you think it does. Instead, to stop the default action, you would have to do something like this.
$('#myform').submit(function(event) {
event.preventDefault();
http://api.jquery.com/event.preventDefault/
On top of that, if you don't want the form submit to take place, and you want to replace it with your own AJAX submition, why are you calling form submit at all in this code? Why not just put the AJAX directly into your change code?
dqhendricks was right - why use form submit when you can just access ajax directly? In the below example, I added a div (#responder) below the form to show the output. Try it -- you'll see that it works perfectly.
You really don't need the button, although I left it there, because the data is sent/received the moment the drop-down is changed. You will see your messages appear in the div I included below the form.
REVISED HTML:
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<form name="myform" id="myform" method="post" action="#" enctype="multipart/form-data" accept-charset="utf-8" class="taxonomy-drilldown-dropdowns">
<ul>
<li>
<label>Destination:</label>
<select name="city" id="city">
<option class="level-0" value="atlanta">Atlanta</option>
<option class="level-0" value="miami">Miami</option>
</select>
</li>
</ul>
<input class="srch_btn" type="button" value="Go" />
</form>
<div id="responder"></div>
REVISED JAVASCRIPT/JQUERY:
$(document).ready(function() {
$('#city').change(function() {
//var cty = $('#city').val();
$.ajax({
type: "POST",
url: "myscript.php",
data: "city=" + $(this).val(),
success:function(data){
$('#responder').html(data);
}
});
});
});

Multiple show/hide forms in jquery

Hello I want to have list of files in directory and a form below each of them that allows my users to name them.
That's all clear - I made it in php, but now I want to have this list and hidden forms, and when I'm clicking on one of my file's name, the form shows under the clicked name.
Something like here: http://papermashup.com/demos/jquery-sliding-div/#
Here is the code: http://papermashup.com/simple-jquery-showhide-div/
But it works in a way, that when i click on one of files, all forms shows or all hides. How to fix it to work only for clicked file?
JSFIDDLE EXAMPLE: http://jsfiddle.net/qbNrR/
#UPDATE - SIMILAR PROBLEM
Hey, I've got similar problem with submitting ajax forms - using this tutorial: http://net.tutsplus.com/tutorials/javascript-ajax/submit-a-form-without-page-refresh-using-jquery/
my forms are in div id=#upform and when i'm trying to submit any of them via $.ajax it submits only the first one, here's the code:
<script>
$(function() {
$(".button").click(function() {
var txt = $(".tekst#test").val();
var dataString = 'tekst=' + tekscior;
$.ajax({
type: "POST",
url: "upload/base",
data: dataString,
success: function() {
$('#upform').html("<div id='message'></div>");
$('#message')
.html("<h2>described!</h2>")
.append("<p>thanks!</p>")
.hide()
.fadeIn(1500, function() {
$('#message')
.append("<img id='checkmark' src='http://artivia-dev2/i/check.png' />");
});
}
});
return false;
});
});​
</script>
AND Here are my forms:
// ONLY THIS ONE IS SUBMITTED, EVEN WHEN I'M SUBMITTING THE SECOND ONE!
<div class="slidingDiv">
<div id="upform">
<form name="contact" action="">
<input type="text" value="TESTFORM" class="tekst" id="test">
<input type="submit" name="submit" class="button" id="submit" value="Send" />
<form>
</div>
<div class="slidingDiv">
<div id="upform">
<form name="contact" action="">
<input type="text" value="TESTFORM" class="tekst" id="test">
<input type="submit" name="submit" class="button" id="submit" value="Send" />
<form>
</div>
You can use the next() jQuery method. Then your code will look something like:
$(document).ready(function() {
$(".slidingDiv").hide();
$(".show_hide").show();
$('.show_hide').click(function(e) {
$(e.target).next(".slidingDiv").slideToggle();
});
});​
Try event.currentTarget to get the form that triggered the click event
on click event use jquery like
$(this).show(); // or hide();
as in example
$('.show_hide').click(function(){
//$(".slidingDiv").slideToggle();
$(this).slideToggle();
});

Categories