I have a html form inside the table and i want to make it disappear after the user submits the form
Form:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<tr>
<td colspan="3">
<h6>Have Discount Coupon? Apply it here...</h6>
</td>
<td>
<div id="form">
<form class="coupon" method="post">
<input type="text" name="coupon" placeholder="Enter Coupon Code" autocomplete="off">
<input type="submit" name="coupon" value="Apply Coupon">
</form>
</div>
</td>
</tr>
<script type="text/Javascript">
$('#form').submit(function() {
$(this).hide();
});
</script>
After the submission, the form is still visible and nothing happening.
The problem is the selector:
$('#form')
The <form> element does not have the attribute id="form" — (that's the <div id="form"> - not a form and therefore not submittable) — all you need to do is target the actual <form> element. Change your code to this:
$('form').submit(function(e) { //NOTE: Removed "#"
e.preventDefault();
$(this).hide();
})
And it will work:
$('form').submit(function() {
$(this).hide();
})
<script src="https://code.jquery.com/jquery-3.3.1.js"></script>
<tr>
<td colspan="3">
<h6>Have Discount Coupon? Apply it here...</h6>
</td>
<td>
<div id="form">
<form class="coupon" method="post">
<input type="text" name="coupon" placeholder="Enter Coupon Code" autocomplete="off">
<input type="submit" name="coupon" value="Apply Coupon">
</form>
</div>
</td>
</tr>
You have to prevent the default action first in order to hide the form using event.preventDefault()
Further if you're working on a commercial level and you want your form to be submitted without redirection, then you can use XHR request
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<tr>
<td colspan="3">
<h6>Have Discount Coupon? Apply it here...</h6>
</td>
<td>
<div id="form">
<form class="coupon" method="post">
<input type="text" name="coupon" placeholder="Enter Coupon Code" autocomplete="off">
<input type="submit" name="coupon" value="Apply Coupon">
</form>
</div>
</td>
</tr>
<script type="text/Javascript">
$('#form').submit(function(event) {
event.preventDefault();
// ... XHR request to submit form
$(this).hide();
});
</script>
There is a Problem in the approach that You use.Each time you run click the submit button in the page your page gets reloaded **this will hide the form when you click and again render the whole page from the begining. because of that you want be able to get what you want.Instead try to send data using Ajax by having a button rather than using the default form submission approach
Related
I have made a html form to take inputs from user. My sample code is given below:
<form class="form-main" action="../php/additem.php" method="post" enctype="multipart/form-data">
<input type="hidden" name="what" value="faculty" />
<div class="form-item">
<div class="form-left">
<label><big>Name:</big></label>
</div>
<div class="form-right">
<input class="txtbox" type="text" name="facname" id="fac_name" size="20" required >
</div>
</div>
<div class="form-item">
<div class="form-left">
<label><big>Education:</big></label>
</div>
<div class="form-right">
<input class="txtbox" type="text" name="educn" id="fac_edu" size="20" required >
</div>
</div>
<div id="buttons">
<button class="greenbtn" type="submit" name="btn-upload" value="Add Now" id="add_fac" >Submit</button>
<input class="orangebtn" type="reset" value="Clear" id="clear_fac" />
</div>
</form>
I want to add a feature that, after the submit button being clicked it will be disappeared so that user can't double click on that. Is it possible? How will I do this?
Two easiest ways would either be with javascript and have
<form class="form-main" action="../php/additem.php" method="post" enctype="multipart/form-data" onsubmit="hideSubmit()">
<script>
function hideSubmit(){
document.getElementById("buttons").style.display = "none";
}
</script>
or jquery
<script>
$(function(){
$('.form-main').on('submit', function(){
$('#buttons').hide();
});
});
</script>
after the submit button being clicked it will be disappeared so that user can't double click on that.
You've literally described how to do it.
document.getElementById('test-button').addEventListener('click', function () {
this.remove()
})
<button id="test-button">Click me!</button>
I suggest reading about setting up events.
I am try to display under my form the new value.
<form>
<h2>AES Encryption</h2>
<table>
<tr>
<td>
<label for="inputValue">Text to encrypt</label>
</td>
<td>
<input type="text" id="inputValue" size="50" name="inputValue" />
</td>
</tr>
<tr>
<td>
<label for="inputPassword">Password:</label>
</td>
<td>
<input type="text" id="inputPassword" size="50" name="inputPassword" />
</td>
</tr>
<tr>
<td>
<input type="submit" value="Verschlüsseln" id="submitButton" onclick="encryptAES()"/>
</td>
</tr>
</table>
<div id="afterPressed" hidden="true">
<h3 id="resultTitle"></h3>
<p id="result"></p>
<br>
<h3>Code</h3>
Download
</div>
</form>
and my Script:
function encryptAES() {
var value = document.getElementById("inputValue").value;
var password = document.getElementById("inputPassword").value;
var encrypted = base64toHEX(CryptoJS.AES.encrypt(value, password));
document.getElementById("afterPressed").removeAttribute("hidden");
document.getElementById("resultTitle").innerHTML = "Result";
document.getElementById("result").innerHTML = encrypted;
}
When I click the button the code works for 1 second and then refresh the form as null
I want to show the result in the div result tag, but the page is updated and everything disappears and the code is hidden again.
Your form is submitting, so the values are displayed in the browser and then the page reloads.
You can either set the onsubmit property of the form like this:
<form onsubmit="return false;">
Or you can use an <input type="button"> or <button> instead of the <input type="submit"> that is... well, submitting the form.
Update your form tag with <form onsubmit="return false;">. This will prevent the page from getting submitted.
I can't figure out how to prevent default behaviour of accordion when I click on an icon which is a submit of POST form.
<tr data-toggle="collapse" data-target="#record_309" class="accordion-toggle even">
<td>
</td>
...
<td class="action">
<div class="col-lg-12">
<form class="col-lg-3" action="/dashboard/settings/" method="get">
<input type="hidden" name="product_id" value="309">
<input style="max-width:15px;" type="image" onclick="preventAccordion(event);" src="/static/icons/alarm-1.png">
</form>
<form class="col-lg-3" action="/products/reset/" method="post"><input type="hidden" name="csrfmiddlewaretoken" value="<CSRFTOKEN>">
<input type="hidden" name="product_id" value="309">
<input style="max-width:15px;" type="image" src="/static/icons/restart.png">
</form>
</div>
</td>
</tr>
As you can see, in the first form of the last column, I'm trying to call preventAccordion(e) function to prevent showing the accordion. The problem is that preventDefault(event) is preventing form submit.
<script>
window.preventAccordion = function(e) {
e.preventDefault();
}
</script>
Do you know how to prevent accordion from toggling when user clicks on this icon?
Use e.stopPropagation() instead.
Note that this will not prevent other handlers on the same element
from running.
http://api.jquery.com/event.stopPropagation
Example: http://jsfiddle.net/1o78c2os/2/
As I have almost no knowledge of HTML and I had no idea where to ask, I decided to come here. I am trying to edit HTML Weebly web editor generated and add a "contact us" form which will direct messages to my email. I found some source code on the web and tried to incorporate it with the form Weebly generated for me, however I have not had any success. My code is below:
<div>
<form enctype="multipart/form-data" name="contactform" method="post" action="" onsubmit="myFunction()">
<div id="466589977852666939-form-parent" class="wsite-form-container" style="margin-top:10px;">
<ul class="formlist" id="466589977852666939-form-list">
<h2 class="wsite-content-title" style="text-align:left;">SEND US AN EMAIL</h2>
<div><div class="wsite-form-field" style="margin:5px 0px 5px 0px;">
<label class="wsite-form-label" for="Email_Address">Email <span class="form-required">*</span></label>
<div class="wsite-form-input-container">
<input id="Email_Address" class="wsite-form-input wsite-input wsite-input-width-370px" type="text" name="Email_Address" maxlength="100" />
</div>
<div id="instructions-270584481949385592" class="wsite-form-instructions" style="display:none;"></div>
</div></div>
<div><div class="wsite-form-field" style="margin:5px 0px 5px 0px;">
<label class="wsite-form-label" for="Your_Message">Your Message <span class="form-required">*</span></label>
<div class="wsite-form-input-container">
<textarea id="Your_Message" class="wsite-form-input wsite-input wsite-input-width-370px" name="Your_Message" style="height: 200px"></textarea>
</div>
<div id="instructions-137987539423347553" class="wsite-form-instructions" style="display:none;"></div>
</div></div>
</ul>
</div>
<div style="text-align:left; margin-top:10px; margin-bottom:10px;">
<input type='submit' style='position:absolute;top:0;left:-9999px;width:1px;height:1px' /><a class='wsite-button' ><span class='wsite-button-inner'>Submit</span></a>
</div>
</form>
<script>
function myFunction() {
alert("The form was submitted");
}
</script>
</div>
It obviously has something to do with the button click not being registered, so I made my own much simpler form to test it out.
<form name="contactform" method="post" action="" onsubmit="myFunction()">
<table width="400px" class="contactform">
<tr>
<td valign="top">
<label for="Email_Address" class="required">Email Address<span class="required_star"> * </span></label>
</td>
<td valign="top">
<input type="text" name="Email_Address" id="Email_Address" maxlength="100" style="width:230px">
</td>
</tr>
<tr>
<td valign="top">
<label for="Your_Message" class="required">Your Message<span class="required_star"> * </span></label>
</td>
<td valign="top">
<textarea style="width:230px;height:160px" name="Your_Message" id="Your_Message" maxlength="2000"></textarea>
</td>
</tr>
<tr>
<td colspan="2" style="text-align:center" >
<br /><br />
<input type="submit" value=" Submit Form " style="width:200px;height:40px">
<br /><br />
</td>
</tr>
</table>
</form>
<script>
function myFunction() {
alert("The form was submitted");
}
</script>
And in this case, the function actually fired! So now I am unsure as to what the difference is between my first example, and my second much simpler piece of code. Could anyone help me out?
You could add an onclick() to the submit <a> tag to submit the form.
Like so, change...
<a class='wsite-button' ><span class='wsite-button-inner'>Submit</span></a>
To...
<a class="wsite-button" onclick="document.contactform.submit(); return false;"><span class="wsite-button-inner">Submit</span></a>
This is because in your simplified example you used a Submit button.
Where as in you original form the button is moved out of the screen using CSS and only the text 'Submit' is left there. And your function triggers when the input is clicked, not the text.
This is the CSS style attributes that are hiding the button:
position: absolute;
top: 0;
left: -9999px;
width: 1px;
height: 1px;
Replace this:
<input type="submit" style="position:absolute;top:0;left:-9999px;width:1px;height:1px">
By this:
<input type="submit" />
The button will reappear and clicking on it will trigger your message box.
Here is the JSFiddle demo
I am dynamically creating a table which includes some dynamically generated buttons. I have done the same thing before using POST and it worked. Now I'm using AJAX so I need to get the value of the hidden form element via the click event. But, it always gives me the first value (first row/form).
Below is example of stripped down code.
Must I have a different name for each button? If so, how would I bind all those to a click event?
<pre><code>
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="assets/js/jquery.min.js"></script>
<script type="text/javascript" charset="utf-8">
$(document).ready(function () {
$(document).on("click", "input[name='vsu']", function(event){
console.log('sliste'+$("input[name='sliste']").val());
event.preventDefault();
});
});
</script>
</head>
<body>
<table id="slist">
<tbody>
<tr>
<td>user1</td>
<td>
<form>
<input type="hidden" name="sliste" value="1">
<input name="vsu1" type="submit" value="view">
</form>
</td>
</tr>
<tr>
<td>user2</td>
<td>
<form>
<input type="hidden" name="sliste" value="2">
<input name="vsu2" type="submit" value="view">
</form>
</td>
</tr>
</tbody>
</table>
</body>
</html>
</pre></code>
You need to find the input element which is the previous sibling of the clicked button so
$(document).ready(function () {
$(document).on("click", "input[name='vsu']", function (event) {
console.log('sliste' + $(this).prev("input[name='sliste']").val());
event.preventDefault();
});
});
When you use $("input[name='sliste']") as the selector it will find all the input elements with the given name then when you use .val() as a getter it will return the value of the first element in the given set of elements.
$(document).ready(function() {
$(document).on("click", "input[name='vsu']", function(event) {
console.log('sliste' + $(this).prev("input[name='sliste']").val());
event.preventDefault();
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<table id="slist">
<tbody>
<tr>
<td>user1</td>
<td>
<form>
<input type="hidden" name="sliste" value="1">
<!-- changed the button type since the code snippet does not allow submit requests-->
<input name="vsu" type="button" value="view">
</form>
</td>
</tr>
<tr>
<td>user2</td>
<td>
<form>
<input type="hidden" name="sliste" value="2">
<input name="vsu" type="button" value="view">
</form>
</td>
</tr>
</tbody>
</table>