Using $(this) with css class selectors in Jquery - javascript

I have below HTML to display and download tracks . What i need is to hide Play button , Download button and the share button when user clicks share button(what i really need is to show social media buttons after hiding the default buttons) .
<form action="index.php" method="post">
<div id="53">
Track Name :- <b>Get Low</b>
<br />By :- DJ perera
<br />
<button class="playback btn btn-primary btn-sm weezy"><i class="fa fa-play"></i> Play</button>
<audio src="../members/memberfiles/16/Get Low.mp3">
Your browser does not support HTML5 audio.
</audio>
<button class="btn btn-sm btn-success weezy" type="submit" name="dwn"><i class="fa fa-download"></i> Download MP3</button>
<button class="sharer btn btn-sm btn-danger weezy" type="button"><span class="fa fa-share-alt"></span> Share</button>
<br />
<input type="hidden" value="Get Low.mp3" name="file_name">
<input type="hidden" value="bWVtYmVyZmlsZXMvMTYvR2V0IExvdy5tcDM=" name="link">
</div>
</form>
<br>
<form action="index.php" method="post">
<div id="52">
Track Name :- <b>Eclips - Hardwell</b>
<br />By :- DJ perera
<br />
<button class="playback btn btn-primary btn-sm weezy"><i class="fa fa-play"></i> Play</button>
<audio src="../members/memberfiles/16/Eclips - Hardwell.mp3">
Your browser does not support HTML5 audio.
</audio>
<button class="btn btn-sm btn-success weezy" type="submit" name="dwn"><i class="fa fa-download"></i> Download MP3</button>
<button class="sharer btn btn-sm btn-danger weezy" type="button"><span class="fa fa-share-alt"></span> Share</button>
<br />
<input type="hidden" value="Eclips - Hardwell.mp3" name="file_name">
<input type="hidden" value="bWVtYmVyZmlsZXMvMTYvRWNsaXBzIC0gSGFyZHdlbGwubXAz" name="link">
</div>
</form>
<br>
<script type="text/javascript">
$(document).ready(function(){
$('.sharer').click(function(){
$('.weezy').slideUp();
});
});
</script>
i already have above js code to hide play , download and share buttons when a user clicks share button . The Problem is since im using css class selectors , when user press Share button it hide all the play buttons , download buttons and share buttons from the webpage . what i need to achieve is that when a user click share button i need to hide only buttons that belong into that form only .
i have already tried doing this . but it won't work
<script type="text/javascript">
$(document).ready(function(){
$('.sharer').click(function(){
$(this).$('.weezy').slideUp();
});
});
</script>
and
<script type="text/javascript">
$(document).ready(function(){
$('.sharer').click(function(){
$(this).find('.weezy').slideUp();
});
});
</script>
and this
<script type="text/javascript">
$(document).ready(function(){
$('.sharer').click(function(){
$('.weezy',this).slideUp();
});
});
</script>
Kindly point out what went wrong since im new to javascript . Thanks

Use .closest() to select the closest parent form element of the clicked element. From there, select the desired element within that form.
Example Here
$('.sharer').on('click', function () {
$(this).closest('form').find('.weezy').slideUp();
});

Related

Disable/enable button using jquery

