I wrote this code to replace the element in div:"change" with the input given in textbox:"use10" when the button:"insert" is clicked.But when i click nothing
is happening please help.Here is my code:
<div id="change">
<?php
echo $r9['fname'];
echo " ";
echo $r9['lname'];
echo " ";
?>
</div>
<div id="dialog" title="Change Details">
<form method="POST" name="changename">
<input type="text" id="use10" name="use10" placeholder="First Name">
<input type="text" id="use20" name="use20" placeholder="Last Name">
<button type="button" type="submit" name="insert" id="insert" class="btn btn-success">Change</button>
<script>
document.getElementById("insert").onclick=function(){
var fn=getElememtById("use10").value;
document.getElementById("change").innerHTML=fn;}
</script>
</form>
</div>
Try this:
Jsfiddle: https://jsfiddle.net/74Lmwcmt/
$( document ).ready(function() {
document.getElementById("insert").onclick=function(){
var fn=document.getElementById("use10").value; // you forget to write "document." over here
document.getElementById("change").innerHTML=fn; // give id of div
}
});
OR
window.onload = function() {
document.getElementById("insert").onclick=function(){
var fn=document.getElementById("use10").value; // you forget to write "document." over here
document.getElementById("change").innerHTML=fn; // give id of div
}
};
I have just used your code and changed it a bit. Check out if this is what you are looking for.
<div id="change" title="Change Details">
<p> <form method="POST" name="changename"><input type="text" id="use10"
name="use10"
placeholder="First Name"> </p>
<p> <input type="text" id="use20" name="use20"
placeholder="Last Name"> </p>
<button type="button" type="submit" name="insert" id="insert" class="btn
btn-success">Change</button><script>
document.getElementById("insert").onclick=function(){
var fn=document.getElementById("use10").value;
document.getElementById("change").innerHTML=fn;}</script>
</form>
</div>
Related
I'm trying to generate a text-box after a button click event. The code is as follows.
<div id="welcomeDiv" class="answer_list" > WELCOME </div>
<input type="button" name="answer" value="Show Div" onclick="showDiv()" />
</div>
<?php if(isset($_POST['button'])) { ?>
<?php echo "<script type=\"text/javascript\">
function showDiv() {
<input type="text" id="textInput" value="..." />
document.getElementById('welcomeDiv').style.display = "block"; </script> ";
}
</script>" ?> ;
<?php } ?>
But the button click event function is not working properly. Any thoughts?
You can also create css and make visible textfield on button click
Hope below example will help you
function onButtonClick(){
document.getElementById('textInput').className="show";
}
.hide{
display:none;
}
.show{
display:block;
}
<div class="answer_list" > WELCOME </div>
<input type="button" name="answer" value="Show Text Field" onclick="onButtonClick()" />
<input class="hide" type="text" id="textInput" value="..." />
You don't need use PHP! Is better to use Jquery for this action.
$(document).ready(function() {
$("#myButton").click(function() {
$("#myButton").after('<input type="text" id="textInput" value="">');
});
});
input{
display:block;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="welcomeDiv" class="answer_list"> WELCOME </div>
<br>
<input type="button" id="myButton" name="answer" value="Show Div" />
Hi Ryan please check this code it will create a text box and add it before button.
<div id="welcomeDiv" class="answer_list" > WELCOME </div>
<div id="tbox_div">
</div>
<input type="button" name="answer" value="Show Div" onclick="showDiv()" />
<script>
function showDiv(){
var newtextbox ='';
if (!document.getElementById("textInput")) {
newtextbox += '<input type="text" id="textInput" value="..." />';
document.getElementById('tbox_div').innerHTML+=newtextbox;
}
}
if you want to add more that one text boxes then remove this if condition.
if (!document.getElementById("textInput"))
Using JQuery you can do it like, here's a FIDDLE
<div id="welcomeDiv" class="answer_list"> WELCOME </div>
<br>
<input type="button" id="myButton" name="answer" value="Show Div" />
<br>
<br>
<input type="text" id="textInput" value="" hidden/>
$(document).ready(function() {
$("#myButton").click(function() {
$("#textInput").show();
});
});
Using Plain JavaScript, here's a FIDDLE
<div id="welcomeDiv" class="answer_list"> WELCOME </div>
<br>
<input type="button" id="myButton" name="answer" value="Show Div" onclick="showInputBox()" />
<br>
<br>
<input type="text" id="textInput" value="" hidden/>
<script>
function showInputBox() {
if (document.getElementById("textInput")) {
document.getElementById("textInput").style.display = 'block';
alert("Yes");
} else {
//IF INPUT BOX DOES NOT EXIST
var inputBox = document.createElement("INPUT");
inputBox.setAttribute("type", "text");
inputBox.setAttribute("id", "dynamicTextInput");
document.body.appendChild(inputBox);
alert("No");
}
}
</script>
Below is my html code for the form
<form id="taxi_distance_input" >
<div class="col-md-8" style="display: inline-block; left:-30px">
<div class="col-md-4">
<div class="input-group">
<input type="text" class="form-control" id="usr"> </input>
<span class="input-group-addon" style="width: 50px">km</span>
</div>
</div>
<div class="col-md-4" style="padding-left:0px; margin-left:-10px">
<input type="button" class="btn btn-success" value="Submit" id="myButton"> </input>
</div>
</div>
<p> </p>
</form>
And in the bottom of the page I give the
<script src="/js/form_input_parameter.js"></script>
Inside the form_input_parameter.js i have written the script
$(document).ready(function(){
$('#myButton').click(function(){
var text = $("#usr").val();
alert(text+"success");
});
But it is not working .Any help is apprecited
You've forgotten the }); at the end of your JS code
The input tag should end with />
$(document).ready(function() {
$('#myButton').click(function() {
var text = $("#usr").val();
alert(text + " success");
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" class="form-control" id="usr" />
<input type="button" class="btn btn-success" value="Submit" id="myButton" />
So i have a log in page, there is a form and what i wanna do is when the user enters their username and password, it checks it in an object (ik i should do it in backend but stay with me here) but the jquery function is not working. here is the code.
<div class="login">
<h1>Login</h1>
<form>
<input type="text" name="u" placeholder="ID" required="required" />
<input type="password" name="p" placeholder="Password" required="required" />
<button id="but" type="submit" class="btn btn-primary btn-block btn-large">Enter Workspace</button>
</form>
</div>
<script>
$('#but').click(function() {
alert("lol");
});
</script>
what do i neeed to fix in order for the jquery function to work?
What do you mean 'it checks it in an object'? Do you want to grab the username & password when a user clicks the button? If so then you'd do something like this:
$('#but').click(function() {
var username=$('input[name=u]').val();
var password = $('input[name=p]').val();
// Do checks with the values here e.g send to server for validation
});
Adding jquery in the script. Also you may write the jquery functions in $(document).ready() or $(function(){}) but it as optional as long as your write your script after the element it is trying to access.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="login">
<h1>Login</h1>
<form>
<input type="text" name="u" placeholder="ID" required="required" />
<input type="password" name="p" placeholder="Password" required="required" />
<button id="but" type="submit" class="btn btn-primary btn-block btn-large">Enter Workspace</button>
</form>
</div>
<script>
$(function(){
$('#but').click(function() {
alert("lol");
});
})
</script>
I'm using mailto: protocol on my page (html). I have textarea field where user can write some text, now I want to include that text in body of email.
Any sugestions how to change the code, that the function will work as I wish?
My current code (contact-message:
<form id="contact-form" class="contact-form" action="contact.php" method="post">
<p class="contact-name">
<input id="contact_name" type="text" placeholder="Name" value="" name="name" />
</p>
<p class="contact-email">
<input id="contact_email" type="text" placeholder="Email Addresse" value="" name="email" />
</p>
<p class="contact-message">
<textarea id="contact_message" placeholder="Nachricht" name="message" rows="15" cols="40"></textarea>
</p>
<p class="contact-submit">
<a class="submit" href="mailto:mail#adress.com?subject=Mail request&body=contact-message">Send mail</a>
</p>
<div id="response">
</div>
</form>
You can use javascript as
function sendMail()
{
var body = document.getElementById("contact_message").value;
window.location.href = "mailto:mail#example.org?subject=Mail request&body="+body;
}
Call function as
<a class="submit" onclick="sendMail()">Send mail</a>
function MyFunction(){
var email = document.getElementById("input").value;
window.location.href = "mailto:" + email + "?subject=Test email&body=Testing email";
}
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<input type="text" id="input"/>
<button onclick="MyFunction()">Click</button>
</body>
</html>
i want to show a login form when a click is done on a link . i want to make default behaviour of div "hide ".. how can i do that ? may form is by default showing on page., please help me . it will b grate ful for you .
Sign In
<div class="form">
<input type="text" value="" name="myinput" id="myinput"/>
<input type="submit" name="submit" value="submit"/>
</div>
javascript:
$(document).ready (function() {
$('.signin').click(function() {
$('.form').show();
return false;
});
});
Add style to the "form" to hide it.
<div style="display:none;" class="form">
<input type="text" value="" name="myinput" id="myinput"/>
<input type="submit" name="submit" value="submit"/>
</div>
Set display property of form class to none as shown belo in using css.
Sign In
<div class="form">
<input type="text" value="" name="myinput" id="myinput"/>
<input type="submit" name="submit" value="submit"/>
</div>
css:
.form{
display:none;
}
javascript:
$(document).ready (function()
{
$('.signin').click(function()
{
$('.form').show();
$('.signin').hide();
});
});