i am trying to change text of a span using onclick of javascript but its not working . Its very simple stuff but i am not sure why its not working
<div class="subscribe_block">
<h3><span>Stay Connected</span></h3>
<form method="post" action="" name="subscribeForm">
<span id="message"></span>
<p><input type="text" id="name" placeholder="Your Name" /></p>
<p><input type="text" id="email" placeholder="Email Id" /></p>
<p><input type="submit" value="subscribe" onClick='document.getElementById("message").value = "Thank you for subscribing";return false;' /></p>
</form>
</div>
<div class="subscribe_block">
<h3><span>Stay Connected</span></h3>
<form method="post" action="" name="subscribeForm">
<span id="message"></span>
<p><input type="text" id="name" placeholder="Your Name" /></p>
<p><input type="text" id="email" placeholder="Email Id" /></p>
<p><input type="submit" value="subscribe" onClick='document.getElementById("message").innerHTML = "Thank you for subscribing";return false;' /></p>
</form>
</div>
Use 'innerHTML' instead of 'value'.
On the onclick function, try changing,
'document.getElementById("message").value = "Thank you for subscribing";return false;'
to
'document.getElementById("message").innerHTML = "Thank you for subscribing";return false;'
using InnerHtml will set your Span text but as it will post back so you will be unable to see anything. Remove form tag then you will be able to see it.
<div class="subscribe_block">
Stay Connected
<span id="message"></span>
<p><input type="text" id="name" placeholder="Your Name" /></p>
<p><input type="text" id="email" placeholder="Email Id" /></p>
<p><input type="submit" value="subscribe" onClick='document.getElementById("message").innerHTML= "Thank you for subscribing";return false;' /></p>
Just change value to innerHTML as
<div class="subscribe_block">
<h3><span>Stay Connected</span></h3>
<form method="post" action="" name="subscribeForm">
<span id="message"></span>
<p><input type="text" id="name" placeholder="Your Name" /></p>
<p><input type="text" id="email" placeholder="Email Id" /></p>
<p><input type="submit" value="subscribe" onClick='document.getElementById("message").innerHTML = "Thank you for subscribing";return false;' /></p>
</form>
</div>
Related
Forgive me I
function addText() {
var input = document.getElementById('something');
input.value = input.value +'URGENT PLEASE READ';
}
<form name="frm1" action="?" onsubmit="addText()">
<p> Subject </p><input type="text" name="Subject" size="40" id="something" onsubmit="addText()"maxlength="30" />
<p>Message</p>
<textarea id="angryarea" name="Message" cols="100" rows="20"></textarea>
<input type="submit" value="MAKE URGENT" id="URGENT"/>
</form>
am very new to JS and I am attempting to create a button that adds the words "URGENT PLEASE READ" to the subject of a message; however, the following code simply clears my subject head. Thank you in advance,
I'm not sure if you wanted a separate button for make urgent and submit - if so you can do it like this
function addText() {
var input = document.getElementById('something');
input.value = input.value + 'URGENT PLEASE READ';
}
<form name="frm1" action="?" onsubmit="addText()">
<p> Subject </p><input type="text" name="Subject" size="40" id="something" maxlength="30" />
<p>Message</p>
<textarea id="angryarea" name="Message" cols="100" rows="10"></textarea>
<button type="button" id="URGENT" onclick="addText()">MAKE URGENT</button>
<input type="submit" value="SUBMIT" id="SUBMIT"/>
</form>
Use proper event handlers on the forms submit event, and prevent the form from submitting, otherwise the page just reloads, and the changed value is lost.
document.getElementById('myForm').addEventListener('submit', function(e) {
e.preventDefault();
var input = document.getElementById('something');
input.value = input.value + 'URGENT PLEASE READ';
});
<form name="frm1" action="?" id="myForm">
<p> Subject </p>
<input type="text" name="Subject" size="40" id="something" maxlength="30" />
<p>Message</p>
<textarea id="angryarea" name="Message" cols="100" rows="20"></textarea>
<input type="submit" value="MAKE URGENT" id="URGENT" />
</form>
Why not use a Checkbox?
<form name="frm1" action="?">
<p> Subject </p>
<input type="text" name="Subject" size="40" id="something" maxlength="30" />
<p>Message</p>
<textarea id="angryarea" name="Message" cols="50" rows="5"></textarea>
<br><br>
<input type="checkbox" name="Urgent" /> Make urgent
<br><br>
<input type="submit" value="Submit"/>
</form>
Im creating a form for a project and I have to set a validation rule so that if nothing is entered for the name then an alert will appear telling the user that a "Name must be filled out" I know this is probably a silly rookie mistake but I'm not quite sure why Its not working as I'm new to javascript.
I haven't included the CSS as its unnecessary. I'm also not posting the information to anything yet.
<head>
<script>
function validateForm() {
var x = document.forms["myForm"]["fname"].value;
if (x == "") {
alert("Name must be filled out");
return false;
</script>
</head>
<body>
<div class="form_settings">
<form name="MyForm" onSubmit="return validateForm()"
method="post">
<p><span>Name</span><input class="contact" type="text"
name="fname" value="" /></p>
<p><span>Email Address</span><input class="contact" type="text"
name="your_email" value="" /></p>
<p><span>Re type Email Address</span><input class="contact"
type="text" name="your_email" value="" /></p>
<p><span>Message</span><textarea class="contact textarea"
rows="8" cols="50" name="your_enquiry"></textarea></p>
<p style="padding-top: 15px"><span> </span><input
class="submit" type="submit" name="contact_submitted" value="Submit" /></p>
</form>
</body>
Try this:
function validateForm() {
var x = document.getElementsByClassName("contact")[0].value;
if (x == "") {
alert("Name must be filled out");
}
return false;
}
<form name="MyForm" onsubmit="validateForm();">
<p><span>Name</span>
<input class="contact" type="text" name="fname" value="" />
</p>
<p><span>Name</span><input class="contact" type="text" name="fname" value="" /></p>
<p><span>Email Address</span><input class="contact" type="text" name="your_email" value="" /></p>
<p><span>Re type Email Address</span><input class="contact" type="text" name="your_email" value="" /></p>
<p><span>Message</span><textarea class="contact textarea" rows="8" cols="50" name="your_enquiry"></textarea></p>
<p style="padding-top: 15px"><span> </span>
<input class="submit" type="submit" value="submit" />
</p>
</form>
POST http method in my form does not work when I use JavaScript:
<form id="user" method="post"action="url" onsubmit="return false;">
<span>First Name:</span>
<input type="text" class="input" id="fname" name="fname" required>
<span>last Name:</span>
<input type="text" class="input" id="lname" name="lname" required>
<input class="button" type="submit" value="submit" onclick = "checkForm()">
</form>
However, it does seem to work when I do not use JavaScript:
<form id="user" method="post"action="url">
<span>First Name:</span>
<input type="text" class="input" id="fname" name="fname" required>
<span>last Name:</span>
<input type="text" class="input" id="lname" name="lname" required>
<input class="button" type="submit" value="submit">
</form>
How can I use JavaScript validations in my form and send the form to a given URL?
<form id="user" method="post"action="url" onsubmit="return checkForm();">
<!-- blah blah-->
<input class="button" type="submit" value="submit">
</form>
Thanks for your help; this is working fine now.
It is not submitting to server because onsubmit="return false;" tells the browser the validation failed and do not send to server. If onsubmit is not specified or returns true the data will be submitted to the specified url. The following code should work if the function checkForm() returns true when passing validation and returns false while failing validation.
<form id="user" method="post" action="url" onsubmit="checkForm()">
<span>First Name:</span>
<input type="text" class="input" id="fname" name="fname" required>
<span>Last Name:</span>
<input type="text" class="input" id="lname" name="lname" required>
<input class="button" type="submit" value="submit">
</form>
How can I make my form run a function when submit is clicked?
<form id="commentForm" name="comment">
<fieldset>
<label for="name">Name <span>(required)</span></label>
<input type="text" class="text" id="name" value="" />
<label for="email">Email <span>(will not be published) (required)</span></label>
<input type="text" class="text" id="email" value="" />
<label for="website">Website</label>
<input type="text" class="text" id="website" value="" />
<label for="message">Message <span>(required)</span></label>
<textarea id="message" class="textarea" rows="10"></textarea>
<input type="submit" name="submit" class="submit" id="submit_btn" value="Submit Comment" action="JavaScript: ajax_add_comment();">
</fieldset>
...
I am trying running the following function:
function ajax_add_comment () {
alert ("testing");
}
Use onclick attribute instead of action.
You could use jQuery, and use the .submit() function.
You can give the form an id and then attach the submit function to it.
Example:
<form id="execute"....
</form>
<script type="javascript">
$("#execute").submit(function(){
alert("i've submitted this form");
});
</script>
make sure you have included the jquery js file.
<script src="http://code.jquery.com/jquery.min.js" type="text/javascript"></script>
You can use the onsubmit event to execute JavaScript code when the form is submitted. For example:
<script>
function ajax_add_comment () {
alert ("testing");
}
</script>
<form id="commentForm" name="comment">
<fieldset>
<label for="name">Name <span>(required)</span></label>
<input type="text" class="text" id="name" value="" />
<label for="email">Email <span>(will not be published) (required)</span></label>
<input type="text" class="text" id="email" value="" />
<label for="website">Website</label>
<input type="text" class="text" id="website" value="" />
<label for="message">Message <span>(required)</span></label>
<textarea id="message" class="textarea" rows="10"></textarea>
<input type="submit" name="submit" class="submit" id="submit_btn" value="Submit Comment" onsubmit="ajax_add_comment();">
</fieldset>
Thank you!
I want to stay on the current page, if the "Name" input field is empty.
Right now, it shows the error message, and when you click ok, it still goes to the next page (contactcaptcha.php).
function notEmpty(elem, helperMsg){
if(elem.value.length == 0){
alert(helperMsg);
elem.focus();
return false;
}
return true;
}
<form id="action" action="contactcaptcha.php" method="post">
<fieldset>
<textarea id="message" name="Message" placeholder="What's on your mind?"></textarea>
<input id="Name" name="Name" placeholder="Enter your full name" type="text">
<input id="Email" name="Email" placeholder="Enter your email address" type="email">
<input type="submit" onclick="notEmpty(document.getElementById('Name'), 'Please enter your name')" name="submit" value="Send your message">
</fieldset>
try like so, returning your function at submit event of the form element
<form id="action" action="contactcaptcha.php" method="post"
onsubmit="return notEmpty(document.getElementById('Name'), 'Please enter your name')">
<fieldset>
...
<input type="submit" name="submit" value="Send your message">
</fieldset>
</form>
Misssing return keyword:
<input type="submit"
onclick="return notEmpty(document.getElementById('Name'), 'Please enter your name')"
name="submit" value="Send your message">
As you use HTML5 anyway, you might want to use the required attribute: http://www.w3schools.com/html5/att_input_required.asp
<form>
<input id="message" required>
<input type="submit" value="Submit">
</form>