JavaScript text changing functionality in Html tables - javascript

we have an issue with using javaScript over 2 HTML pages.
We want to change text in a table. There is a button you can press which opens a popup.
Here an example.
If you press the "Eintragen" button it opens a popup.
In the popup there should be a button which changes the innerHTML where the "Eintragen" button is.
So basically pressing the button in the popup should cause the "Eintragen" button to disappear and should show text instead.
Changing the text in one HTML page caused no problem. We can cause the button to disappear and showing text by pressing it. Our problem is by doing it with an extra popup where we press a button.
Here is our table and popup:
(We want to replace "Hallo" and the "Eintragen" Button through a different text with no button)
https://i.stack.imgur.com/xVAK8.png
And here is our code:
First one is the button which opens a popup (is already working)
Second one is the button in the popup which should trigger the JavaScript function.
Third one is the JavaScript code which should change the text
<td><input id="vname" name="vname"></td>
<td>Cell</td>
<td id="drei">Hallo<button class="button button-block"/onclick="popup(this.form)">Eintragen</button></td>
<button type="button" onclick="meineFunktion()">Eintragen</button>
function meineFunktion() {
window.close('schadensausmass.html');
document.getElementById("drei").innerHTML="test"
}
Do you have any tips and solutions how to make this work. We are JavaScript beginners and need some help with this.
Thanks in advance.

Related

on click is not working due to change in td width

I have a strange problem, that i have a <table> and on <td> there is a text box and on the next <td> there is an add button. In the text box, there is an onblur function which will hide the textbox and create a <span> for the textbox value. the span has a lesser width than textbox .
Also there is an add button Onclick event, My problem is that when we type something on text box and then click on add button, `onblur' event works first and click is not working because the click button position changes when the text box hides.
Anyone help me what I have to do get the both event works and i want these event should work separately
<Table>
<tr>
<td><Span>bla<Span><input type="text" onblur="hideTextboxCreateNewSpan()"/></td>
<td><a onclick="AddNewTextBox()">Add</a></td>
</tr>
</Table>
This is my table structure Sample and i have tons of code in these both function i cant copy here any one please help me
Try using setTimeout, then the button will be clicked before the hideTextBoxCreateNewSpan is called:
onblur="setTimeout(hideTextboxCreateNewSpan, 0);"

How to change text in a button when using onclick, to stay permanent

Im working on a function in wordpress that I wanna be able to click on a button, and when a button is clicked, the text inside the button changes and redirects the user to another page (I want to change the text inside the button from Create to Edit).
If I refresh the page or go back to the page, the text inside the button is not displaying the changed text. I want the text inside the button to always stay changed.
<a class="cc-btn">
<input id="texts" onclick="changeStyle()" value="Create"></input>
</a>
<script>
function changeStyle() {
document.getElementById("texts").value="newButtonValue";
window.location.replace("/xxxx/?page_id=xx");
}
</script>
If you would like that the changes will still remain once you refresh the page, you cannot do it using JavaScript only.
you will have to use the server side and save the new text and put it into the button value once the page is rendered. (or of course it`s possible to do something ugly like saving the data in a cookie and then use JavaScript only - but this is wrong )
Im not sure if i got your issue, but you could try it:
$(window).on('load',function(){
if(window.location.pathname == '/xxxx/?page_id=xx') {
$('#texts').val('Edit');
}
});

HTML button to open user edit fields on

I have a page that displays fruitName, score, and comments (ex: "Apple", "3/5", "Juicy and sweet!"). On the bottom of the page, I want to create a "EDIT" button, which allows me to edit the score and comments by changing them into editable fields (i.e. text field for comment, drop-down menu of 1-5 scale for score), and the originally "EDIT" button now reads "SAVE CHANGES". I am using GAE+Python+Webapp2+Jinja2
What I have so far
<h4>{{fruitList["fruitName"]}}</h4>
Score:{{fruitList["score"]}}
Comments:{{fruitName["comments"]}}
<button type="submit" class="btn">Edit</button>
<button type="button" class="btn">Close</button>
Then, I am hoping to get something like:
<h4>{{fruitList["fruitName"]}}</h4>
Score:<input type=text>{{fruitList["score"]}}</input> #Preferably drop-down menu
Comments:<input type=text>value={{fruitName["comments"]}}</input>
<button type="submit" class="btn">Save Changes</button>
<button type="button" class="btn">Close</button>
Then once the Save Changes button is clicked, the original "display" page will show with Edit and close buttons on the bottom.
How can I implement something like this? I am trying solely by HTML without javascript, but unsure of feasibility. I want the page to remain stay put when "EDIT" is clicked (no redirects) and smoothly change from text display to text edit, or score.
Thank you in advance!
You need javascript for that.
The general idea is to initially hide the inputs and only show the text, and when the user clicks EDIT the inputs are revealed and the text is hidden. When the user clicks "Save Changes" hide the input and show the text, but copy the value to the text. When the user clicks "Close" hide the input and show the text, but copy the text to the input.
And of course, when the user clicks save changes send the changes to the server (if you need to).
Update:
By "copy" I mean you need to remember updating the text when the changes are saved, something like this:
$('#score-holder').text( $('#score-input').val() );
so that the text will hold the updated input

WatiN clicks the button but nothing happens

I have a textfield and a button on the page:
<textarea class="txCS" id="text-area"></textarea>
<span id="search-button">Search</span>
What I try is simple, write some text in the textfield and click "Search".
browser.TextField("text-area").TypeText("Some Text");
browser.Span("search-button").Click();
TypeText() works, I see my text gets written on the textfield, Click() also works because I see WatiN highlights it when it clicks the button, but nothing happens when it clicks the button.
When I click the button myself still nothing happens, but when I type something in the textfield manually and click Search then everything works, as if the page knows if a human is interacting with the page and allows searching...
I montiored the events fired when I type someting in the textfield and then tried to fire them using WatiN:
searchBox.FireEvent("onmouseover");
searchBox.FireEvent("onmousemove");
searchBox.FireEvent("onmousedown");
searchBox.FireEvent("onfocus");
searchBox.FireEvent("onmouseup");
searchBox.FireEvent("onclick");
searchBox.FireEvent("onkeydown");
searchBox.FireEvent("onkeypress");
searchBox.FireEvent("onkeyup");
searchBox.FireEvent("onchange");
searchBox.FireEvent("onblur");
That didn't work either. Am I doing something wrong here?
Just as a reference for others the problem with your code is that you are trying to click a span instead of a button. Unless you 100% sure that the clickable element is a span you should use the following code with Watin:
browser.Button("search-button").Click();
And that should do the trick

Allow onclick inside an onfocus/onblur show/hide textarea

Sorry for the strange title question.
I am wondering how to do the following:
When a user clicks on the blurred out textarea through onfocus, it will display: block the div around it, displaying a "textarea console" and then a "add step" icon beneath the textarea. If you click out, it will blur the textarea along with two extra items.
However, what I would like to add is, if they click either the "textarea console" or the "add step" icon, the div will not blur out.
Here's what I have so far at jsfiddle.net
I've updated the jsFiddle: HERE
I think it was just a few things wrong...you were on the right track.
$("#textareasteinstruc").focusout(function() {
alert('focusout');
$(".textareaconsole").hide();
$("#addPrepStepButtonicon").hide();
The # was missing from focusout function...and classes/IDs were not referenced properly.
It's working the way you want it now I'm thinking :)
UPDATE: I added the $("#addPrepStepButtonicon").show(); to the click event so the 'submit' button will appear again
Check this one http://jsfiddle.net/wAaDz/13/ . Have made changes.

Categories