Open Comment Reply Form On Button Click - javascript

I have a blog that has a reply form for each comment on the blog. I am trying to create a "Reply" button that would show the form once its clicked. Right now, if I click any "Reply" button it will only apply the hide style to the first button and the block style to the first div.
HTML
<div class="reply">
<button id="replybutton" onclick="replybutton()">Click Me</button>
<div id="replyform">
<form>
...
</form>
</div>
</div>
HTML
function replybutton() {
document.getElementById("replyform").style.display = "block";
document.getElementById("replybutton").style.display = "none";
enter code here

The id are supposed to be unique. So each form should have a unique id. You can use a common class to show/hide them.
When you click a button you should pass its reference to your onClick function like this onclick="replybutton(this) and modify your onClick function to target the button function replybutton(btn). If you want to show/hide your form you can use the nextElementSibling
See the jsFiddle
https://jsfiddle.net/th4dz1q0/2/

Related

Replace html button element with text after submitting a form

I have a button in the main page which on clicking opens a modal. I have a form in the modal with a button which, on submitting closes the modal and returns to the main page. I want to change the html button which is on the main page after closing the modal to plain text. How would I replace the main button in main page after the modal is closed ?
function submitForm() {
alert('yes');
var button = document.getElementById('mainButton');
button.style.display = 'none';
}
<body>
<button id="mainButton"> Click here </button>
<div class="modal">
<form onsubmit="submitForm()">
<input type="text">
<button> Done </button>
</form>
</div>
</body>
I tried the following in submitForm function:
removing the button like this:
document.getElementById('mainButton').innerHTML = '';
Also tried:
document.getElementById('mainButton').style.display = 'none'
You are working with a submit button (that's the default type of button you get with <button>). So, when you click it, the onsubmit event handler fires and the form submits, which results in the current page being unloaded, so trying to display anything else isn't going to work.
In this scenario, you'd need the form to redirect to another page that has the content you want on it (that is done by configuring the form element's action attribute.
If you don't really need to submit data to a server, then you can change the type of button you have to a regular button and change the event handler to handle just a click event and then just take what you are already doing to the next level.
In addition to hiding what you no longer want to see with display:none, you can show something that is set up ahead of time and defaulted to display:none and then change it to display:block when it's time to show it.
function submitForm() {
alert('yes');
var button = document.getElementById('mainButton');
button.style.display = 'none';
// Remove the class that hides the element that you want to now see
document.querySelector(".afterClick").classList.remove("afterClick");
}
.afterClick { display:none; } /* Defaults to hidden */
<body>
<button id="mainButton"> Click here </button>
<div class="afterClick">Thanks!</div>
<div class="modal">
<form onclick="submitForm()">
<input type="text">
<button type="button"> Done </button>
</form>
</div>
</body>
You could do something like this to replace your button with a div containing its text.
var mainButton = document.getElementById('mainButton');
var buttonText = mainButton.textContent;
var newDiv = document.createElement('div');
newDiv.textContent = buttonText;
document.body.removeChild(mainButton);
document.body.appendChild(newDiv);

IDs not being recognized when placed in modals

I am creating a registration form where its contents are contained in DIV (hidden), then when the user clicks a button, the modal shows and the content is loaded through the ID of the DIV.
However, I am encountering a problem where the button of the DIV is not recognized in my script. I assigned a click event using jquery, but it doesn't work. Probably because the hidden DIV has conflicts with the DIV create in the modal (which will eventually have the same IDs).
Here is my script:
$('#addCollege').click(function(e){
modal.open({content: $('#addCollegeForm').html()});
e.preventDefault();`
});
This is the DIV
<div id="addCollegeForm" style="display:none">
<label>College:</label><br>
<input type="text" placeholder = "Enter college name here..." id = "collegeDescription" > <br>
<input type="button" value="Save" id= "addCollege">
</div>
Thanks and I appreciate your help.
I wrote a dialog plugin for bootstrap, and got a similar problem.
I want to pop up an existing dom element.
Here is solution:
$targetElement.detach().appendTo($window.find('.modal-body')) // $targetElement is an existing dom
Detach element and append it to container.
Don't forget to revert the element to old container.
Hope it helps.
Regards
Try moving the button that opens your dialog out of the dialog:
EDIT - something like this should work...
HTML...
<div id="addCollegeForm">things in your dialog</div>
<input type="button" value="open dialog" id="addCollege">
jquery...
$("#addCollegeForm").dialog({
autoOpen: false
});
$('#addCollege').click(function () {
$("#addCollegeForm").dialog("open");
});
http://jsfiddle.net/DTq6m/
http://api.jqueryui.com/dialog/#option-autoOpen

How to disable a submit button after one click?

I have this form inside a div and the submit button inside another div.
<div class="container1">
<form name="reg-form" id="signup" action="" method="post">
<div class="sep"></div>
<div class="inputs">
<input type = "submit" id="submit" name="submitkey" value="GENERATE KEY" />
</div>
</form>
</div>
How would I disable the submit button after one click? I tried every javascript code I find but it doesn't work on me. I dont know if it is because the form is inside a div and the submit button is inside another div. Thank you.
document.getElementById('signup').onsubmit = function() {
document.getElementById('submit').disabled = true;
};
Demo
The code should be put under the script, or wrapped inside a DOMContentLoaded/window.onload handler. Make sure your HTML does not have duplicated IDs.
Also, if the button must stay disabled after a page refresh/form submission, you will need cookies or a server-side session. None of these methods are foolproof though, and this is outside of the scope of the question I believe.
If you have jquery you can use this code:
$('#signup').submit(function(){
$('#submit').attr('disabled', 'disabled');
});

Show Interactive Html elements on top of an anchor tag

I have a area surrounded by an anchor tag and it should be directed to anchor tag href wherever user clicks on that area. And also that area should contain a textbox and button control which should allow user to type some text and submit. The problem is when I click on the textbox or button it does a redirect to the page given in anchor tag.
<a href="http://stackoverflow.com/">
<div style="border:1px solid grey;width:300px;height:100px;">
<div style="">Title</div>
<div>
<input type="text" name="name">
<button type="button" onclick="alert('button clicked');">Click Me!</button>
</div>
</div>
</a>
Please refer this jsfiddle.
I have created a simplified problem here.
However I found a solution for this by giving negative margin-top values. It is working but I am interested in a better solution. Because this solution is not scalable since the button and textbox are not inside the content div.
Each of these sections represent a item in a search result. When a user click on a search item it would navigate to single item page. At the same time users should be able to edit content from search results view by selecting edit option. When they select edit, a textbox and a button to submit should appear.
Unfortunately the HTML5 spec says about the <a> element:
Content model:
Transparent, but there must be no interactive content descendant.
What that means is, an <a> element is allowed to contain any elements that its parent is allowed to contain, except for things like <button>.
You'll need to find a way to get your <button> and <input> working outside of the <a>
Use this
<input type="text" name="name" onclick="return false;" />
Use this only if you don't want to change your markup.
The best solution is go with the semantics of HTML and style it. This way is not correct as Gareth pointed out.
In the case of your button
<button type="button" onclick="buttonClick(event);">Click Me!</button>
function buttonClick(e) {
alert('button clicked');
e.preventDefault();
}
Introduce a onclick for textfield and use stoppropagation method for a event. for ex ,
textfield.onclick = function(e) {
e.stopPropagation();
}
Another alternate is to use <div onclick="function()"> instead of <a> tag for what you think to achieve

Trouble making searchfield on click show button and hide when it closes

I am trying to show the submit button when I click on the search field and I also am trying to hide it when the field closes (the is form located in the main navigation bar)...
This is my code :
$(document).ready(function(){
$("#search-click").click(function(){
$(".search-form .search-submit").css("display" , "block");
});
});
It's not working at all...this is my link : http://dev.pixstreammedia.com.s150147.gridserver.com/system/
Try this:
http://jsfiddle.net/5UJ5U/1/
HTML:
<form>
<input type="search" class="searchclick" placeholder="search">
<input type="submit" class="sub" value="search">
</form>
JS:
$(".sub").hide();
$(document).ready(function(){
$(".searchclick").click(function(){
$(".sub").fadeToggle('fast');
});
});
1.You are not showing the right id : your button has id : search-submit-button and you display block the other element but not this id, so the solution is to add #search-submit-button to your display block function.
2.As for the hiding you could do an mouseleave, to class: search-form then hide the button.
It's working the button is just tucked underneath. Also in the console the $ isn't assigned to jQuery, so I had manually use your snippet with jQuery directly.
jQuery(".search-form .search-submit").css("display" , "block");
Type that into your js console to see the button is there, but you only see a small portion of it.

Categories

Resources