How to change display none input inside form? - javascript

I have a button this name is manuel. When I click this button I want to change display:none property. Actually, its works but my element inside a form. When I click button form posted. I can't stop the post.
<div class="form-group">
<input type="text">
<button onclick="myFunction()" class="btn btn-primary btn-sm">Manuel</button><br>
<input type="text" style="display:none;" id="hide1">
</div>
function myFunction() {
document.getElementById("hide1").style.display = "block";
}
How to create input without form post?

Just change button type="submit" to type="button", so you can do display: none function and if you want to submit the form you can do it with javascript.

Related

hiding div on load and displaying after button click

im currently learning css/js/php
everytime i click the button it shows the div by split second and the hides it again immediately
can someone help
this is the part of the code that im talking about
function showError() {
document.getElementById('error').style.display = "block";
}
<form>
<input type="password">
<div id="error" style="display: none;">Invalid Password</div>
<br/>
<button type="submit" onclick="showError()">LOG IN</button>
</form>
<form>
<input type="password">
<div id="error" style="display: none;">Invalid Password
</div>
<button type="button" onclick="return showError()">LOG IN</button>
</form>
<script>
function showError(){
document.getElementById('error').style.display="block";
}
</script>
There are couple of mistakes first the span tag should be removed since its not closed properly and div should be closed correctly and button should be outside the div tag and mostly importantly button type should not be submit it should be button if its submit the form will be submitted and page will reload as a result it will show the div again

Firing a form submit when completion is clicked on places autocomplete [duplicate]

I have a form with id theForm which has the following div with a submit button inside:
<div id="placeOrder"
style="text-align: right; width: 100%; background-color: white;">
<button type="submit"
class='input_submit'
style="margin-right: 15px;"
onClick="placeOrder()">Place Order
</button>
</div>
When clicked, the function placeOrder() is called. The function changes the innerHTML of the above div to be "processing ..." (so the submit button is now gone).
The above code works, but now the problem is that I can't get the form to submit! I've tried putting this in the placeOrder() function:
document.theForm.submit();
But that doesn't work.
How can I get the form to submit?
Set the name attribute of your form to "theForm" and your code will work.
You can use...
document.getElementById('theForm').submit();
...but don't replace the innerHTML. You could hide the form and then insert a processing... span which will appear in its place.
var form = document.getElementById('theForm');
form.style.display = 'none';
var processing = document.createElement('span');
processing.appendChild(document.createTextNode('processing ...'));
form.parentNode.insertBefore(processing, form);
It works perfectly in my case.
document.getElementById("form1").submit();
Also, you can use it in a function as below:
function formSubmit()
{
document.getElementById("form1").submit();
}
document.forms["name of your form"].submit();
or
document.getElementById("form id").submit();
You can try any of this...this will definitely work...
I will leave the way I do to submit the form without using the name tag inside the form:
HTML
<button type="submit" onClick="placeOrder(this.form)">Place Order</button>
JavaScript
function placeOrder(form){
form.submit();
}
You can use the below code to submit the form using JavaScript:
document.getElementById('FormID').submit();
<html>
<body>
<p>Enter some text in the fields below, and then press the "Submit form" button to submit the form.</p>
<form id="myForm" action="/action_page.php">
First name: <input type="text" name="fname"><br>
Last name: <input type="text" name="lname"><br><br>
<input type="button" onclick="myFunction()" value="Submit form">
</form>
<script>
function myFunction() {
document.getElementById("myForm").submit();
}
</script>
</body>
</html>
HTML
<!-- change id attribute to name -->
<form method="post" action="yourUrl" name="theForm">
<button onclick="placeOrder()">Place Order</button>
</form>
JavaScript
function placeOrder () {
document.theForm.submit()
}
If your form does not have any id, but it has a class name like theForm, you can use the below statement to submit it:
document.getElementsByClassName("theForm")[0].submit();
I have came up with an easy resolve using a simple form hidden on my website with the same information the users logged in with. Example: If you want a user to be logged in on this form, you can add something like this to the follow form below.
<input type="checkbox" name="autologin" id="autologin" />
As far I know I am the first to hide a form and submit it via clicking a link. There is the link submitting a hidden form with the information. It is not 100% safe if you don't like auto login methods on your website with passwords sitting on a hidden form password text area...
Okay, so here is the work. Let’s say $siteid is the account and $sitepw is password.
First make the form in your PHP script. If you don’t like HTML in it, use minimal data and then echo in the value in a hidden form. I just use a PHP value and echo in anywhere I want pref next to the form button as you can't see it.
PHP form to print
$hidden_forum = '
<form id="alt_forum_login" action="./forum/ucp.php?mode=login" method="post" style="display:none;">
<input type="text" name="username" id="username" value="'.strtolower($siteid).'" title="Username" />
<input type="password" name="password" id="password" value="'.$sitepw.'" title="Password" />
</form>';
PHP and link to submit form
<?php print $hidden_forum; ?>
<pre>Forum</pre>

