I have to add a calendar text box dynamically on each click on a link. I have tested some codes. For the first declaration it works and not for the others.
Here's my code:
<head>
<script type="text/javascript">
$(function () {
$(".hajanDatePicker").datepicker();
});
</script>
<script type="text/javascript">
var intTextBox=0;
function addElement(){
var contentID = document.getElementById('content');
var newTBDiv = document.createElement('div');
newTBDiv.setAttribute('id','txtDatePicker');
newTBDiv.innerHTML +="Date:<input id='txtDatePicker' type='text' name='test1'>";
contentID.appendChild(newTBDiv);
}
</script>
</head>
<body>
<form id="form1" method="get">
<div id="content">
<input type="text" id="txtDatePicker" name="test1"/>
</div>
<p><a href="javascript:addElement();" >Add</a>
</form>
</body>
When the form loads can get the calender. After clicking "Add" it just opens as a normal text box and not as calendar.
Just call
$(".hajanDatePicker").datepicker();
at the bottom of addElement function.
And change
<input id='txtDatePicker' type='text' name='test1'>
to
<input id='txtDatePicker' type='text' class='hajanDatePicker' name='test1'>
Also, you have multiple inputs on your page with the same id: txtDatePicker.
Related
I have two radio button, and I want to show some value on my html page according to value which a user selects in the radio button.
my html file:
<form action="">
<input type="radio" name="calenders" value="calendar_details_b2b">B2B
<br>
<input type="radio" name="calenders" value="calendar_details_b2c">B2C
</form>
<div id="calendar_details_b2c" >
content of B2C
</div>
<div id="calendar_details_b2b">
content of B2B
</div>
here is the JS fiddle which is working fine: https://jsfiddle.net/0b0xp5xm/9/
Now when I change the Id's , it is not working, https://jsfiddle.net/vjLnou8h/1/
EDIT
I have added this code in my rails application _form.html.erb which i am rendering on new.hrml.erb page.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script>
$(document).ready(function() {
$('input[type=radio][name=calenders]').change(function () {
$('#calendar_details_b2b').css("display","none");
$('#calendar_details_b2c').css("display","none");
console.log($(this).val());
var fieldToShow = $(this).val();
$("#" + fieldToShow).css("display","block");
});
});
</script>
But It is still not working.
Once you add the JQuery reference, it works just fine.
https://jsfiddle.net/vjLnou8h/2/
<html>
<head>
<style>
#data_Analysis,
#study_Design {
display: none;
}
</style>
</head>
<body>
<form action="">
<input type="radio" name="calenders" value="study_Design">B2B
<br>
<input type="radio" name="calenders" value="data_Analysis">B2C
</form>
<div id="study_Design">content of B2B</div>
<div id="data_Analysis" >content of B2C</div>
<!-- It's generally better to put your scripts just before the <body> tag closes
because by the time the browser gets that far, the DOM has been read. Also,
it can speed up page load times. -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script>
$('input[type=radio][name=calenders]').change(function () {
$('#study_Design').css("display","none");
$('#data_Analysis').css("display","none");
console.log($(this).val());
var fieldToShow = $(this).val();
$("#" + fieldToShow).css("display","block");
});
</script>
</body>
</html>
I want to enter names using input field and then show those names dynamically on the click of a button. Can anyone provide me with a code sample that does that?
What you want to achieve is fairly easy to do with jquery. However while asking a question first give it a try and then ask if you dont get it.
$(function(){
$('#submit').on('click', function(){
var value = $('#name').val();
var text = '<p>' + value + '</p>';
$('#display').append(text);
})
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" name="inputNames" id="name">
<button id="submit">Submit</button>
<div id="display"></div>
<html>
<body>
<input type="text" name="Names" id="Names">
<input type="button" value="Click" onclick="SendName();" name="">
<p id="ShowNames"></p>
<script type="text/javascript">
function SendName() {
var d= document;
var InputNames = d.getElementById("Names").value;
var ShowNames = d.getElementById("ShowNames");
ShowNames.innerHTML +=InputNames+"</br>";
}
</script>
</body>
</html>
I have a input field in form and div:
<form method="post">
<div id="message">
<input type="text" name="spind" value="" size="55" maxlength="90">
<button>Senden</button>
</div>
</form>
Then I have a javascript script for the submit-button and to show this on my website:
<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.2.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("button").click(function(){
var message = $("input").val();
var old = $("#content").html();
$("#content").html(old + '<p><span style="font-variant:small-caps"><span
style="font-size:1.5em"><b><span style="text-transform:capitalize"><?php
echo $_SESSION["username"];?></span> : </b></span><span style=
"font-size:1.6em">' + message + "</span></span></p>");
$("#content").scrollTop($("#content")[0].scrollHeight);
});
});
</script>
When I put the input in the div inside form with method="post" the message, which should be displayed disappears. This must be because of the form-container.
So, my question is, how can I put the typed message inside the input into a mysql database, without disappearing (and using the defined "button" as submit)?
I am trying to create a text field and button that reads a width and height of a quadrilateral. You enter the width and height, click the button, then a quad appears with those specifications. For some reason I can't get Javascript to read a measurement correctly, so nothing happens.
Here's what I have:
<html>
<style>
</style>
<head>
<title>Make a Polygon!</title>
<script language="javascript">
// var element = document.createElement('div');
// element.className = "someID";
function func(form) {
var element = document.createElement('div');
element.className = "someID";
var wide = form.width.value;
document.body.appendChild(element);
// this properties work//
var a = document.getElementsByClassName('someID');
for(var i in a ){
a[i].style.zIndex='3';
a[i].style.color='rgb(255,255,0)';
a[i].style.background='rgb(0,102,153)';
//a[i].style.width=wide;
a[i].style.width='70px';
a[i].style.height='200px';
a[i].style.left='500px';
a[i].style.top='90px';
}
}
</script>
</head>
<body>
<form name="widthForm" method="get"> Width:
<input type="text" name="width" value=""> <p>
<input type="submit" name="button" value="Create" onclick="func(this.form)">
</form>
<br>
</body>
</html>
So far I'm testing the width only.
It's partially based on code found here:
How to Set the Left and Top CSS Positioning of a DIV Element Dynamically Using JavaScript
You're submitting the page, and instantly refreshing it. Change the submit element to just a button :)
Change submit to button, and add return false statement to limit the button submits form when click, because if do that, the page will be refreshed and div added in javascript could not be seen. Try this:
<html>
<style>
</style>
<head>
<title>Make a Polygon!</title>
<script language="javascript">
// var element = document.createElement('div');
// element.className = "someID";
function func(form) {
var element = document.createElement('div');
element.className = "someID";
var wide = form.width.value;
var height = form.height.value;
document.body.appendChild(element);
// this properties work//
var a = document.getElementsByClassName('someID');
for(var i in a ){
a[i].style.zIndex='3';
a[i].style.color='rgb(255,255,0)';
a[i].style.background='rgb(0,102,153)';
//a[i].style.width=wide;
a[i].style.width=wide;
a[i].style.height=height;
a[i].style.left='500px';
a[i].style.top='90px';
}
}
</script>
</head>
<body>
<form name="widthForm" method="get">
Width:
<input type="text" name="width" value="">
Height:
<input type="text" name="height" value="">
<br>
<p>
<input type="button" name="button" value="Create" onclick="func(this.form);return false;">
<!-- ^^^^^^ ^^^^^^^^^^^^^-->
</form>
<br>
</body>
</html>
I have a textbox and save button. If anything changed on textbox then only save button should be enabled. I am able to take care this using javascript event, but when i select some text and right click and delete that selected text then, I do not get any event. Below is my sample code:
<!DOCTYPE html>
<html>
<head>
<script>
function myFunction() {
var hiddenfield = document.getElementById("hide").value;
var textboxval = document.getElementById("me").value;
if (textboxval != hiddenfield) {
document.getElementById("xx").disabled = false;
} else {
document.getElementById("xx").disabled = true;
}
}
function load() {
document.getElementById("hide").value = document.getElementById("me").value;
}
</script>
</head>
<body onload="load();">
<input id="me" type="text" value="test test" onkeyup="myFunction()" onmouseup="myFunction()"
onmousedown="myFunction()">
<input type="button" id="xx" value="Save" disabled="disabled" />
<br>
<input id="hide" type="hidden" value="">
</body>
</html>
Is there way to detect if user delete the text via right button click?
Try onchange, since the context-menu control changes the contents.