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();
Related
How to trigger the 'change' event if jQuery sets the value from that button? Is it possible?
Code Snippet attached below:
$(".first").change(function() {
alert('something');
})
$(".button").click(function() {
$(".first").val('Button Value');
})
<!DOCTYPE html>
<html>
<head>
<title>Change</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
</head>
<body>
<input type="text" name="" class="first">
<input type="button" name="" class="button" value="Change">
</body>
</html>
The answer is in the question!!! Use .trigger()!
$(".first").change(function(){
alert('something');
})
$(".button").click(function(){
$(".first").val('Button Value').trigger("change");
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" name="" class="first">
<input type="button" name="" class="button" value="Change">
It wont call the change event, may be you can call it manually like this.
$(".first").on('change',function(){
alert($(".first").val());
})
$(".button").click(function(){
$(".first").val('Button Value');
$(".first").change();
})
Update:
Use oninput which is raised when an element value changes.
$(".first").on('input', function(){
alert('something');
})
here is simple example
$(".first").on('input', function(){
alert('something$(".first").on('input', function(){
alert('something');
})');
})
I guess you want to pop an alert on the page when the button is clicked, i.e. when the user submits some data to the form instead of alerting at the exact moment, you wish to pop an alert when the user clicks the button. Cause that is what i understood from your question. Maybe to do that all we can do is:
$(".button").click(function(){
alert("something");
$(".first").css("outline", "1px solid #3366BB";
});
See if this helps any.
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.
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";
});
});
I'd like to create a function that that submits all the formularies with a checkbox checked and hides with their respective div tags
I put the following code as an example
<html>
<script>
//the jquery function to submit all forms
$(function () {
$(".formerasemessage").each(function () {
var par_div = $(this).closest(".demo"); //finding the closest div
$(this).validate({
submitHandler: function (formbeingsubmitted) {
$.post('remove.php', $(formbeingsubmitted).serialize(), function (data) {
$(formbeingsubmitted).hide("slow");
par_div.hide('slow'); //hide the div
});
}
});
});
});
</script>
<body>
<div class="demo">
<form method="post" class="formerasemessage">
<input type="checkbox" id="checkItem"></form>
</div>
<div class="demo">
<form method="post" class="formerasemessage">
<input type="checkbox" id="Checkbox1"></form>
</div>
<div class="demo">
<form method="post" class="formerasemessage">
<input type="checkbox" id="Checkbox2"></form>
</div>
<input type="button" value="Submit all checked">
</body>
</html>
I need to reprogram the function Jquery so that it can perform the desired function.
the visual result would be something like this:
that's my inbox of Outlook, checked my mails and then I click in 'remove' and my emails are hidden and deleted
$(document).ready(function(){
$('button').click(function(){
$(":checked",".formerasemessage").each(function () {
var par_div = $(this).closest(".demo"); //finding the closest div
var form = $(this).closest('form');
form.validate({submitHandler: function () {
$.post('remove.php', form.serialize(), function (data) {
form.hide("slow");
par_div.hide('slow'); //hide the div
});
}
}).submit();
});
});
});
You could call the input using document.getElementById("inputid").value. To hide anything, use a css code :
#inputid {visibility: hidden}
You can also archieve the same effect using javascript.
Archive to execute a js function with for instance : I can be clicked
You'll find several options online (W3schools) such as onclick, onmousein, onchange ...
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.