I have a link list generate dynamically in a form in the type of
<%String param = acc.selectByUsername(listamit.get(l)).getUsername();%>
<a href="#<%=acc.selectByUsername(listamit.get(l)).getUsername()%>" onclick="myFunction('<%=param%>')" data-toggle="tab">
it insert in the "a" href and id of the type #username
when i click on each different link i want to call a function that it`s in the head:
<script type="text/javascript">
myFunction(str){
document.getElementById("send_mess_btn").value = str;
}
</script>
and change the value of this button that is a submit of a form to use it as a parameter in a servlet:
<form action="insert_message?chat=yes" method="post">
<input type="text" class="form-control" name="text_send_mess" placeholder="Scrivi il tuo messaggio">
<span class="input-group-btn">
<button class="btn btn-default" id="send_mess_btn" value="" type="submit">Invia</button>
</span>
</form>
This don`t work for me.. so thank you for your help.
Try delegation and do not follow the link
document.getElementById("someContainerId").addEventListener("click", e => {
const tgt = e.target;
if (!tgt.matches('data-toggle')) return; // not a link
e.preventDefault(); // stop the click on the link
document.getElementById('send_mess_btn').value = this.dataset.username;
})
where you have changed the link to
<a href="#<%=acc.selectByUsername(listamit.get(l)).getUsername()%>" data-username="<%=param%>" data-toggle="tab">
change
getElementById("someContainerId")
to a selector that is the nearest static container selector to the links
Related
After I click the button or click the send button here's what happens:
HTML super simplified code:
<!DOCTYPE html>
<html>
<body>
<!-- Page Preloder -->
<!-- Header section -->
<header class="header-section">
<form class="header-search-form">
<input id= "searchBarP" type="text" placeholder="Search on divisima ....">
<button id= "searchIconP"><i class="flaticon-search"></i></button>
<script>
var searchBarP = document.getElementById("searchBarP");
searchBarP.addEventListener("searchP",function(){
alert("Trial");
});
</script>
</form>
</header>
<!-- Header section end -->
</body>
</html>
Here what happens before clicking the button:
After:
searchBarP.addEventListener("searchP",function(){
alert("Trial");
});
The first parameter of addEventListener should be an event. You have searchP which is the element. Try putting click instead.
Your button doesn't have a type and the default type, in this case, is "submit". Since you also didn't specify the form's method, it defaults to GET. This method appends all parameters to the URL after a question mark, that's why you see it after clicking the button.
Solution 1:
If you want both the button and the searchbar to perform the same action, listen for the submit event:
<form class="header-search-form" id="form">
<input id="searchBarP" type="text" placeholder="Search on divisima ....">
<button type="submit" id="searchIconP"><i class="flaticon-search"></i></button>
<script>
const form = document.getElementById("form");
form.addEventListener("submit", function(e) {
e.preventDefault();
alert("Trial");
});
</script>
</form>
Solution 2:
Set the button's type to "button" in order to prevent it from submitting the form.
<form class="header-search-form">
<input id="searchBarP" type="text" placeholder="Search on divisima ....">
<button type="button" id="searchIconP"><i class="flaticon-search"></i></button>
<script>
const searchBarP = document.getElementById("searchBarP");
searchBarP.addEventListener("searchP", function() {
alert("Trial");
});
</script>
</form>
Keep in mind, though, that your searchP listener won't work because there's no event called "searchP". If you want to separate the behaviour of clicking the button and hitting "enter" while typing in the search bar, you can do something like this:
<form class="header-search-form">
<input id="searchBarP" type="text" placeholder="Search on divisima ....">
<button type="submit" id="searchIconP"><i class="flaticon-search"></i></button>
<script>
const searchIconP = document.getElementById("searchIconP");
const searchBarP = document.getElementById("searchBarP");
searchIconP.addEventListener("click", function(e) {
e.preventDefault(); //Remove this if you want to submit the form when you click the button
alert("Button click");
});
searchBarP.addEventListener("keydown", function(e) {
if (e.keyCode === 13){
alert("Search bar enter hit");
e.preventDefault(); //Remove this if you want to submit the form when you hit enter while typing in the search bar
}
});
</script>
</form>
I'm using Jquery in order to add dynamic inputs on my page. I only want to display one input initially, then more can be added by clicking a button.
This works as expected.
I'm then using PHP in order to catch the $_POST values of the inputs and send them to an external script. This also works, however I'm always receiving one extra item in my array, and it's empty.
I think this is because I have a hidden <div> field in my HTML, which is shown when a new input is generated?
My code is below;
HTML
// unnecessary code removed
<div class="after-add-more">
<button class="add-more" type="button" title="Add"></button>
<input name="addmore[]" value="" type="text">
</div>
<div class="copy-fields hide">
<div>
<button class="remove" type="button" title="Remove"></button>
<input type="text" name="addmore[]" value="">
</div>
</div>
JQUERY
$(document).ready(function() {
//here first get the contents of the div with name class copy-fields and add it to after "after-add-more" div class.
$(".add-more").click(function() {
var html = $(".copy-fields").html();
$(".after-add-more").after(html);
});
//here it will remove the current value of the remove button which has been pressed
$("body").on("click", ".remove", function() {
$(this).parents(".control-group").remove();
});
});
PHP
<?php
// unnecessary code removed
$field_values_array = $_POST['addmore'];
?>
Without generating an additional input, I enter 1111111 into the input box and submit. A print_r($_POST) produces;
[addmore] => Array
(
[0] => 1111111
[1] =>
)
Any help is appreciated.
You are probably better just getting the parent of the element that was clicked and adding your markup after that. Here is an example:
$(document).ready(function() {
// this function handles the click event
function addField(parent) {
// find your template, in this case its the first .after-add-more
var html = $(".after-add-more").first().clone();
// reset the value of any inputs
$('input', html).val('');
// wire the click handler for the button
$("button", html).click(function() {
addField($(this).parent());
});
// append it to the parent of the parent, addContainer
html.appendTo(parent.parent());
}
// wire the click handler for the add-more button
$(".add-more").click(function() {
addField($(this).parent());
});
// I don't know what the intention of this code is so I'm leaving it alone
$("body").on("click", ".remove", function() {
$(this).parents(".control-group").remove();
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
// unnecessary code removed
<div id="addContainer">
<div class="after-add-more">
<button class="add-more" type="button" title="Add">Add</button>
<input name="addmore[]" value="" type="text">
</div>
</div>
<div class="copy-fields hide">
<div>
<button class="remove" type="button" title="Remove">Remove</button>
<input type="text" name="addmore[]" value="">
</div>
</div>
In the markup, i have several divs with same id and inside those divs there are paragraphs and buttons. Now when a button is clicked, i want to get the value of a corresponding paragraph tag under the same div as that particular button. How can i do this with jQuery? The markup is as followed:
<div class="col-sm-5 narrow">
<p id="title">Jhon123</p>
<p id="text">This is the status of jhon</p>
<p>posted at 12:30pm GMT6+</p>
<form class="form-inline">
<input type="text" class="form-control" id="reply" placeholder="Type and enter to reply">
<button type="button" class="btn btn-default" id="repost">Re-Tweet</button>
</form>
</div>
When the button with the id #repost is clicked, i want to access the html inside the p tag with the id #text. I tried something like this:
$('#retweet').click(function(e){
e.stopPropagation();
var text = $(this).parent("div").closest('#text');
alert("some retweet button has been pressed which has the text:"+text);
});
You can use the jQuery .closest() function to get the containing <div> and then find the <p> tag you want inside it:
$('#repost').on('click', function () {
var text = $(this).closest('div[class^=col]').find('#text').html();
console.log(text);
});
The div[class^=col] selector means "find the closest div tag with a class starting with col". This allows you to use the other bootstrap column classes as well and have it still work.
$('#repost').click(function(){
console.log($(this).closest('div').find('#text').html());
});
See demo http://jsbin.com/wojupoyosa/1/edit?html,js,console,output
and as comments suggest you IDs should be unique per page so you should use a class or something else instead.
$( "#text" ).text() will give you the value inside P tag. So your code will look something like:
$('#repost').click(function(){
$( "#text" ).text() // save it to wherever you want
});
As a side note it is generally frowned upon to have css id's that are not unique - shared identifiers should use a class.
If you change all your ids into classes as shown in the demo below, then the following code should work fine. Also, you do not need the form element.
$('.repost').click(function(){
var text = $(this).closest('div').find('.text').text();
alert("some retweet button has been pressed which has the text: " + text);
});
$(function() {
$('.repost').click(function(){
var text = $(this).closest('div').find('.text').text();
alert("some retweet button has been pressed which has the text: " + text);
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="col-sm-5 narrow">
<p class="title">Jhon123</p>
<p class="text">This is the status of jhon</p>
<p>posted at 12:30pm GMT6+</p>
<form class="form-inline">
<input type="text" class="form-control reply" placeholder="Type and enter to reply">
<button type="button" class="btn btn-default repost">Re-Tweet</button>
</form>
</div>
<div class="col-sm-5 narrow">
<p class="title">Mary123</p>
<p class="text">This is the status of mary</p>
<p>posted at 12:35pm GMT6+</p>
<form class="form-inline">
<input type="text" class="form-control reply" placeholder="Type and enter to reply">
<button type="button" class="btn btn-default repost">Re-Tweet</button>
</form>
</div>
I am trying to direct to another page on particular event occurrence ...This is my code..but it does not direct to another page but the JavaScript code works...
<form class="list-group-item" method="get" onsubmit="action='Search.jsp'; myFunction('name');return false;" >
<input type="hidden" name="item" value="<%=1%>">
<i class="fa fa-arrow-circle-right fa-fw "></i> <span onsubmit="action='Search.jsp'" onclick="action='Search.jsp';document.getElementById('div1').style.display = 'block';setValue('Subject')" style="margin-left:1%">Subject </span>
<span class=" text-muted small" onclick="document.getElementById('div1').style.display = 'block';setValue('Subject And')" style="margin-left:40%"><em> And <i class="fa fa-angle-down "></i></em>
</span>
</form>
First I tried action="search.jsp" outside onsubmit but that didn't work..I am new to all this and I don't know what to do?
Add an button inside <form> tag
<input type="submit" value="Submit">
Add action attribute in form tag
action="Search.jsp"
Whenever you click Submit button, the page will be redirected to Search.jsp
1) If you simply want to get it redirected to Search.jsp after form submission, remove all crap JS code from your form and add a simple action attribute in form tag.
2) Action attribute behaves as redirect if you submit the form.
3) Writing JS code within HTML Tags is a bad convention. Always write JS code within <script>..</script> blocks or a different JS file and then include it.
<form class="list-group-item" method="get" action="Search.jsp" >
<input type="hidden" name="item" value="<%=1%>">
...
...
</form>
OR
You can ajaxify your code (meaning submit the form through ajax and then redirect).
<form class="list-group-item" method="get" action="Search.jsp" name="search" >
<input type="hidden" name="item" value="<%=1%>">
...
...
</form>
<script>
$(function(ev){
ev.preventDefault();
$("form:[name='search']").on("submit", function(){
var form = $(this);
var data = form.serialize();
var action = form.attr("action");
$.get(action, data)
window.location.replace("http://stackoverflow.com");
});
});
</script>
Simply return true from the myFunction and use <input type="submit"> to submit the form.
Sample code: (read inline comments)
<script type="text/javascript">
function myFunction() {
/* return false in case of validation fail */
alert("Hi");
return true;
}
</script>
<form class="list-group-item" action="Search.jsp" method="get"
onsubmit="return myFunction()">
<!-- other fields -->
<input type="submit" value="Submit" />
</form>
I have multiple textareas in my HTML form followed by an edit link for each. When I click an
edit link, the corresponding textarea should be enabled. My code is as follows:
<script type="text/javascript">
$(document).ready(function() {
$(".edit").click(function(){
$(this).attr("id").removeAttr("disabled");
});
});
</script>
<textarea id="txt1" disabled="true"></textarea>
<a class="edit" id="txt1" >edit</a>
<textarea id="txt2" disabled="true"></textarea>
<a class="edit" id="txt2" >edit</a>
Why is the textarea not being enabled when the corresponding link is clicked?
ids can only be used once in a page. you can't have 2 elements (or more) having the same id.
instead, do this:
<form id="myform">
<!-- group each in divs -->
<div>
<textarea disabled="true"></textarea>
<a class="edit">edit</a>
</div>
<div>
<textarea disabled="true"></textarea>
<a class="edit">edit</a>
</div>
</form>
<script>
$(function(){
$('#myform').on('click','.edit',function(){
$(this) //when edit is clicked
.siblings('textarea') //find it's pair textarea
.prop("disabled", false) //and enable
return false;
});
});
</script>
if you can't use divs, then you can use prev('textarea') instead of siblings('textarea') to get the preceding textarea.
You're re-using ID values - this is a big no-no. If you're going to give these an ID, you need to do something to differentiate the txt1 link from the txt1 textarea. In the code below, I've added a _link suffix to the links.
<textarea id="txt1" disabled="true"></textarea>
<a class="edit" id="txt1_link">edit</a>
<textarea id="txt2" disabled="true"></textarea>
<a class="edit" id="txt2_link">edit</a>
With that small change, we can now modify the disabled property of the textarea:
$(".edit").on("click", function(e){
$( "#" + this.id.replace("_link", "") ).prop("disabled", false);
e.preventDefault();
});
The selector, unfortunately, includes a use of the replace() method. If you remove the ambiguity in ID's between the links and the textareas, you can do away with this.
Demo: http://jsbin.com/unebur/edit#javascript,html
You are trying to remove disabled attribute of anchor tag by $(this). Try this.
<script type="text/javascript">
$(document).ready(function() {
$(".edit").click(function(){
$("#"+$(this).attr("rel")).removeAttr("disabled");
});
});
</script>
<textarea id="txt1" class="txtedit" disabled="true"></textarea><a class="edit" rel="txt1" >edit</a>
<textarea id="txt2" class="txtedit" disabled="true"></textarea><a class="edit" rel="txt2" >edit</a>
Hello please make some changes as mentioned below
<script type="text/javascript">
$(document).ready(function () {
$('.txtAreas').attr('disabled', true);
$("#txt3").click(function () {
$('#txt1').removeAttr("disabled");
});
$("#txt4").click(function () {
$('#txt2').removeAttr("disabled");
});
});
</script>
<textarea id="txt1" class="txtAreas"></textarea>edit
<textarea id="txt2" class="txtAreas"></textarea>edit
Since that's an onclick handler, $(this) is going to point at the element you clicked on, which is the <a> tag. That doesn't have a disabled. You need to move up the dom tree to the parent node, which'd be the textarea, and remove the disabled attribute there:
$(this).parent().removeAttr("disabled");