automatically trigger one of the submit buttons in the form

I have a form as follows:
<form name="dummyform" id="dummyform">
<input type="text" name="dummyname">
<input type="submit" name="save_as_draft" id`="save_as_draft">
<input type="submit" name="send" id="send" hidden>
<button name="Dummysend" id="Dummysend">SEND DUMMY</button>
</form>
I want to trigger only the button with id send automatically when I click on the button with id Dummysend. I can do this by doing this JavaScript code:
document.getElementById("dummyform").submit();
The problem is that there are two submit buttons in this form. How can I only trigger the submit button with id send?
By input name, ID, context...
For example:
document.getElementById("send").click();
Watch out for your HTML too it has some syntax errors:
The 'action' attribute is required for elements.
'id`' is not a valid attribute of the element.

angular ng-if automaticly sends a form when true

I have a angular js form and a button that, if pressed, shows the login fields (2 inputs for username and password, and 1 submit button) and another button that hides it.
I've written this simple code below that uses the ng-if directive. it is working fine only problem that after the use press on show login, the div is being shown but the form is being submitted automaticly (without the user press on the submit button).
someone knows why this is happening and how to fix it?
thanks
<form name="loginForm" width="70%">
<br>
<button ng-click="NewConversation=true" >show login</button>
<button ng-click="NewConversation=false" >hide login</button>
<br><br>
<div ng-if="NewConversation">
<input autocomplete="off" name="name" ng-model="name" required placeholder="Name">
<br>
<input autocomplete="off" name="room" ng-model="room" required placeholder="Room">
<br><br>
<button ng-click="updateMsg({name: name,room: room})">Start Talking!</button>
</div>
</form>
Every button inside form tag has default behavior - submit, to prevent it add type="button" to every button inside the form tag.
<button type="button" ng-click="NewConversation=true" >show login</button>
This should help
show login
this will prevent it from submitting automatically

HTML/JS Form being submitted twice

I am using node.js/express to create a webpage.
I currently have a form with some input and a submit button which is trigger by the click of another button currently on the page
This is the code for my form:
<form name= "form" id="form-id" action="http://localhost:1337/process_post" method="POST">
<input type="hidden" name="hiddentext" id="textarea"/>
<input hidden type="submit" name="submitbutton" id="submit_button"/>
</form>
This is my button (which triggers the submit for the form to be clicked during the onclick event)
<INPUT type="button" id="button-id" value="Save" onclick="this.disabled=true;load_page('form-id')" />
This is my JS script to click the submit button
function load_page(formId){
document.getElementById("submit_button").click();
}
The issue I have is that the form is being submitted twice. I am unsure why this happens and how to fix the issue. Any tips?
You need to return false in your onclick attribute so as to prevent the default action, which is to submit the form (which you're already doing). Like this:
<INPUT type="button" id="button-id" value="Save" onclick="this.disabled=true;load_page('form-id');return false;" />

Categories

Resources