i want to create a input textbox with value link and write a code like this:
<form>
<input name="Textboxfield" type="text" value=".jpg"><br>
<input name="Launchlink" type="button" value="Launch link" onclick="location.href=this.form.elements['Textboxfield'].value">
</form>
this is a good code for me but have some problems.
in this code the value ".jpg" is variable but i wants to keep it stable who when user insert his/her number in textbox, can go to destination link.
for example:
i insert my number 22456 in this textbox like this: 22456.jpg
and when i press botton the page directly go to my file (a pic).
but
when i insert my number without .jpg format the page goes wrong and break the system (show index page)
and thats my problem! how can i have stable value link ".JPG" who when user jus isert his/her number to textbox the page directlty go to his/her file and show it.
also you can see this image:
http://0o.8415.2.img98.com/out.php/i543815_code.jpg
please help me guys...
Try this
<form><input name="Textboxfield" type="text" value=".jpg"><br>
<input name="Launchlink" type="button" value="Launch link" onclick="location.href=this.form.elements['Textboxfield'].value + '.jpg'">
</form>
You could check if the textbox value ends with ".jpg" using Javascript, and if it doesn't, append ".jpg" to whatever value is in the textbox. You could add this function to the onClick() handler of your button or somewhere.
You could write the function checkJPG() as:
<script type="text/javascript">
function checkJPG() {
var myText = document.getElementByID("myTextBoxID").value;
if (myText.substr(-1, 4) == ".jpg")
//do nothing
else
//append .jpg to the value in the textbox
}
</script>
Related
I have two check boxes and they are populating when the user is selected, but I now need to check the values and return them before saving them back to database in case they have been changed, below is my plunker with my working code if you select a tradesman from the drop down the ticket boxes are populated.
If someone could advise how I can get check the tick box values that would be great, this is what I have tried but I am missing something:
<input type="input" name="adminis" id="adminis" class="form-control" [(ngModel)]="tradesman.user_roles"/>
Plunker demo
To find whether a checkbox value is changed or not, you can use (change) attribute.
<input type="checkbox" [checked]="tradesman?.user_roles?.includes('Administrator') ? true : false" value="Administrator" (change)="valueChanged($event)"/>Admin
<input type="checkbox" [checked]="tradesman?.user_roles?.includes('General User') ? true : false" value="General User" (change)="valueChanged($event)" />General
In your component, you can manage the data using the event passed.
valueChanged(e:any){
/* e.target.name - for getting the changed field name */
/* e.target.checked - for getting the value - true(checked)/false(unchecked) */
}
Then you can update your array or whatever with this new value.
i dynamically generate this html code to delete an item with an id=3 for example:
"<a href='javascript:delete('" + item.id + "')>";
when i click this, it will execute delete('3');i change it as:
<a href='#delete' data-rel='popup' data-position-to='window' data-transition='pop'>
and add a dialog for this tag:
<div data-role='popup' id='delete'>
<a href='javascript:delete(item.id)' data-role='button'>delete</a>
</div>
how to transfer the item's id to this popup dialog's tag, any suggestion?
I feel like you might be going through the wrong way to achieve this. Some things to change :
delete is a JavaScript keyword. You cant use it as a function.
Don't use the onclick attribute. It results in duplication. Instead, you could use a click event for repetitive actions.
You seem to have gotten the idea to create multiple popups (one for each click of the anchor tag). I think one would do.
Now, in correlation with whatever I've just put down, here's some sample code.
HTML
<a href='#' class='delete' data-num='" + i + "'>Delete me</a>
(Note the data-num attribute in the HTML, the addition of class attribute and the removal of onclick in your code)
It could be replaced by JS which looks like this :
$(this).on("click", ".delete", function (e) {
//prevent default action
e.preventDefault();
//take the id value
var id = $(this).data("num");
//send that value to the popup
$("#delete").find("span").html(id).end().popup("open");
});
A demo fiddle for you to look at : http://jsfiddle.net/hungerpain/AxGde/2/
I have a menu header and when you click one of the menu links it directs to another page half way down (which i want) as it finds the relevant div id name. I was wondering if there is a way to clean the url back up again so it doesn't include the #id in my url? Tried window.location hash and this breaks it from scrolling and leaves the # in the url. Here is what i have:
In my menu: <li><a href="about#scroll-to" ....
And on the about page, it scrolls down to a div called #scroll-to..<div id="scroll-to"></div>
Any suggestions would be great. Thanks!
Using jquery, you can make a POST call to the target page when menu is clicked.
The POST data will contain the id of the div where you want to slide to.
On your target page, use your server language (php, asp) to output that id in a js variable and on document ready slide using jquery to that id.
Then you will have a clean url, and the page scrolling to your div.
---- edit: here comes the code!
Lets use jquery to make a POST to the target page, when a menu item is clicked. We will add a class, lets say, "mymenuitem". We will add this class to our link in the menu. So we will have
<li>Information about us</li>
(the onClick stops link from redirecting manually)
and an empty form (put it after the < body >)
<form id="slidinganchorform" method="post" action="YOURTARGETPAGE.HTML"></form>
then we will create the neccessary jquery so when the < a > tag with class "mymenuitem" is clicked, we will make a POST to the target page.
<script type="text/javascript">
jQuery(document).ready(function(){
$(".mymenuitem").click(function() {
// we will split the clicked href's value by # so we will get [0]="about" [1]="scroll-to"
var the_anchor_id_to_scroll_to = $(this).attr("href").split('#')[1];
// lets do the POST (we WILL TRIGGER a normal FORM POST while appending the correct id)
$("#slidinganchorform").append('<input type="hidden" name="anchorid" value="'+ the_anchor_id_to_scroll_to + '">');
$("#slidinganchorform").submit();
});
});
</script>
then in our YOURTARGETPAGE.HTML we will have something like (let's assume we use php)
<head>
<!-- make sure your jquery is loaded ;) -->
<?php
if($_POST['anchorid']!='')
{
?>
<script type="text/javascript">
jQuery(document).ready(function(){
// lets get the position of the anchor (must be like <a name="scroll-to" id="scroll-to">Information</a>)
var thePositiontoScrollTo = jQuery('#<?php echo $_POST['anchorid']; ?>').offset().top;
// Lets scroll
jQuery('html, body').animate({scrollTop:thePositiontoScrollTo}, 'slow');
});
</script>
<?php
}
?>
</head>
be sure the correct id must exist ;)
<a name="scroll-to" id="scroll-to">Information about us or whatever...</a>
(remove your old code because i changed some variable names and it will be difficult to debug if there are parts from the previous version. write everything from the start )
You can do this when the new page loads
history.pushState("", document.title, window.location.pathname);
However it will also remove the query string. Although, you could play with it a little bit to keep it
I'm displaying some form data in a jquery dialog. Everything works fine when I do this the first time. I can see the "my value" string in the dialog. If I reopen the dialog again for the second time the form value is no longer visible. Check out this jsfiddle to try it out yourself. This is the code:
var dialog;
$("#b1").click(function(){
dialog = $("<div></div>").html("<p><input id='input1' type='text'></p>").dialog({
autoOpen:false,
});
$("#input1").val("my value");
dialog.dialog("open");
});
This bug only happens when I add the html tags dynamically. If I use a static html block everything works fine. Any idea what is wrong here? Thanks!
That is because you are not destroying the old
<input id='input1' type='text'>
so when you call
$("#input1").val("my value");
it sets the value of first
<input id='input1' type='text'>
it finds in the DOM.
How I should do this using javascript? I looked other places but every example uses Jquery.
Only on select other textbox should visible.
Assuming that you are on an older version of rails which has prototype as the js library.
in the onchange event of the select list add the javascript function to show the div containing the text box (let's say you show the text box for value 5 of the select list):
<select id="select_item" name="select_item" onchange="display_date_range(this);">
... where 5 is the value of the option that needs to show text box
</select>
function display_date_range(list) {
if(list.options[list.selectedIndex].value == 5) {
$("text_div").show();
}
else {
$("text_div").hide();
}
}
<div id="text_div"><input type="text" value="Hooraaahhh..." /></div>