How to genera dynamic table it constant asp:textbox and sum other controls, when click on button in javascript.
Try This Code:
<html>
<head>
<script>
function changeLink()
{
document.getElementById('myAnchor').innerHTML="<table style='width: 100%'><tr><td> <input type='Text'/></td></tr></table>";
}
</script>
</head>
<body>
<div id="myAnchor">
</div>
<input type="button" onclick="changeLink()" value="Change link">
</body>
</html>
Related
So I am trying to dynamically (using javascript) add an input field in a form by clicking the button "Add". The semantic-ui dropdown css styling to the first field since it is not added with javascript. However, after I press add, a new field created by the css styling is not applied.
Here is a link to a demo.
https://jsfiddle.net/traorefly/h83245ju/#&togetherjs=QidJs02nya
Here is my code
<!DOCTYPE html>
<html>
<head>
<title>TOPS</title>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css">
<body>
<div class="ui text container" style="margin-top: 20%">
<form action="" class="ui form">
<div class="field" id="timekeyword">
<label>Segment Start Time/Keywords</label>
<div class="ui action input">
<input type="text" placeholder="Ex: 08:23" name="cut"> <select id="keywords" multiple="multiple" class="ui fluid search dropdown" name="video[keywords][]">
<option value="Absolute">Absolute</option>
<option value="Absolute Two">Absolute Two</option>
</select>
<div class="ui positive button" id="addField">Add</div>
</div>
</div>
</form>
</div>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.js"></script>
<script >
$('.dropdown').dropdown();
$('#addField').click(function(){
var html = "<div class=\"field\">" +
" <div class=\"ui action input\">" +
" <input type=\"text\" placeholder=\"Ex: 08:23\" name=\"cut\">" +
"<select id=\"keywords\" multiple=\"multiple\" class=\"ui fluid search dropdown\" name=\"video[keywords][]\"><option value=\"Absolute\">Absolute</option>" +
"<option value=\"Absolute Convergence\">Absolute Convergence</option>" +
"<option value=\"Absolute Maximum\">Absolute Maximum</option>" +
" </div>" +
" </div>"
$('#timekeyword').after(html)
})
</script>
</body>
</html>
fiddle: https://jsfiddle.net/8pcfz2a7/
you should call $('.dropdown').dropdown(); for new elements as well.
so add $('.dropdown').dropdown(); to end of your click handler.
you can also put this in a function called update_ui, for reuse code.
This is the chunk of my code
<div class="form-control">
<div class="input-group">
<span class="input-group-addon">
<input type="text" id = "fromuser"></input>
<select id="combobox">
<option value="">Select one...</option>
<option value="abc">abc</option>
<option value="cde">cde</option>
<option value="xyz">xyz</option>
</select>
</span>
<button type="submit">Submit</button>
</div>
</div>
What I am trying to achieve is that the User can either Type the value or select from the dropdown list. The challenge here is that the Input from Keyboard will be different from that given in dropdown. For example, the dropdown has three character string options but the user can type a number such as 10, 20, 30 etc.
Is this type of input allowed possible? If so, can someone help me.
The Closest I could come to my problem is by dropping the select and use autocomplete . The full test code is as follows:-
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>jQuery UI Autocomplete - Default functionality</title>
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script>
$( function() {
var availableTags = [
"abc",
"def",
"xyz"
];
$( "#tags" ).autocomplete({
source: availableTags
});
} );
function myFunction(){
var NameValue = document.forms["FormName"]["tags"].value;
window.alert(NameValue);
}
</script>
</head>
<body>
<form name="FormName" method="post" />
<div class="ui-widget" >
<input name= "tags" id="tags" type="text" onchange="myFunction()"/>
<button name="btn-signup" type="submit" value="Submit">Submit</button>
</div>
</form>
</body>
</html>
I know this is the final solution but maybe a way ahead.
I am using a Toggle Switch in the settings pane. Problem is that the text in the title and labelOff, labelOn is not visible. I am not sure how can I change the front color or styles from the WinJS.UI.ToggleSwitch so that this text start displaying. Any examples will be highly appreciated.
Here is my html.
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<div class="mypage fragment"
id="mysettings"
data-win-control="WinJS.UI.SettingsFlyout" data-win-options="{width:'narrow'}">
<div class="win-header">
<button onclick="WinJS.UI.SettingsFlyout.show()" class="win-backbutton">
</button>
<div class="win-label">My Settings</div>
</div>
<div class="mytoggle" data-win-control="WinJS.UI.ToggleSwitch" data-win-options="{ title:'Test', labelOff: 'Close', labelOn:'Open', checked: true}"></div>
</div>
</body>
</html>
Below is my css
.fragment.mypage .mytoggle .win-title .win-labelOff{
color: green; }
you can refer the css styling classes for WinJS.UI.ToggleSwitch here.
default.js:
app.onsettings = function onsettings(e)
{
e.detail.applicationcommands = {
about: { title: 'About', href: '/pages/settings/about.html' },
};
WinJS.UI.SettingsFlyout.populateSettings(e);
}
/pages/about/about.css:
.myflyout .win-content .mytoggle .win-title
{
color: blue;
}
/pages/about/about.html page:
<!DOCTYPE html>
<html>
<head>
<title></title>
<link href="/pages/settings/about.css" rel="stylesheet" />
</head>
<body>
<!-- BEGINSETTINGFLYOUT -->
<div class="myflyout" data-win-control="WinJS.UI.SettingsFlyout"
data-win-options="{settingsCommandId:'about'}">
<div class="win-ui-light win-header" >
<button type="button" onclick="WinJS.UI.SettingsFlyout.show()"
class="win-backbutton"></button>
<div class="win-label">About</div>
<img src="/images/smalllogo.png" style="position: absolute; right: 20px;"/>
</div>
<div class="win-content">
<div class="mytoggle" data-win-control="WinJS.UI.ToggleSwitch"
data-win-options="{title: 'example of toggle'}" >
</div>
</div>
</div>
<!-- ENDSETTINGSFLYOUT -->
</body>
</html>
As of 2016 I failed doing this with ".win-title". Instead used ".win-toggleswitch-header".
Having trouble constructing a button dynamically with jQuery Mobile. Copy and run. See notes in code.
<!DOCTYPE html>
<html>
<head>
<title>MSC Pre-Close Application</title>
<meta charset="utf-8"/>
<!-- standard Jquery/jQuery Mobile Libraries -->
<script src="jquery.mobile/jquery.js"></script>
<script src="jquery.mobile/jquery.mobile.js"></script>
<link rel="stylesheet" href="jquery.mobile/jquery.mobile.css" />
<BR/>
<div data-role="page" id="mainmenu">
<div data-role="header" data-position="inline">
<h1>Main Menu</h1>
</div>
<div class="ui-body ui-body-c">
<div data-role="content">
<div class="ui-block-a"><button id="click_me" type="submit" data-theme="a" data-icon="home">Click me to change the button to my right</button></div>
<div class="ui-block-a"><button class="cl_pre_phone1" type="submit" rel="external" data-theme="a" data-icon="home">Primary Phone</button></div>
<script>
$(document).ready(function()
{
// this changes the label but not the href action.
$(".cl_pre_phone1").html("<a href='google.com'> Google</a>");
$("#click_me").click(function() {
alert("this should change the text and href of the button!");
// here I would like to change the value as well as the href action, but it does not work.
$(".cl_pre_phone1").html("<a href='yahoo.com'>Yahoo</a>");
//$(".cl_pre_phone1").append("<a href='yahoo.com'>Yahoo</a>");
//$(".cl_pre_phone1").append("<a href='yahoo.com'>Yahoo</a>").reload(true);
});
});
</script>
You're getting messed up by the enhancement which jQM does. Your button is getting rewritten to:
<span class="ui-btn-inner ui-btn-corner-all"><span class="ui-btn-text">Primary Phone</span>
<span class="ui-icon ui-icon-home ui-icon-shadow"></span></span>
<button class="cl_pre_phone1 ui-btn-hidden" type="submit" data-theme="a" data-icon="home" aria-disabled="false">Primary Phone</button>
One way round this would be to change the call inside the callback to:
$(".cl_pre_phone1").attr("href", "http://yahoo.com").parent().find(".ui-btn-text").text("Yahoo");
or you could replace the whole ui-block-a div.
I'm looking for a simple javascscript alert box. I need to be able to pass the alert box a string of text.
Is something like this possible? My syntax is probably wrong.
<html>
<head>
<script type="text/javascript">
function show_alert()
{
alert(my_string_here);
}
</script>
</head>
<body>
<input type="button" onclick="show_alert()" value="Show alert box" string="alert for system number 2" />
</body>
</html>
<html>
<head>
<script type="text/javascript">
function show_alert(my_string)
{
alert(my_string);
}
</script>
</head>
<body>
<input type="button" onclick="show_alert('This will alert!')" value="Show alert box" string="alert for system number 2" />
</body>
</html>
This makes no sense thou. Better solution:
<html>
<head>
</head>
<body>
<input type="button" onclick="alert('Doh!')" value="Show alert box" string="alert for system number 2" />
</body>
</html>
Try:
<input type="button" onclick="alert('alert for system number 2');" value="Show alert box" />
What are you trying to do? alert('Your string here') should do the trick if you really need an alert.
Yes you can
function testAlert(val){alert(val);}
Yes this is possible
<script type="text/javascript">
function testAlert(val){alert(val);}
</script>
<input type=text onclick='testAlert(this.string)' string="something" value="clik here">
alert("alert for system number 2");