I have a pre compiled form which i need to insert a button into after a specific field with and ID of addr_postcode can any one show me how to, using javascript, add a button after the field which when clicked takes the value of the field and launches a new window with the value as part of the url. for example:
../DIR/default.aspx?postcode=postcode here
Thanks a nice simple one I hope!
HTML
<TR>
<TD vAlign=top>
<SPAN id=_Captaddr_postcode class=VIEWBOXCAPTION>Post Code:</SPAN>
<BR>
<SPAN id=_Dataaddr_postcode class=VIEWBOX>
<INPUT id=addr_postcode class=EDIT name=addr_postcode maxLength=10 value=test size=15><INPUT name=_HIDDENaddr_postcode type=hidden>
</SPAN>
</TD>
</TR>
Try this:
function makeButton() {
var buttonDiv = document.getElementById("addr_postcode");
var Button = document.createElement("input");
Button.setAttribute("type", "button");
Button.setAttribute("id", "ButtonClick");
Button.setAttribute("value", "New button");
Button.setAttribute("onclick", "btnClick(" + buttonDiv.value.toString() + ");");
buttonDiv.appendChild(Button);
}
btnClick(URL) {
window.open(URL,'','scrollbars=no,menubar=no,height=600,width=800,resizable=yes,toolbar=no,location=no,status=no');
}
Related
I have a table, with 2 labels/inputs (i use a ng-show/ng-hide which works with the edit button), and 2 buttons (1 button is edit, and 1 button is delete). What i want to do is when the user clicks the edit button, it should hide the spans and shows the inputs(textboxes) and focus on the first input. If the user clicks outside of either inputs, (in my opinion, loses focus which mean using blur method), then the inputs should turn back to span with the updated values. Here is what I have created, but I can't figure out the rest. New to angular so any help will be appreciated and voted.
This is the html code:
<table class="tableGV">
<tbody>
<tr>
<td class="DisplayRowData">
<span class="LabelText" data-ng-hide="data1">{{data1}}</span>
<input class="DataText" type="text"data-ng-show="showEditMode" maxLength="1" data-ng-model="editData1" ng-change="cs.ClassCode"/>
</td>
<td class="DisplayRowData">
<span class="LabelText" data-ng-hide="data2">{{data2}}</span>
<input class="DataText" type="text" data-ng-show="data2" maxlength="50" data-ng-model="data2" />
</td>
<td align="right">
<button type="button" id = "btnEditClassService{{$index}}" data-ng-click="edit(cs, $index)" class="editButton"></button>
<button type="button" id = "btnDeleteClassService{{$index}}" data-ng-click="delete(cs, $index)" class="deleteButton"></button>
</tr>
</tbody>
</table>
after this, i am not sure where to go. Thanks for anyone to help me.
you can check this plnkr. The solution is not elegant but I think it sastify your requirement.
function onEdit(){
vm.isEdit = true;
executeAfterDOMRender(function(){
document.getElementById('txt1').focus()
});
}
function onBlur(){
executeAfterDOMRender(function(){
var txtIds = ['txt1', 'txt2'];
var activeElementId = document.activeElement.id;
if(~txtIds.indexOf(activeElementId)){
//txt boxes is focued, do nothing here
} else {
vm.isEdit = false;
}
});
}
function executeAfterDOMRender(callback){
$timeout(callback);
}
I am working on a custom prompt box. So far I used a hidden div that is shown on a button click with javascript:
function openPromptBox() {
var pos = FindXY(document.promptForm);
var cont = $('promptContainer');
var searchBox = $('promptBox');
searchBox.style.left = (pos.x - 20) + "px";
searchBox.style.top = (document.body.scrollTop + 100) + "px";
cont.style.display = "block";
}
here is the div:
<div id="promptContainer">
<div id="promptBox">
<table>
<tr>
<td colspan="2">
<input type="text" name="result" id="result" size="25"/>
</td>
</tr>
<tr>
<td>
<input type="button" id="btnOK" value="OK" />
</td>
<td>
<input type="button" id="btnCancel" value="Cancel" />
</td>
</tr>
</table>
</div>
</div>
Now I need to return to the function openPromptBox the value of textbox result whenever btnOK button is clicked. Is there any way to do that?
No, this is impossible.
A prompt opens a modal dialog and blocks all further JavaScript (and interaction with the page) until one of the buttons is activated by the user.
When you insert form fields into an HTML document, there is no blocking (nor could there be, since that would prevent the user from filling in the form).
You need to bind an event listener to the form fields you have created and then handle the response going forwards just like any other asynchronous operation.
It seems like you are using jquery so here would be a solution:
$('#result').val()
Would take the current value (the text / number / etc) out of your input
now you can simply pass it to your function like so:
$('#btnOK').on('click', function() {
openPromptBox($('#result').val());
});
That's it.
In the definition of your function you should probably add a parameter which is then used in the function:
function openPromptBox(textFromInput){
alert(textFromInput);
}
JSFiddle: https://jsfiddle.net/01bkkgzd/2/
UPDATE:
Without JQuery it would be:
document.getElementById("result").value
which will get the value of the input
Example for the onclick action and the following function call
document.getElementById("btnOK").addEventListener('click', function() {
openPromptBox(document.getElementById("result").value);
});
JSFiddle: https://jsfiddle.net/01bkkgzd/5/
I'm trying to walk through and alter someone else's code (racktables open source application)... and maybe I've been looking at it too long.
But I can't figure out why clicking on the "Edit Row" image/button in the 4th cell below trigger the form to submit.
HTML Code
<tr>
<td id=""><img src="?module=chrome&uri=pix/tango-user-trash-16x16-gray.png" title="1 rack(s) here" height="16" width="16" border="0">
<form method="post" id="updateRow" name="updateRow" action="?module=redirect&page=rackspace&tab=editrows&op=updateRow">
<input tabindex="1" name="row_id" value="26270" type="hidden">
</form>
</td>
<td><div id="location_name"></div></td>
<td><div id="row_name">BLDG5:First Floor</div></td>
<td>
<input tabindex="1" name="edit" class="edit" src="?module=chrome&uri=pix/pencil-icon.png" id="" title="Edit row" type="image" border="0">
<input tabindex="1" style="display: none;" name="submit" class="icon" src="?module=chrome&uri=pix/tango-document-save-16x16.png" title="Save changes" type="image" border="0"></td>
<td>Row BLDG5:First Floor</td>
</tr>
I've added / created the edit button, as well as some jquery code to handle the edit click event.
Jquery Code
//edit button handler
$(".edit").click(function(e){
var location_id = this.id;
var menu = $( "#location_id" ).clone();
//locate the associated "location_name" field for the selected row & hide the column
var location_name=$(this).parent().siblings().children("#location_name").hide();
var row_name = $(this).parent().siblings().children("#row_name").hide();
//replace location_name with the new menu
$(location_name).replaceWith(menu);
menu.find('option').each(function(i, opt) {
// when the value is found, set the 'selected' attribute
if($(opt).attr('value') == location_id.toString()) $(opt).attr('selected', 'selected');
});
//change row name to input box for editing
var input = $(document.createElement('input'));
$(input).attr('type','text');
//$(input).attr('name','edit_row_name');
$(input).attr('value', $(row_name).text());
//replace exiting row_name with this new input box.
$(row_name).replaceWith($(input));
//show save button
var save_btn = $(this).siblings(".icon").show();
});
What I've tried so Far
When i disable / comment out the logic in PHP that creates the form, the edit button works the way i want it to.
I've been grepping the folder structure to see if there's some javascript embedded somewhere that I'm not seeing. But nothing is jumping out at me.
It's probably something really simple that I'm not seeing / recognizing.
Any suggestions?
See:
<input type='image' />
is also have a default action to submit the forms just like [type="submit"]. to prevent it you need to stop the default behavior:
$(".edit").click(function(e){
e.preventDefault(); // <----use this.
I have a simple form users can fill out and also add a new form to add multiple entries.
Everything works fine except when I enter data in the first set of inputs and click create new memberships it will take the data from the form and put it in the text boxes.
How can I stop that?
http://jsfiddle.net/811yohpn/2/
I have tried a couple different ways.
$('#education').find('input:text').val('');
$('#education: input').val('');
However that will clear all entries.
Call find on the newDiv, instead of all inputs within #education.
Updated fiddle
newDiv.find('input:text').val('');
var ed = 1;
function new_education() {
ed++;
var newDiv = $('#education div:first').clone();
newDiv.attr('id', ed);
var delLink = '<a class="btn btn-danger" style="text-align:right;margin-right:65px" href="javascript:deled(' + ed + ')" > Delete Education ' + ed + ' </a>';
newDiv.find('tr:first th').text('Education ' + ed);
newDiv.append(delLink);
newDiv.find('input:text').val(''); // <----------- added this
$('#education').append(newDiv);
}
function deled(eleId) {
d = document;
var ele = d.getElementById(eleId);
var parentEle = d.getElementById('education');
parentEle.removeChild(ele);
//ed--;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<legend>Education</legend>
<div id="education">
<div id="1">
<table border=3>
<tr>
<th colspan="4" style="background-color:#b0c4de;">Education 1</th>
</tr>
<tr>
<td>
<label>School Name</label>
<input type="text" name="schoolname[]" maxlength="30" size="30"/>
</td>
<td>
<label>Degree Type</label>
<input type="text" name="degreetye[]" maxlength="30" size="30"/>
</td>
<td>
<label>Degree Field</label>
<input type="text" name="degreefield[]" maxlength="30" size="30"/>
</td>
</tr>
</table>
</div>
</div>
<br/><a class="js-addNew btn btn-info" href="javascript:new_education()"> Add New Education </a>
You need to clear the inputs under the cloned element
newDiv.find('input').val('')
Demo: Fiddle
Your selectors are selecting all input elements within the #education container, that is not what you want. The newDiv variable refers to the newly created element so you can use that to find the input elements within in and then clear it
And my second question ,,
I have a simple modal box opening when I click on 'add users' . The modal box contains 3 submit buttons ( add, delete, and submit) . I have done this with the help of a javascript.
The html code is
<div id="overlay">
<div><a href='#' onclick='overlay()'>X</a>
<form action="" method="POST">
<table>
<tr>
<td style="width:120px;">
user<input style="width:100px;" name="u" type="text"/>
</td>
<td>
<input type ="submit" value = "add"> <input type="submit" value="delete"><br>
</td>
</tr>
<tr>
<td>
<select style="width:150px;">
<option value="abc">abc</option>
</select>
<br>
</td>
</tr>
</table>
</form>
<input type="submit" value="Submit"/> </div></div><a href='#' onclick='overlay()'>Click here to add user</a>
and my javascript is
function overlay() {
el = document.getElementById("overlay");
el.style.visibility = (el.style.visibility == "visible") ? "hidden" : "visible";}
now my task is to to add a user when user types a name in the text field and press a add button, the same user name should come in the drop down list and similarly if user selects one name from the dropdown list and press the delete button , it should delete that name .
And finally if he press the submit button then only the modal box should close and the datas will be shown on my main page..
I have just started doing my task and am planning to implement these functionality using php and some file operations .
My first question is as user first press the add button ,, it will close the modal window and that is not what i am required ( I guess you understand my requirement ) Is there any way to solve this? Please help this newbie Thank you.
You have to add eventsListeners to the button and prevent their default behave.
(function(){
var addButton = document.getElementById("add_btn");
var deleteButton = document.getElementById("delete_btn");
addButton.addEventListener("click", addUser, false);
deleteButton.addEventListener("click", deleteUser, false);
})();
function addUser(event) {
event.preventDefault();
var element = event.target;
var userNameInput = document.getElementById("user_text");
var userName = userNameInput.value;
var usersList = document.getElementById("users_list");
var user = document.createElement('option');
user.value = userName;
user.innerHTML = userName;
usersList.appendChild(user);
usersList.selectedIndex = usersList.length - 1;
userNameInput.value = "";
}
function deleteUser(event) {
event.preventDefault();
var usersList = document.getElementById("users_list");
usersList[usersList.selectedIndex].remove();
}
Here an example I wrote on jsFiddle of your code:
jsFiddle
Make your form submits using AJAX...default submit btn will refresh the page.
I assuming when you add/delete a user...you are actually saving them in the db.
1.When you press 'Add' btn...make an ajax call to the backend with the user details and save it and send a callback whether the user has been added successfully or not.
2. On the add user callback...you can call a function to update the drop-down list.