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);
Related
I need to open from the index.php receipt.php and hide the button as receipt is already made, ie. two events in one submit button. This hides the button but the submit doesn't trigger.
<action =receipt.php target="_blank"><input type="submit" value="Receipt" onClick="hideme();this.form.submit()" id="abc"> ... *rest of the form inputs* </form>
<script>
function hideme() {
,document.getElementById("abc").innerHTML = "";
}
</script>
If you use the hideme function to submit the form in addition to hiding/modifying the submit button you could try like this:
Add an event argument to the inline onclick function call - that allows the function to access all the properties of the event and the important one here is the target
This should disabled the button and modify the value AND submit the form to a new window with a single event..
You could uncomment the line that removes the button as alternative or simply set the button's value as empty.
function hideme(e) {
e.preventDefault();
e.target.parentNode.submit();
//e.target.parentNode.removeChild(e.target);//to remove the button completely or...
e.target.value='Submitted';
e.target.disabled=true;
}
<form action='receipt.php' target='_blank'>
<input type="submit" value="Receipt" onclick="hideme(event);" />
<!--
*rest of the form inputs*
-->
</form>
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/
i need to append a child control to html element using javascript, the problem is that the child is appear when call the function and disappear directely the child must be in a form tag
this is the code when i append child to the html elemet
<html>
<body>
<form >
<button onclick="create()">Create Heading</button>
</form>
<script>
function create() {
var h1 = document.createElement('h1');
h1.textContent = "New Heading!!!";
h1.setAttribute('class', 'note');
document.body.appendChild(h1);
}
</script>
</body>
</html>
the element h1 is added to the layout appear and disappear immediately but when i remove the <form> it works perfectly
It looks like the form element is submitting when you press the button, refreshing the page and making the header disappear.
You should probably ask yourself: should I really need a form? Are there some inputs that should be handled by the server?
If you really need it, then you can try to prevent the form from submitting
Also, as pointed out in this SO Question you can prevent the button to submit the form by specifying its type as 'button'.
Agreeing with #Drago96 Form submits and page refreshes.
What is the point of the form. if you are only appending an element
<body>
<button onclick="create()">Create Heading</button>
<script>
function create() {
var h1 = document.createElement('h1');
h1.textContent = "New Heading!!!";
h1.setAttribute('class', 'note');
document.body.appendChild(h1);
}
</script>
</body>
</html>
In my page I have 2 forms. he jQuery scripts disables both buttons of the forms, until one dropdown value is selected as you can see here http://jsfiddle.net/baW53/
The problem is that I need to activate only the button where the dropdown value is changed/selected. For now if I choose a value on the first form, it activates the button of the second form also. But it has to activate only the same form's button.
How to do this?
var jq = $.noConflict();
jq(document).ready(function (){
validate();
jq('select').change(validate);
});
function validate(e){
var validation = true;
jq('select').each(function(){
if(jq(this).val().length>0)
{
validation = false;
}
});
if ( validation ) {
jq('.submit').prop('disabled', true);
} else {
jq('.submit').prop('disabled', false);
}
}
<form name="forma" method="POST" action="used-results.php" id="apliforma">
dropdown menus
<button type="submit" class="btn btn-primary submit" id='submit' >submit</button>
</form>
<form name="forma2" method="POST" action="used-results.php" id="sinthetiforma">
dropdown menus
<button type="submit" class="btn btn-primary submit" id='submit2' >submit</button>
</form>
You have to use selectors like others say. Here's the modification to your jsfiddle: http://jsfiddle.net/baW53/1/
Basically, if its the initial call, we change the properties of all the buttons, i.e, buttons with class submit else we find the button which is a sibling of the dropdown and use its id.
Here's the relevant portion:
if (e) {
var btn = "#" + jq(this).siblings('button').attr('id');
} else {
var btn = ".submit";
}
You are selecting every submit button with this selector jq('.submit') you need to make it more specific. There are any number of ways to do this.
One way is to get the select control from your event object then write a pattern to go to it's parent form and then down to the select button.
Getting the closest form:
jQuery find parent form
jq(ev).closest("form").find(".submit")
I'm not sure that ev is right, you might have to dig the control out of the event.
You can find specific elements with more complex selectors. For instance, if you gave your forms id="forma" and id="formb" you could do jq(#forma .submit) to get the one button.
If you stick with the name attribute, I believe the selector would be jq([name="forma"] .submit) or something close to that.
First I have created a <div>....</div> which is hidden on pageload using javascript function. Then I have created an empty textbox using forms. Now when anyone clicks a button then the whole content of the hidden <div>....</div> should be loaded in the textbox in the form. What should be code for this?
maybe this way
<div id="hiddendiv"><strong>some</strong> content</div>
<button onclick="copyfunction();">click me</button>
<textarea id="textarea"></textarea>
<script>
function copyfunction() {
var textarea = document.getElementById('textarea');
var hiddendiv = document.getElementById('hiddendiv');
textarea.value = hiddendiv.innerText;
}
</script>
tested, it works
$("#textbox_id").val($("#div_id").html());