I am trying to remove a link(I want to make this as button please help in that too) with id=regbutton as soon as my index.jsp page is loaded as a response on clicking login button on regdata.jsp page
regdata.jsp
<script>
$(document).ready(function(){
$("button").click(function(){
$("#mainDiv").load("index.jsp");
$('#regButton').remove();
});
});
</script>
</head>
<body>
<div id="mainDiv" class="units-row">
<h2>Thanks For registering!</h2>
<button id="regLogin">Login Now</button>
</div>
index.jsp
<body>
<center>
<s:actionerror />
<h1 id="login_title"></h1>
<form action="checkLogin.action" method="post">
<p>
<input type="text" id="username" name="username"
placeholder="" >
</p>
<p>
<input type="password" name="password"
placeholder="" id="password">
</p>
<label> <input type="checkbox" name="remember_me" id="remember"><label for="remember" id="rememberlbl"></label></label>
</p>
<input type="submit" class="btn-log" method="execute"
key="label_login">
</form>
Register
</center>
</body>
The jQuery's load function takes a second or third parameter - a callback function to execute when loading is done. So if you want the button to disappear only when the load completes you should move your code for it into that handler:
$(document).ready(function(){
$("button").click(function(){
$("#mainDiv").load("index.jsp", function() {
$('#regButton').remove();
});
});
});
I can see a simple solution
#regButton
{
display:none;
}
If this ain't sufficient i am working on a jquery solution as well
Related
I have an invisible search form that only appears when I click a button.
Is it somehow possible that when you click the button, the cursor is directly available in the search field? The "autofocus" attribute doesn't work here. Is there maybe a script solution?
Search form:
<div id="searchform">
<form action="bla" method="post">
... <input type="text" name="item" id="search" placeholder="bla" autofocus /> ...
</form>
</div>
Button:
<a id="button"></a>
Script:
<script>
$(document).ready(function(){
$('#searchform').hide();
$("#button").click(function(){
$("#searchform").slideToggle("fast");
});
});
</script>
To do what you require call focus() on the input as you make it visible:
$(document).ready(function() {
$("#button").click(function() {
$("#searchform").slideToggle("fast");
$('#search').focus();
});
});
#searchform { display: none; }
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="searchform">
<form action="bla" method="post">
<input type="text" name="item" id="search" placeholder="bla" autofocus /> ...
</form>
</div>
<a id="button">Toggle form</a>
Note that I used CSS to hide the #searchForm element on load instead of JS, as this avoids the element being visible for a fraction of a second before the DOM is ready (aka a FOUC).
I have a one word <p>, and I'm looking to change the content of that paragraph to the value of a input box. It's really simple but I'm new to JavaScript and jQuery.
This is the paragraph to change
<p class="editor-example" id="screen-name">Name</p>
and this is the form and the button I'm using to get and apply the change
<form id="info">
<input id="nameID" name="name" type="text" size="20">
</form>
<button id="apply" type="button">Apply</button>
Making the paragraph automatically change when the input box changes instead of a button would be handy if you want to take your time.
Thanks!!
Put the button inside the form and add an event listener to it. Then grab the value from the input and use innerHTML to replace the content inside p tag
document.getElementById('apply').addEventListener('click', function() {
document.getElementById('screen-name').innerHTML = document.getElementById('nameID').value.trim()
})
<p class="editor-example" id="screen-name">Name</p>
<form id="info">
<input id="nameID" name="name" type="text" size="20">
<button id="apply" type="button">Apply</button>
</form>
You need to write keypress event for the text box
$("#text").keypress(function() {
$("#p").html($("#text").val());
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p id="p">p</p>
Please change the value of imput to change p: <input id="text"></input>
You can do like this:
$(document).ready(function(){
$("#nameID").keyup(function(){
var name = $("#nameID").val();
$("#screen-name").text(name);
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<p class="editor-example" id="screen-name">Name</p>
<form id="info">
<input id="nameID" name="name" type="text" size="20">
</form>
<button id="apply" type="button">Apply</button>
As you said:
Making the paragraph automatically change when the input box changes instead of a button would be handy if you want to take your time. Thanks!!
In Jquery:
$(document).ready(function(){
$('#nameID').keyup(function(){
$('#screen-name').text($(this).val());
});
});
In html:
<p class="editor-example" id="screen-name">Name</p>
<form id="info">
<input id="nameID" name="name" type="text" size="20">
</form>
<button id="apply" type="button">Apply</button>
$("#apply").click(function() {
$("#paragraph").text($("#nameID").val());
});
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<p id="paragraph">This Text changes from the form below</p>
<form>
<input id="nameID" type="text" >
<button id="apply" type="button">Apply</button>
</form>
I am pretty new to jquery, and was trying to create a search button. I wanted to append some code to a div on button click, but the changes apply for a second, and goes off (Flashes as if the page is loaded again)
My code as below:
HTML:
<body>
<!-- HTML for SEARCH BAR -->
<div id="tfheader">
<form id="tfnewsearch" method="get" action="">
<input type="text" class="tftextinput" name="q" size="21" maxlength="120">
<input type="submit" name="search" id="search" value="search" class="tfbutton">
</form>
<div class="tfclear"></div>
</div>
<div id="container" class="cntnr">
<p>My text here</p>
</div>
</body>
Jquery:
jQuery(document).ready(function() {
$("#search").click(function () {
console.log('your message');
$("#container").append('<div><p>Results displayed here</p></div>');
});
});
Both the console log message and div append get applied for a second and then immediately goes off
The page is, in fact, reloading because you are submitting the form by clicking on it (note: this is quite evident since your console clears when you click. Console output typically only clears on reload). If you don't want to submit the form, you could replace it with a regular button:
<input type="button" name="search" id="search" value="search" class="tfbutton">
or prevent the default event from triggering:
$("#search").click(function (e) {
e.preventDefault();
console.log('your message');
$("#container").append('<div><p>Results displayed here</p></div>');
});
Demo:
jQuery(document).ready(function() {
$("#search").click(function(e) {
e.preventDefault();
console.log('your message');
$("#container").append('<div><p>Results displayed here</p></div>');
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>
<!-- HTML for SEARCH BAR -->
<div id="tfheader">
<form id="tfnewsearch" method="get" action="">
<input type="text" class="tftextinput" name="q" size="21" maxlength="120">
<input type="submit" name="search" id="search" value="search" class="tfbutton">
</form>
<div class="tfclear"></div>
</div>
<div id="container" class="cntnr">
<p>My text here</p>
</div>
</body>
Change input type from submit to button.
<input type="button" name="search" id="search" value="search" class="tfbutton">
can anybody tell me how to make preview before submit in one form using javascript in php
i have an example like
<script type="text/javascript">
$(document).ready(function() {
`$('#db').hide();
});
function preview()
{
var add=document.getElementById('Address_Street').value;
if(add.trim()!="")
{
$('#db').show();
document.getElementById('p_Address_Street').value=add;
}
}
<body>
<form name="approval" id="approval" method="post" enctype="multipart/form-data" action="">
<input type="text" name="Address_Street" id="Address_Street" size="36" value="">
<input type="submit" value="Submit" >`
<input type="button" value="Preview" onclick="preview()">
</form>
<div id="db">
Address Street: <input type="text" name="p_Address_Street" id="p_Address_Street" size="36" value="" readonly="readonly">
</div>
</body>
can everybody tell me the right one please :(
Add id to your Preview button
<input id="Preview" type="button" value="Preview">
Then try this Js
$(document).ready(function() {
$('#db').hide();
$('#Preview').on('click', function(){
var add=$("#Address_Street").val();
if(add.trim()!="")
{
$('#db').show();
$('#p_Address_Street').val(add);
}
});
});
You have an error on this line
`$('#db').hide(); try to remove the ` char
And then, if you're using JQuery, stick to it.
var add = $('#Address_Street').val();
To debug, remove the if statement. Maybe the error is there.
The example:
http://jsfiddle.net/fa295/
I have my HTML structure in the following format
<div>
<form class="form-inline" style="padding-top:10px" action="javascript:function()"> <!-- a search bar-->
<input id="id" type="text" " placeholder="Something">
</form>
<button onClick="somefunction()"> b</button>
</div>
the problem is I want the search bar to work when I press enter in it but unfortunately it is submitting the button element , I am slightly confused as the button is not a form element and I have specifically defined onClick. I am new to javascript so I am sure it is something small but I have not been able to solve it.
ie when I press enter , the "somefunction()" gets active as opposed to "function()"
Try this
HTML
<div>
<form class="form-inline" style="padding-top:10px" action="someFile.php" onsubmit="return someFunc();">
<input id="id" type="text" placeholder="Something">
<input type="submit" name="btn_submit" value="Submit" />
</form>
</div>
JS
function someFunc(){
// code goes here
return false;
}
Just an example.
You may put your button inside the form and have the function called in onClick return false, as discussed here.
EDIT
According to your edit and your comments on what you want, you may do the following:
<html>
<head>
<script>
function formfunction(){
alert("form function is called.");
}
function somefunction(){
alert("the button is clicked.");
}
</script>
</head>
<body>
<div>
<form name="myform" action="#" onsubmit="formfunction(); return false;">
<input id="id" type="text" placeholder="Something">
</form>
<button type="button" onClick="somefunction()"> b</button>
</form>
</div>
</body>
</html>