I am trying to build a button for each form; when the users click on it, the specific form with the specific id will show or hide again.
I already tried the below JavaScript code, but it doesn't work.
Is this code wrong or do I miss something? Does someone have another idea?
Thanks in advance.
$(function(){
$('.btn').on('click', function(e){
e.preventDefault();
$(this).next('.form2').show();
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<?php
$result_posts = $conn -> prepare("SELECT * FROM posts WHERE post_topic=:post_topic ORDER BY DATE(post_date) ASC");
$result_posts -> bindParam(':post_topic',$topic_id);
$result_posts -> execute();
while ($row2 = $result_posts ->fetch(PDO::FETCH_ASSOC))
{
?>
<a class="btn" id="<?php echo $row2['post_id']; ?>"><i class="fa fa-commenting" aria-hidden="true"></i>Comment</a>
<form name="form2" class="form2" id=" <?php echo $row2['post_id']; ?>" style="display:none">
<textarea class="commenting" id="commenting" placeholder="Comment here..." cols="30" rows="5"></textarea>
<input type="submit" class="comment_submit2" value="Submit" >
</form>
<?php } ?>
need to use toggle():-
Working example:-
$(function(){
$(document).on('click', '.btn',function(e) {
e.preventDefault();
$(this).next('.form2').toggle();
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a class="btn"><i class="fa fa-commenting" aria-hidden="true"></i>Comment</a>
<form name="form2" class="form2" style="display:none">
<textarea class="commenting" id="commenting" placeholder="Comment here..." cols="30" rows="5"></textarea>
<input type="submit" class="comment_submit2" value="Submit" >
</form>
<br>
<br>
<a class="btn"><i class="fa fa-commenting" aria-hidden="true"></i>Comment</a>
<form name="form2" class="form2" style="display:none">
<textarea class="commenting" id="commenting" placeholder="Comment here..." cols="30" rows="5"></textarea>
<input type="submit" class="comment_submit2" value="Submit" >
</form>
Note:- take care that no id will repeat in any case(in your code it's happening for button id and it's corresponding form id).
I had removed id's from button as well as from forms in my code . (if needed then try to make them different for each one )
Here is an example with jQuery, showing more than one form. The first form content shows by default.
$(function(){
$('.btn').on('click', function(e){
e.preventDefault();
$("form").css("display","none");
var TargetDiv = $(this).attr("data-target");
$("#" + TargetDiv).show();
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button class="btn" data-target="form1">Form 1</button>
<button class="btn" data-target="form2">Form 2</button>
<button class="btn" data-target="form3">Form 3</button>
<form id="form1" style="display: block;">
<label>show form one content by default</label>
</form>
<form id="form2" style="display: none;">
<label>form two content</label>
</form>
<form id="form3" style="display: none;">
<label>form three content</label>
</form>
first of all, you should not repeate the ID in same document. I can notice you will have button and form id same.
So what you can do concat some string with post_id like for button
"btn_" + post_id
and for post something like -
"form_" + post_id
use the toggel so it will inverse the state of form on each click. If hidden it will be visible, and if visible on click it will be hidden.
Check my fiddle.
https://jsfiddle.net/stdeepak22/crrwa7Ls/
Related
Removing div element automatically after appending it on click. It
removes the element after it adds or appends inside form tag.
$('.add').on('click', function() {
$('#testAdd').append('<div class="form-group add-input"> <input type="text" placeholder="add someting..."> <button class="add">+</button> </div>');
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form id="testAdd" action="" method="POST">
<div class="form-group add-input">
<input type="text" placeholder="add someting...">
<button class="add">+</button>
</div>
</form>
After clicking on the + button the <div> element is appended to the form as expected. But then the form is submitted to the server. When the page reloads the html of the page is rendered again and thus the appended <div> element dissappears.
You can change the type of the button like this
<button type="button" class="add">+</button>
and add another button for sumitting the form.
add type="button" to existing button tag and work well and not submitting while clicking on it.
$('.add').on('click', function() {
$('#testAdd').append('<div class="form-group add-input"> <input type="text" placeholder="add someting..."> <button type="button" class="add">+</button> </div>');
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form id="testAdd" action="" method="POST">
<div class="form-group add-input">
<input type="text" placeholder="add someting...">
<button type="button" class="add">+</button>
</div>
</form>
I have made a html form to take inputs from user. My sample code is given below:
<form class="form-main" action="../php/additem.php" method="post" enctype="multipart/form-data">
<input type="hidden" name="what" value="faculty" />
<div class="form-item">
<div class="form-left">
<label><big>Name:</big></label>
</div>
<div class="form-right">
<input class="txtbox" type="text" name="facname" id="fac_name" size="20" required >
</div>
</div>
<div class="form-item">
<div class="form-left">
<label><big>Education:</big></label>
</div>
<div class="form-right">
<input class="txtbox" type="text" name="educn" id="fac_edu" size="20" required >
</div>
</div>
<div id="buttons">
<button class="greenbtn" type="submit" name="btn-upload" value="Add Now" id="add_fac" >Submit</button>
<input class="orangebtn" type="reset" value="Clear" id="clear_fac" />
</div>
</form>
I want to add a feature that, after the submit button being clicked it will be disappeared so that user can't double click on that. Is it possible? How will I do this?
Two easiest ways would either be with javascript and have
<form class="form-main" action="../php/additem.php" method="post" enctype="multipart/form-data" onsubmit="hideSubmit()">
<script>
function hideSubmit(){
document.getElementById("buttons").style.display = "none";
}
</script>
or jquery
<script>
$(function(){
$('.form-main').on('submit', function(){
$('#buttons').hide();
});
});
</script>
after the submit button being clicked it will be disappeared so that user can't double click on that.
You've literally described how to do it.
document.getElementById('test-button').addEventListener('click', function () {
this.remove()
})
<button id="test-button">Click me!</button>
I suggest reading about setting up events.
I want to insert data through AJAX (without reload page). I tried but it is not showing data and also reload page.
I have a file first.php (in which, form is present), a AJAX code and a firstcall.php where query will be execute.
My first.php (html form) is:
<form class="reservation-form mb-0" action="" method="post" autocomplete="off">
<input name="name1" id="name1" class="form-control" type="text" placeholder="Enter Name" required aria-required="true">
<input name="age" id="age" class="form-control" required type="number" placeholder="Enter Age" aria-required="true">
<input type="checkbox" id="checkbox" class="checkbox1" name="namec[]" value="<?php echo $value['id']; ?>" >
<input type="submit" class="pull-right btn btn-warning" value="Submit" id="submit">
</form>
Here data should be display:
<div class="col-md-5">
<div class="panel panel-primary" id="showdata">
</div>
</div>
AJAX is:
<script type="text/javascript">
$(document).ready(function(){
$("#submit").click(function(){
var name1 = $("#name1").val();
var age = $("#age").val();
var chkArray=[];
$('.checkbox1:checked').each( function() {
chkArray.push($(this).val());
} );
var selected;
selected = chkArray.join(',') ;
if(selected.length > 1){
$.ajax( {
url:'firstcall.php',
type:'POST',
data:{name1: name1,age: age,namec: chkArray},
}).done(function(data){
$("#showdata").html(data);
});
}
else{
alert("Please at least one of the checkbox");
}
}
}
</script>
firstcall.php is:
<div class="panel panel-primary" id="showdata">
<?php
foreach($_POST['namec'] as $selected){
echo $selected;
$_SESSION['name1']=$_POST["name1"];
$_SESSION['age']=$_POST["age"];
echo $name1=$_SESSION['name1'];
echo $age=$_SESSION['age'];
$query=mysql_query("insert into patient_details (p_name,p_age,g_number) values ('$name1','$age','$selected')") or die(mysql_error());
}
?>
After $("#submit").click(function(event){ add command
event.preventDefault();
And your page will not be reloaded
The submit button will automatically reload the page on click so the solution is either change the button type to button or add preventDefault to the click event
$("#submit1,#submit2").click(function() {
alert('form submited')
})
$("#submit3").click(function(e) {
e.preventDefault();
alert('form submited')
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
this will reload the page
<input type="submit" class="pull-right btn btn-warning" value="Submit" id="submit1">
</form>
<form>
this will not reload the page
<input type="button" value="Submit" id="submit2">
</form>
<form>
this will not reload the page
<input type="submit" value="Submit" id="submit3">
</form>
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>
<form method="post" enctype="multipart/form-data" action="">
<div class="prp_div">
<div id="img_div1">
<?php
include_once('config.php');
$disp=mysql_query("select * from pop") ;
$out = mysql_fetch_array($disp);
?>
<img src="<?php echo $out[3];?>" style="width:100%; height:100%" />
</div>
<div id="comment_left">
<b>Graphic Text:</b><br/>
<textarea rows="4" cols="50" id="gtext" name="gtext" placeholder="Enter Graphic Text..." class="input" >
<?php echo $out['gtext']; ?>
</textarea><br/>
<b>Caption:</b><br/>
<textarea rows="4" cols="50" id="caption" name="caption" placeholder="Enter Caption..." class="input">
<?php echo $out['caption']; ?>
</textarea>
<input type="file" name="file">
<input type="submit" name="submit" value="save">
I have a form that contains one image tag in a div and two text areas.Once i enter the data and press the submit button i want these fields to be read only..can anyone help me on this task.
use a php variable.
<?php
$isSubmitted = false;
if (!empty($_POST))//checks request
$isSubmitted = true;
?>
<!--on your textarea-->
<textarea rows="4" cols="50" id="caption" name="caption" placeholder="Enter Caption..." class="input"
<?php
echo $isSubmitted== true? 'disabled' : '' //add 'disabled' tag in element if isSubmitted is true
?>
><?php echo $out['caption']; ?></textarea>
sorry if my code is a bit dirty.
EDIT
this alone might work.
<!--on your textarea-->
<textarea rows="4" cols="50" id="caption" name="caption" placeholder="Enter Caption..." class="input"
<?php
echo !empty($out['caption'])? 'disabled' : '' //add 'disabled' tag in element if $out['caption'] is not empty
?>
><?php echo $out['caption']; ?></textarea>
This will the button:
<button onclick = "disableFields()" type="submit" name="submit" value="SAVE"> </button>
This will be your javascript:
function disableFields(){
document.getElementById('gtext').disable;
document.getElementById('caption').disable;
}
Try this....
<input type="button" class="buttonclass" name="submit" value="save">
$(".buttonclass").click(function(){
$(".input").attr('readonly', true);
});
A more user-friendly way :
$(".buttonclass").click(function(){
$(".input").attr('disabled', true);
});
You can do it by following way
<form method="post" enctype="multipart/form-data" action="" onSubmit="makeReadOnly();">
......
......
......
</form>
<script>
function makeReadOnly()
{
$('#gtext').attr('readOnly', true);
$('#caption').attr('readOnly', true);
}
</script>
Use disable function on the elements you wanted.
My suggestion is to give a class name like "toReadOnly" to those particular elements and then getElementsByClassName and disable those elements.
<script>
function onyourRequirement()
{
var elements = document.getElementsByClassName("toReadOnly")
for(element : elements)
element.disable
}
</script>
<form method="post" enctype="multipart/form-data" action="" onSubmit="dsiableAllInputs();">
Call following code on submission of form
function dsiableAllInputs(){
jQuery(":input").prop('disabled', true);
jQuery(":textarea").prop('disabled', true);
}
My Bad, Use this
<form action="demo_form.asp" onsubmit="myFunction()">
<textarea rows="4" cols="50" id="gtext" name="gtext"
placeholder="Enter Graphic Text..." class="input" >
aaass
</textarea><br/>
<textarea rows="4" cols="50" id="caption" name="caption"
placeholder="Enter Caption..." class="input"> </textarea>
<input type="submit" value="Submit">
</form>
<script>
function myFunction() {
alert("The form was submitted");
document.getElementById('gtext').disabled = true;
document.getElementById('caption').disabled = true;
}
</script>