Develop Reference

Hide form after submit JQuery

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

html javascript chage the value of my <div> but refresh the page for 1 second and then is all null

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.

Show values on POST

Working on a really simple form for a district site. I have a really simple form in PHP.
<form method="post">
<fieldset>
<legend>Enter Age and Weight</legend>
<label>Age:</label>
<input type="text" name="age" value="<?php echo #$_POST['age'] ?>">
<label>weight:</label>
<input type="text" name="weight">
<div>
<button class="btn" type="submit" name="action" value="enter">Enter</button>
</div>
</fieldset>
</form>
What I am trying to do is when the user presses the enter button, I want to alert the user of what they have entered.
This is what I have so far in my HTML.
<body onload="document.forms[0].submit()">
<form action="/index.php" onsubmit="" method="POST">
<script>
alert(document.getElementsByName("age").value);
</script>
</form>
</body>
However, I keep seeing "undefined". I am assuming that is happening because on page load my script is being run instead of when the user presses the submit button. Kind of confused how to just do a simple alert. Appreciate any help.

You must insert your code in a function that you must attach to a event handler like onsubmit, something like this:
HTML:
<form method="post" onsubmit="showData();">
JAVASCRIPT:
function showData() {
alert(document.getElementsByName("age")[0].value);
}
I've inserted [0] in your Javascript code because document.getElementsByName returns you an Array of elements, in your case, this Array, obviously contains only one value that is retrievable on the index 0 (first index of any array).

<form method="post" id="myform">
<fieldset>
<legend>Enter Age and Weight</legend>
<label>Age:</label>
<input type="text" name="age" value="<?php echo #$_POST['age'] ?>" id="age">
<label>weight:</label>
<input type="text" name="weight">
<div>
<button class="btn" type="button" name="action" value="enter" onclick="alert(document.getElementById('age').value);document.getElementById('myform').submit()">Enter</button>
</div>
</fieldset>
</form>
Is this what you want?

Can't pass a text area value to my form

I'm currently re-designing a page on my site that allows registered users to send messages to the administrators. All the code I'm using is already fully functional on the other page but after moving everything across, it has stopped working, which has baffled me.
<textarea name="content" id="msgs" class="convo" ></textarea>
The text area is as simple as it gets, the form is wrapped around TR tags.
I know the form is working because I also submit to the form the date/time and the email address' of the sender and receiver. The form executes 'compose.php', writes to the database successfully and re-directs back to the customer's profile. The problem is that the "new" message is blank. Everything was sent to the form apart from the contents of the text area.
If I use a plain text area then everything works, so the problem has to be the 'WYSIWYG Content Editor' that I apply to the text area, even though it works fine on the other page?
bkLib.onDomLoaded
(
function()
{
new nicEditor({buttonList : ['bold','italic','underline','left','center','right','ol','ul','fontFamily','fontSize','fore color','link','unlink']}).panelInstance('msgs');
}
);
Does anyone have any idea where I can start? I've been troubleshooting this for a good few hours and it's starting to get the best of me! If you need any other snippets of code, let me know.
EDIT
Maybe this will help...
<textarea name="content" id="msgs" class="convo" >TEST MESSAGE</textarea>
When the page loads, "TEST MESSAGE" is written to the text area. If I submit it, the value is passed to the form and then to the database etc... But if I remove it and type my own words, nothing is sent across?

I have managed to fix the problem!
The old code was:
<form name="send" id="sndmsg" method="post" action="compose.php">
<tr>
<td width="90%" class="tab"> Compose New Message</td>
</tr>
<tr>
<td>
<textarea name="content" id="msgs" class="convo" ></textarea>
</td>
</tr>
<tr>
<td>
<input name="user_s" type="hidden" id="user_s" value="<?PHP echo $user;?>" />
<input name="user_r" type="hidden" id="user_r" value="<?PHP echo $email;?>" />
<input name="fname" type="hidden" value="<?PHP echo $fullname;?>" />
<input type="image" src="/send.png" />
</td>
</tr>
</form>
Which was clearly, not working. The new code does work, which is the following:
<tr>
<td width="90%" class="tab"> Compose New Message</td>
<form name="send" id="sndmsg" method="post" action="compose.php">
<textarea name="content" id="msgs" class="convo" ></textarea>
<input name="user_s" type="hidden" id="user_s" value="<?PHP echo $user;?>" />
<input name="user_r" type="hidden" id="user_r" value="<?PHP echo $email;?>" />
<input name="fname" type="hidden" value="<?PHP echo $fullname;?>" />
<input type="image" src="/send.png" />
</form>
</td>
</tr>

Get elements from a div within a form JS

How can I get the input elements form a certain div inside a form , not from all divs?
I want to use JAVASCRIPT not JQUERY.
I tried to use like this discountForm.oldDivIdName.elements[i].value.length, but its not working.
UPDATE:
I have a form like this,
<form action="action.php" method="post">
<div id='div1'>
<input type="text" id="id[]" />
</div>
<div id='div2'>
<input type="text" id="id[]" />
</div>
<input type="submit" name="submit" />
</form>
Both text fields id are named the same and I want to get the value of the text field of div named div1 and not from div2, how can I do that.
Any help?

If the input elements have id's, you can do something like
var value = document.getElementById('div1').children[0].value;
where you have
<form action="action.php" method="post">
<div id="div1">
<input type="text" id="id" />
<input type="submit" name="submit" />
</div>
</form>