I want to send the value of one input text by a link to make and insert in other page. I don't wanna use a submit type because these elements are inside a form with submit for another page.
This is my code of devices_insert.php:
<div class="cp_oculta" id="plus1" name="new_fabricant">
<input type="text" id="add_fabricant" name="add_fabricant" placeholder="New Fabricant">
<a href="fabricants_insert.proc.php?link=<?php echo **SOLUTION** ?>" onclick="valor()">
<i class="fa fa-check-square-o fa-2x" aria-hidden="true"></i>
</a>
</div>
I can get the value with a function but I don't know how to send it via url.
<script>
function valor(){
var bla = $('#add_fabricant').val();
}
</script>
And I pretend to send to fabricants.insert.proc.php for make the insert:
<?php
$sql_insert = "INSERT INTO Property (PRP_PRP_TYP_Id, PRP_Value) VALUES ('2', '$_REQUEST[**SOLUTION**]')";
echo($sql_insert);
?>
I have checked before many solutions in stackoverflow but I think are not useful for my case.
I suggest you to use ajax, e.g.:
<script>
$('#add_fabricant').on('blur', function(){
$.post(url, {
'SOLUTION': $(this).val()
}).done(function(rst){
//to do
})
})
</script>
I have solved the problem in a easy way:
<script>
function valor(){
$('#fabricant_link').attr('href', 'fabricants_insert.proc.php?new='+$('#add_fabricant').val());
}
</script>
Now with this script send the variable with the url and I can receive it in the other page (fabricants_insert.proc.php) for insert in the database.
<div class="cp_oculta" id="plus1" name="new_fabricant">
<input type="text" id="add_fabricant" name="add_fabricant" placeholder="New Fabricant">
<a onclick="valor()" id="fabricant_link">
<i class="fa fa-check-square-o fa-2x" aria-hidden="true"></i>
</a>
</div>
I only need to add an id to the link to use the function.
Related
So what I'm trying to achieve is to set the value of a hidden input so that I can send that value to a PHP file where this value will be used to execute a delete query.
The only problem that I'm facing is that it will only select the data-id from the first element, which is not what I want.
Here is the JQuery code, if any other files are required for more info I'll post those aswell.
$('document').ready(function(){
// Makes menu visibility toggable
$('#hamburger_btn').on("click", function() {
$('#sidemenu').toggleClass("show");
})
// Closes menu via separate button
$('#close_btn').on("click", function() {
$('#sidemenu').removeClass("show");
})
// Opens dialogbox
$('.openDialog').on("click", function() {
$('#dialog').addClass("showBox");
$('#overlay').addClass("showOv");
// Sets the input value in dialog
$('#post_id').val($('.openDialog').data("id")); // Here lies the problem
})
// Closes dialogbox
$('#closeDialog').on("click", function() {
$('#dialog').removeClass("showBox");
$('#overlay').removeClass("showOv");
// Sets value to empty and remove attribute value
$('#post_id').val('').removeAttr("value");
})
});
If this question has already been answered elsewhere please let me know aswell, because I couldnt find it.
EDIT:
The HTML
<?php
// Get all posts from DB
$sql = "SELECT * FROM cm_posts";
$stmt = $conn->prepare($sql);
$stmt->execute();
$results = $stmt->get_result();
?>
<section class="s-reset s-posts-overview">
<div id="top"></div>
<div class="posts-overview-content-wrapper">
<h3 class="s-title">Overview</h3>
<div class="post-cards-container">
<?php // Display all posts in a card ?>
<?php while($row = $results->fetch_assoc()):?>
<div class="post-card">
<h4 class="card-title"><?php echo $row["post_title"];?></h4>
<h5 class="card-sub-title"><?php echo $row["post_date"];?></h5>
<div class="card-btn">
<button>View</button>
<button class="btn-small openDialog" id="openDialog" data-id="<?php echo $row["post_id"];?>">
<i class="fas fa-trash"></i>
</button>
</div>
</div>
<?php endwhile ?>
</div>
<div class="scroll-btn">
<a href="#top" class="button">
<i class="fas fa-arrow-up"></i>
</a>
<a href="#bottom" class="button">
<i class="fas fa-arrow-down"></i>
</a>
</div>
</div>
<div id="bottom"></div>
</section>
<div class="overlay" id="overlay"></div>
<div class="dialog" id="dialog">
<div class="dialog-content-wrapper">
<h3>Are you sure you want to delete this item?</h3>
<form action="data/post_db_files/delete-post-db.php" method="post" id="del_post_item">
<input type="hidden" id="post_id" name="post_id">
<input type="submit" value="Delete" id="del_post" class="del_post">
</form>
<button id="closeDialog" class="close-btn">Cancel</button>
</div>
</div>
Picture of the browser with devtools
The image shows where the id is supposed to appear, now if i click the delete button on any of these elements, I always get the value of 1, but if I select "hello 2" which has a post_id of 2 I want that id to appear in the hidden input. I hope this clears somethings up.
You are trying to get the data-id of the clicked item, but you are using $('.openDialog') => This would get all elements wich class is openDialog.
Use this instead:
$('#post_id').val($(this).data("id"));
you can also create on onClick function on this button like this & pass value in that function
<button id="openDialog onClick=openDialogButtonClick("<php echo $row["post_id"];>")>
after this just create function in your Js file or tag
function openDialogButtonClick(id){
//in this id param you will get id then set this id to your hidden field
$("#post_id").val(id);
}
when user click for a second time click do not work, user need to reload the page again to it works
<script>
$(document).ready(function() {
$("#like_post").click(function(e) {
// $("#like_post").on("click", "#like_post", function (e) {
e.preventDefault();
var post_info = $("#post_info :input").serialize();
$.post("backend/ajax/like_post.php", post_info).done(function(data) {
$("#like_post").html(data);
$("#like").load(location.href+" #like>*","");
}).fail(function() {
//alert("Error submitting forms!");
})
})
})
</script>
this is the backend return from db
if user liked it will show
<div id="like_post><a href="" id="l"><input type="hidden" value="unlike" name="like_button" /><i style="color:red" class="fa fa-heart fa-2x" aria-hidden="true" data-toggle="tooltip" data-placement="top" title="'.$lang['you_liked_it'].'"></i>
</a></div>
else it will show
<div id="like_post"> <a href="" id="l"><input type="hidden" value="like" name="like_button" /><i class="fa fa-heart-o fa-2x" aria-hidden="true" data-toggle="tooltip" data-placement="top" title="'.$lang['like_it'].'"></i>
</a></div>
the same validation is on frontend where is will change the hidden input to like, or unlike , my backend check is fine and returning all ok when I check the html response, but the problem is that jquery do not work when user like and unlike without reload the page, it just get the first click and after that user need to reload the page to it works.
I had a similar issue before and it was something with event delegation.
Use the comment line in your code without "#like_post":
$("#like_post").on("click", function (e) {
});
I have a input field, whose value is set by the controller by response.query, within the template I also have two links which perform read and delete calls to the id entered in the query. Here is the template.
<div class="input-group">
<input type="text" th:value="*{response.query}" />
<div class="input-group-btn">
<ul class="dropdown-menu dropdown-menu-right">
<li>Read</li>
<li>Delete</li>
</ul>
</div>
</div>
Unfortunately, the href parameter always gets passed as null. Is there alternate approach to this?
Well let me see if I understand what you want :
For example you put '5' in the text input. Now you want to href to:
http://localhost:8080/read/5
And you have a controller which looks something like this :
#RequestMapping(value="/read/{id}", method=RequestMethod.GET)
public String read(#PathVariable String id, Model model) {
// your logic goes here
return "read";
}
Firstly my suggestion is that you can just change your code from :
<li>Read</li>
to:
<li>Read</li>
You can't get response.query because it's on client side then you call it. In your case you need the javascript, which will be construct your link's URL (othervise you need a form to submit value of the input) :
<div class="input-group">
<input type="text" id="myval" th:value="*{response.query}" />
<div class="input-group-btn">
<ul class="dropdown-menu dropdown-menu-right">
<li>Read</li>
<li>Delete</li>
</ul>
</div>
</div>
<script th:inline="javascript">
/*<![CDATA[*/
function onReadClick() {
var id = $('#myval').value;
/*[+
var myUrl = [[#{/read}]] + id;
+]*/
window.location.href = myUrl;
});
/*]]>*/
</script>
Maybe is my question trivial, but I could not found a answer. Maybe I have been to much hours in front of the monitor :)
I have this situation:
<div class="col-xs-3" style='margin-left: -50px;'>
<a class="btn btn-primary" href="?c=Student&a=list" id="protokol"> List Studens</a>
</div>
This represent a button and with the click event, using MVC, the controller Student is called and the function list executed. But I need to send a parameter to this function that is the value of a HTML component.
<input type='text' id='parm' value=''>
How I can do this using the same structure? I tryed this, but is not correct
<div class="col-xs-3" style='margin-left: -50px;'>
<a class="btn btn-primary" href="?c=Student&a=list&v=<script>$('param').val();</script>" id="protokol"> List Studens</a>
</div>
If you're using jQuery you can attach a click handler to that element which appends the current value of the input. Try this:
$(function() {
$('#protokol').click(function(e) {
e.preventDefault(); // prevent the browser going to the default URL
var url = $(this).attr('href') + '&v=' + $('#param').val();
window.location.assign(url);
});
});
try this instead
<div class="col-xs-3" style='margin-left: -50px;'>
<a id="targetLink" class="btn btn-primary" href="?c=Student&a=list&v=<script></script>" id="protokol"> List Studens</a>
</div>
//document ready
$(function(){
var parameter = $('param').val();
$('#targetLink').attr('href', '?c=Student&a=list&v=' + parameter);
});
Below is my javascript file code. Script.js
$(document).ready(function(){
$("#").click(function(){
alert("Hello!");
});
And here is my php code.
<html>
<head>
Some codes are here
</head>
<body>
Some php codes are here to get value from database
<script src="script.js"></script>
<span><i class="fa fa-thumbs-up"></i> <?php echo $up; ?> </span>
<span><i class="fa fa-thumbs-down"></i> <?php echo $down; ?> </span>
<span><i class="fa fa-star-o"></i> <?php echo $fav; ?> </span>
</body>
</html>
I am calling script file in body due to my design. I can't call it in head section.
Issue is when i click on above link corresponding to # (up,down, fav). It take me to index file. I am testing Hello in alert box. But it is not working.
Any advice what i am missing.
$("#") isn't a valid selector. If you want to capture clicks on anchors it should be $('a');
The # in $("#") means and id should follow. Like if your element's id were "myElement" you would write $("#myElement").
But, since you dont know your ids adead of time, id use the vote class you already have instead like $(".vote").click....
$(document).ready(function() {
$(".vote").click(function(event) {
event.preventDefault();
alert("Hello! My id is: " + this.id);
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<span><i class="fa fa-thumbs-up"></i>Some sontent</span>
<span><i class="fa fa-thumbs-down"></i>Some sontent </span>
<span><i class="fa fa-star-o"></i>Some sontent </span>
In order to get all the anchor tags you should use $("a") instead of $("#"). Use $("#abc") in order to get a tag with id abc. Use $(".def") in order to get tags with class def.
Use attr name at the selector and call directly the function you want... $('a') is so generic
try to use
$("a[name='up']").on('click',function(){
alert("Clicked up!");
});
$("a[name='down']").on('click',function(){
alert("Clicked down!");
});
$("a[name='favorite']").on('click',function(){
alert("Clicked down!");
});