I have a button that will disable if a certain condition occurs. Its like when the order_status is Accepted then the button for Accept is disabled. Its same in the other buttons when the order_status is Pending then the Send button is disabled. How can I achieve that?
Whats happening right now is I can disable the button for ASD but when I change the #asd to #submitAccept it didn't disable the Accept button, how that's possible?
But for now, help me how can I achieve when the order_status is Accepted the Button for Accept is disabled. I hope you can help me guys with my prob, I don't know what to do. Really appreciate any help from you guys, Thanks!
Heres my code right now.
function viewOrder(order_id, order_id, user_id, order_date, order_time, order_deliveryCharge, order_totalAmount, address, coordinates, driver_number, order_status) {
document.getElementById("t_order_id").setAttribute("value", order_id);
document.getElementsByName("ORDER_ID_MODAL_2")[0].setAttribute("value", order_id);
document.getElementById("t_user_id").setAttribute("value", user_id);
document.getElementById("t_order_date").setAttribute("value", order_date);
document.getElementById("t_order_time").setAttribute("value", order_time);
document.getElementById("t_order_deliveryCharge").setAttribute("value", order_deliveryCharge);
document.getElementById("t_order_totalAmount").setAttribute("value", order_totalAmount);
document.getElementById("t_address").setAttribute("value", address);
document.getElementById("t_coordinates").setAttribute("value", coordinates);
document.getElementById("t_drivers_number").setAttribute("value", driver_number);
document.getElementById("t_order_status").setAttribute("value", order_status);
document.getElementById("ORDER_MODAL_ACCEPT").setAttribute("value", order_id);
document.getElementById("ORDER_MODAL_DELIVER").setAttribute("value", order_id);
document.getElementById("ORDER_MODAL_CANCEL").setAttribute("value", order_id);
$(document).on("click", "#asd", function () { // MY JQUERY
if ($("#t_order_status").val() == "Accepted") {
$("#asd").prop("disabled", true);
}
});
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
<div class="form-group">
<label for="order_status" class="col-sm-2 control-label" style="width:20%;">Order Status</label>
<input type="text" class="form-control" name="order_status" id="t_order_status" style="width:80%;" placeholder="" value="" required="required" readonly>
</div>
<button type="button" input style="background-color:#4CAF50;color:white;border-color:#000000;" name="submitDelivered" id="submitDelivered" class="btn btn-success" data-toggle="modal" data-target="#myDeliverModal" onclick="deliver('<?= $_POST['order_id'] ?>')" > Delivered </button>
<button type="button" input style="background-color:#0000FF;color:white;border-color:#000000;" name="submitAccept" id="submitAccept" class="btn btn-success" data-toggle="modal" data-target="#myAcceptModal" onclick="accept('<?= $_POST['order_id'] ?>')" > Accept </button>
<button type="button" style="background-color:#FFFF00;color:black;border-color:#000000;" class="btn btn-success" data-toggle="modal" data-target="#myDropdown" onclick="send('<?= $_POST['order_id'] ?>')"> Send </button>
<button type="button" input style="background-color:#f44336;color:white;border-color:#000000;" name="submitCancel" id="submitCancel" class="btn btn-success" data-toggle="modal" data-target="#myCancelModal" onclick="cancel('<?= $_POST['order_id'] ?>')">Cancel</button>
<button type="button" name="asd" id="asd" class="btn btn-primary" onclick="asd"> ASD </button>
Use the .disabled method and set it to true.
window.onload = function() {
if(document.getElementById("t_order_status").value == "Accepted") {
document.getElementById("asd").disabled = true;
}
}

HTML - PHP UPDATE Database when button is clicked

I have html page that has several button. I want to update my database column when I click a button.
In index.html
<form action="db.php" method="post">
<button type="submit" id="1_y" class="btn btn-success">1.Lambayı Yeşil Yak</button>
<button type="submit" id="1_k" class="btn btn-danger">1.Lambayı Kırmızı Yak</button></form>
And it looks like that
http://prntscr.com/fa5eba
My db table Webtek
http://prntscr.com/fa5ffl
What I want is to update 'birinci_lamba' to 1 when 1_y is clicked and update 'birinci_lamba' again to 0 when 1_k is clicked.
So, what should be my db.php page ? Or any other advise to do that ?
You use a from-tag, so you should use <input.. instead of <button... You seem to use bootstrap and <input class="btn btn-danger" /> should also work.
Then, you need to give your inputs a name attribute:
<form action="db.php" method="post">
<input type="submit" name="1_y" id="1_y" class="btn btn-success">1.Lambayı Yeşil Yak />
<input type="submit" name="1_k" id="1_k" class="btn btn-danger">1.Lambayı Kırmızı Yak /></form>
Your db.php file could look like that:
<?php
if(isset($_POST['1_k'])){
mysql_query("..."); //your update-query
} elseif(isset($_POST['1_y']){
mysql_query("..."); //your other update-query
}

Two forms from one input

I'm wondering how I can make this work, unfortunately my code doesn't work. I want my form to have two buttons; one goes to the other PHP file, and the other goes to another PHP file.
The first button, SUBMIT, is working fine. But the second button, SEE RANK, is not working, nothing happens after clicking it
<section class="small-section bg-gray-lighter" id="start">
<div class="container relative">
<!-- FORMS -->
<form id="format" class="form align-center" action="Algorithms/article.php" method = "GET">
<form id="rank" class="form align-center" action="Algorithms/Main2.php" method = "GET">
<div class="row">
<div class="col-md-8 align-center col-md-offset-2">
<div class="newsletter-label font-alt">
Type the description of your case below
</div>
<div class="mb-20">
<!-- INPUT TEXT FIELD -->
<input placeholder="Start typing here" name = "caseInput" class="newsletter-field form-control input-md round mb-xs-12" type="text" required/>
</form>
</form>
<!-- BUTTONS -->
<button form="format" type="submit" class="btn btn-mod btn-medium btn-round mb-xs-10">
Submit
</button>
<button form="rank" type="submit" class="btn btn-mod btn-medium btn-round mb-xs-10">
See rank
</button>
<!-- END OF BUTTONS -->
</div>
<div class="form-tip">
<i class="fa fa-info-circle"></i> Ex. "The father killed her daughter."
</div>
<div id="subscribe-result"></div>
</div>
</div>
</div>
</section>
And it looks like this:
First, it doesn't make sense to use <form> inside <form>. There are couple of ways to do this:
Method 1
Use 2 forms instead.
<form method="post" action="php_file_1.php" id="form1">
<!-- Your further HTML Code Goes Here... -->
</form>
<form method="post" action="php_file_2.php" id="form2">
<!-- Your further HTML Code Goes Here... -->
</form>
Method 2
Use a single PHP file. But perform different function on each button click.
<form method="post" action="functions.php" id="form">
<!-- Your further HTML Code Goes Here... -->
<input type="submit" name="action_1" id="button1">
<input type="submit" name="action_2" id="button2">
</form>
Then in your functions.php file:
if(isset($_POST['action_1'])){
action1(); // Your Function Name...
}
elseif(isset($_POST['action_2'])){
action2(); // Your second function
}
You cannot have a form inside a form. (This is why your second buton does not work)
So, your solution will be to have 2 'submit' elements with different names in your form. Then, on form submission, detect and process accordingly depending on which button was pressed.
<!-- BUTTONS -->
<input type="submit" name='submitAction1' class="btn..." value='Submit'>
<input type="submit" name='submitAction2' class="btn..." value='See rank'>
if(isset($_POST['submitAction1'])){
// process form 1
} elseif (isset($_POST['submitAction2'])){
// process form 2
}
From XHTML™ 1.0 The Extensible HyperText Markup Language (Second Edition) - B. Element Prohibitions
form must not contain other form elements
Implementation example with a javascript function which changes the form's action:
<html>
<body>
<script>
function mySubmit(wtf) {
if ('article' == wtf ) {
document.forms['myForm'].action = 'Algorithms/article.php';
} else if ('Main2' == wtf ) {
document.forms['myForm'].action = 'Algorithms/Main2.php';
} else
return false;
document.forms['myForm'].submit();
}
</script>
<form name="myForm">
<input type ="button" value="submit article" class="btn btn-mod btn-medium btn-round mb-xs-10" onClick="mySubmit('article')">
<input type ="button" value="submit Main2" class="btn btn-mod btn-medium btn-round mb-xs-10" onClick="mySubmit('Main2')">
</form>
</body>
</html>

Reset Form / remove error classes from jQuery validate

i have a contact form with jQuery validate method. When the user click on "Reset"-button the hole contact form should be go to the initial state.
This is the button looks like:
<form class="form" method="post" action="" name="contact" id="contact">
<button type="button" id="cancel" class="btn btn-danger btn-lg">Reset</button>
</form>
And the JS-Code in my "$(document).ready-function" is:
$('#cancel').on('click', function () {
$("#contact").validate().resetForm();
$("#contact").removeClass("has-error");
});
Problem: The error Text and the Input-fields will be deleted. But the red border (.has-error) or the green border (.has-success) don't be deleted.
i've created an JSFiddle for you:
http://jsfiddle.net/bBc8c/1/
One Button is clear the input text, the other is delete the error Messages.
I need a Button which reset both (Text, Error Message) and the main problem the red border from the has-* classes.
One Button is declared as type=submit the other is type=button:
<button type="button" id="cancel" class="btn btn-danger btn-lg">Reset 1</button>
<button type="reset" id="cancel2" class="btn btn-danger btn-lg">Reset 2</button>
Your Updated Fiddle
JS Update
$('#cancel').on('click', function () {
$("#contact").validate().resetForm();
$("#contact").find('.has-error').removeClass("has-error");
$("#contact").find('.has-success').removeClass("has-success");
$('#contact').find('.form-control-feedback').remove()
});
For bootstrapvalidator, this might useful when the form being display via bootstrap modal,
$("#editModal").on('hidden.bs.modal', function () {
//Removing the error elements from the from-group
$('.form-group').removeClass('has-error has-feedback');
$('.form-group').find('small.help-block').hide();
$('.form-group').find('i.form-control-feedback').hide();
});
#J Santosh answer worked for Bootstrap 3, great work.
For Bootstrap 4 I have done following changes:
$('#cancel').on('click', function () {
$("#contact").validate().resetForm();
$("#contact").find('.is-invalid').removeClass("is-invalid");
$("#contact").find('.is-valid').removeClass("is-valid");
$("#contact").find('.invalid-feedback').remove();
$("#contact").find('.valid-feedback').remove();
});
Simply have to change the class names. Hope it helps!
I'd reset the form by just using an input[type="reset"] (no jQuery required)
<form class="form" method="post" action="" name="contact" id="contact">
<input type="reset" class="btn btn-danger btn-lg" />
</form>
i've created an JSFiddle for you:
http://jsfiddle.net/bBc8c/1/
One Button is clear the input text, the other is delete the error Messages.
I need a Button which reset both (Text, Error Message) and the main problem the red border from the has-* classes.
One Button is declared as type=submit the other is type=button:
<button type="button" id="cancel" class="btn btn-danger btn-lg">Reset 1</button>
<button type="reset" id="cancel2" class="btn btn-danger btn-lg">Reset 2</button>
Regards

Twitter Bootstrap 2 modal form dialogs

I have the following dialog form :
<div class='modal' id='myModal'>
<div class='modal-header'>
<a class='close' data-dismiss='modal'>×</a>
<h3>Add Tags</h3>
</div>
<div class='modal-body'>
<form accept-charset="UTF-8" action="/tagging" data-remote="true" method="post"><div style="margin:0;padding:0;display:inline"><input name="utf8" type="hidden" value="✓" /><input name="authenticity_token" type="hidden" value="mCNvbvoPFWhD7SoJm9FPDh+BcRvCG3d16P+oOFACPuc=" /></div>
<input id="tags_string" name="tags_string" type="text" value="luca" />
<input id="id" name="id" type="hidden" value="4f1c95fd1d41c80ff200067f" />
</form>
</div>
<div class='modal-footer'>
<div class='btn btn-primary'><input name="commit" type="submit" value="Add tag" /></div>
</div>
</div>
and his JS :
<script>
//<![CDATA[
$(function() {
// wire up the buttons to dismiss the modal when shown
$("#myModal").bind("show", function() {
$("#myModal a.btn").click(function(e) {
// do something based on which button was clicked
// we just log the contents of the link element for demo purposes
console.log("button pressed: "+$(this).html());
// hide the dialog box
$("#myModal").modal('hide');
});
});
// remove the event listeners when the dialog is hidden
$("#myModal").bind("hide", function() {
// remove event listeners on the buttons
$("#myModal a.btn").unbind();
});
// finally, wire up the actual modal functionality and show the dialog
$("#myModal").modal({
"backdrop" : "static",
"keyboard" : true,
"show" : true // this parameter ensures the modal is shown immediately
});
});
//]]>
</script>
When I click x, which is <a class='close' data-dismiss='modal'>×</a>, the form close down leaving me on the current page, while I'd like to go on the hamepage.
Also "Add tag" botton, which is <div class='btn btn-primary'><input name="commit" type="submit" value="Add tag" /></div> don't do nothing, while clicking jaust ENTER on the keyboard do the job and I'd like clicking "Add tag" did the same.
I'm not so skilled on JS and front-end prog, so any help is welcome.
Your submit button is outside of the form tags.
It won't know what form to submit.
Use javascript to connect it to the form.
<div class='modal-body'>
<form id="modal-form" accept-charset="UTF-8" action="/tagging" data-remote="true" method="post">
<input name="something" value="Some value" />
</form>
</div>
<div class='modal-footer'>
<a id="modal-form-submit" class='btn btn-primary' href="#">Submit</a>
</div>
<script>
$('#modal-form-submit').on('click', function(e){
// We don't want this to act as a link so cancel the link action
e.preventDefault();
// Find form and submit it
$('#modal-form').submit();
});
</script>
As for the <a class='close' data-dismiss='modal'>×</a> that is supposed to link to the homepage, why not just remove the data-dismiss='modal' and make it act like a normal link using a standard href='home.html'.
Here is some additional code to point you in the right direction for using AJAX to submit the form:
// Since we want both pressing 'Enter' and clicking the button to work
// We'll subscribe to the submit event, which is triggered by both
$('#modal-form').on('submit', function(){
//Serialize the form and post it to the server
$.post("/yourReceivingPage", $(this).serialize(), function(){
// When this executes, we know the form was submitted
// To give some time for the animation,
// let's add a delay of 200 ms before the redirect
var delay = 200;
setTimeout(function(){
window.location.href = 'successUrl.html';
}, delay);
// Hide the modal
$("#my-modal").modal('hide');
});
// Stop the normal form submission
return false;
});
To get the submit button work put it inside the form.
<div class="modal">
<form id="modal-form" action="/tagging" data-remote="true" method="post">
<div class="modal-header">
<a class="close" data-dismiss="modal">×</a>
<h3>A Modal Form</h3>
</div>
<div class="modal-body">
<input name="something" value="Some value" />
</div>
<div class="modal-footer">
Cancel
<input type="submit" value="Save" class="btn btn-primary" />
</div>
</form>
</div>
However, this adds an unexpected margin at the bottom of the modal. Bootstrap 2.0.2 introduced the modal-form class to fix this or you can fix it yourself with a style definition like:
.modal > form {
margin-bottom: 0;
}
For linking to another page when closing the modal I go along with TheShellfishMeme
As for the × that is supposed to link to the homepage, why not just remove the data-dismiss='modal' and make it act like a normal link using a standard href='home.html'.
With HTML5 you can have something like this:
<div class="modal" id="myModal">
<div class="modal-header">
<a class="close" data-dismiss="modal">×</a>
<h3>Add Tags</h3>
</div>
<div class="modal-body">
<form id="my_form" accept-charset="UTF-8" action="/tagging" data-remote="true" method="post">
<div style="margin:0;padding:0;display:inline">
<input name="utf8" type="hidden" value="✓" />
<input name="authenticity_token" type="hidden" value="mCNvbvoPFWhD7SoJm9FPDh+BcRvCG3d16P+oOFACPuc=" />
</div>
<input id="tags_string" name="tags_string" type="text" value="luca" />
<input id="id" name="id" type="hidden" value="4f1c95fd1d41c80ff200067f" />
</form>
</div>
<div class="modal-footer">
<div class="btn btn-primary"><input name="commit" type="submit" value="Add tag" form="my_form" /></div>
</div>
</div>
This called in HTML5 form-associated element of-course if you need to support all browsers + old ones then you need to go with JavaScript, but you can use JavaScript as a fallback :)
The problem for submitting form lies within bootstrap own JS modal library (bootstrap-modal.js) - basicaly submit event is being prevented due to line #204: ev.preventDefault (why?).
My solution was to add:
if(!$(e.target).parents('form'))
e.preventDefault();
however I don't know what problems it will spawn.
FYI You can do the following (written in jade):
.modal.hide.fadel
form.modal-form
.modal-header
button.close type='button' data-dismiss="modal" x
h3= t 'translation'
.modal-body
p hello
.modal-footer
button.btn data-dismiss="modal" href="#" = t 'close'
a.btn.btn-primary data-dismiss="modal" data-remote="true" href="#"= t 'form.submit'

Categories

Resources