I create a form and send request to other page with :
$(document).ready(function() {
$("#send").click(function() {
var text = $("#text").val();
var email = $("#email").val();
$("#exp").load("sendmail.php",{text:text,email:email});
});
});
and my form code :
<ul>
<li><input type="text" name="name" id="text" /></li>
<li><input type="text" name="email" id="email"/></li>
<button class="button" id="send" >send email</button>
<div id="exp" style="color:green;"></div>
</ul>
how i can hide submit button after send mail ?
jQuery:
$(document).ready(function() {
$("#send").click(function() {
var text = $("#text").val();
var email = $("#email").val();
$.post("sendmail.php",{text:text,email:email}, function(){
$('.form').hide();
});
});
});
Html:
<ul class="form">
<li><input type="text" name="name" id="text" /></li>
<li><input type="text" name="email" id="email"/></li>
<button class="button" id="send" >send email</button>
<div id="exp" style="color:green;"></div>
</ul>
Related
I have a web page associated with 3 <li> and each has its own onclick() function. By default, one of them is active. Now I have a form, if this form is submitted I want it to take me to one of the other two <li>.
In other words, I want it to remove the active class from the default one, and add it to one of the other two. How can I do that?
HTML:
<div class="container">
<ul class="editor-nav">
<li id="content-w" class="en-nav active">1. Add Status</li>
<li id="setting-w" name="setting-w" class="en-nav">2. Upload Image</li>
<li id="cover-w" class="en-nav">3. Upload Video</li>
</ul>
</div>
<div class="be-large-post-align" id="firstdiv">
<form class="" action="work.php" method="post">
<textarea id="special" name="post" rows="10" cols="80" placeholder="What's on your mind, <?=$_SESSION['name']?>?"></textarea>
<input type="submit" name="submitMe" class="buttons-navbar btn btn-primary" value="POST" /></form>
</div>
<div class="be-large-post-align" id="seconddiv" style="display:none;">
<form class="" action="work.php" method="post" enctype="multipart/form-data">
<!-- <label class="btn btn-primary" for="my-file-selector">
<input id="my-file-selector" type="file" multiple="multiple" style="display:none"
onchange="$('#upload-file-info').html(this.files[0].name)">
Button Text Here
</label>
<span class='label label-info' id="upload-file-info"></span> -->
Select Image Files to Upload:
<input type="file" name="files[]" multiple>
<textarea id="special" name="post2" rows="10" cols="80" placeholder="What's on your mind, <?=$_SESSION['name']?>?"></textarea>
<input type="submit" name="submitIt" class="buttons-navbar btn btn-primary" value="Upload" />
</form>
</div>
<div class="be-large-post-align" id="thirddiv" style="display:none;">this is working! </div>
JQuery:
<script src = "http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" > </script>
<script src = "http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.17/jquery-ui.min.js"> </script>
<script type = "text/javascript" >
$("#setting-w").on("click", function() {
$("#firstdiv").fadeOut(1, function() {
$("#seconddiv").fadeIn(1, function() {});
$("#thirddiv").fadeOut(1, function() {});
});
});
$("#content-w").on("click", function() {
$("#seconddiv").fadeOut(0.1, function() {
$("#firstdiv").fadeIn(0.1, function() {});
$("#thirddiv").fadeOut(0.1, function() {});
});
});
$("#cover-w").on("click", function() {
$("#seconddiv").fadeOut(0.1, function() {
$("#firstdiv").fadeOut(0.1, function() {});
$("#thirddiv").fadeIn(0.1, function() {});
});
});
</script>
Use data attribute to fade your div.
$('.editor-nav li').click(function(e) {
$('.editor-nav li').removeClass('active');
var data = $(this).data('myval');
if (data == "2" || data == "3") {
$(this).addClass('active');
var tstDiv = data - 1;
$(this).attr('disabled', true);
$(document).find($('*[data-val="' + data + '"]')).fadeIn();
$(document).find($('*[data-val="' + tstDiv + '"]')).fadeOut();
}
});
.active {
background-color: red;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.0/jquery.min.js"></script>
<div class="container">
<ul class="editor-nav">
<li data-myval="1" id="content-w" class="en-nav active">1. Add Status</li>
<li data-myval="2" id="setting-w" name="setting-w" class="en-nav">2. Upload Image</li>
<li data-myval="3" id="cover-w" class="en-nav">3. Upload Video</li>
</ul>
</div>
<div data-val="1" class="be-large-post-align" id="firstdiv">
<form class="" action="work.php" method="post">
<textarea id="special" name="post" rows="10" cols="80" placeholder="What's on your mind, <?=$_SESSION['name']?>?"></textarea>
<input type="submit" name="submitMe" class="buttons-navbar btn btn-primary" value="POST" /></form>
</div>
<div data-val="2" class="be-large-post-align" id="seconddiv" style="display:none;">
<form class="" action="work.php" method="post" enctype="multipart/form-data">
<!-- <label class="btn btn-primary" for="my-file-selector">
<input id="my-file-selector" type="file" multiple="multiple" style="display:none"
onchange="$('#upload-file-info').html(this.files[0].name)">
Button Text Here
</label>
<span class='label label-info' id="upload-file-info"></span> -->
Select Image Files to Upload:
<input type="file" name="files[]" multiple>
<textarea id="special" name="post2" rows="10" cols="80" placeholder="What's on your mind, <?=$_SESSION['name']?>?"></textarea>
<input type="submit" name="submitIt" class="buttons-navbar btn btn-primary" value="Upload" />
</form>
</div>
<div data-val="3" class="be-large-post-align" id="thirddiv" style="display:none;">this is working! </div>
After page submit if your page is reloaded page loose state. So set your value when page submit like:
localStorage.setItem('key', 'your form Number')
Get localStorage when page load like:
var formID = localStorage.getItem('key');
After that check for null before add class:
if (localStorage.getItem("key") != null) {
(".editor-nav ul li").eq(formID ).addClass("active"); // Check this one on page load
}
You can use removeClass() and addClass() if you wish to add/remove any class based on their id.
Example:
$("#setting-w").on("click", function(){
$("#content-w").removeClass('active');
$("#cover-w").removeClass('active');
$("#setting-w").addClass('active');
}
I'm trying to console log the entire form but the JavaScript Code is getting too long. Can anyone please help me how to follow DRY(Do not repeat Yourself), coz I have repeated a lot of code in my script tag
<form class="form" action="register.jsp" method="post">
<ul class="fieldlist">
<li>
<label for="simple-input"> UserName < /label> < input id="simple-input1" name="userid" type="text" class="k-textbox" style="width: 100%;" />
</li>
<li>
<label for="simple-input">Password</label>
<input id="simple-input2" name="pwd" type="password" class="k-textbox" style="width: 100%;" />
</li>
<li>
<input onclick="myFunction()" id="button" type="submit">
</li> </ul>
</form>
This is my Script tag. I want to follow DRY rules. I have tried saving the values to each separate variables.
<script>
var nameInput = document.getElementById('simple-input1');
document.querySelector('form.form').addEventListener('submit', function(e) {
//prevent the normal submission of the form
e.preventDefault();
console.log("Username: " + nameInput.value);
});
var nameInput1 = document.getElementById('simple-input2');
document.querySelector('form.form').addEventListener('submit', function (e) {
//prevent the normal submission of the form
e.preventDefault();
console.log("Password: " + nameInput1.value);
});
</script>
You can get the form elements using document.querySelector('form.form').elements
document.querySelector('form.form').addEventListener('submit', function(e) {
e.preventDefault();
let x = document.querySelector('form.form').elements;
console.log("Username: ", x['userid'].value);
console.log("Password: ", x['pwd'].value);
});
<form class="form" action="register.jsp" method="post">
<ul class="fieldlist">
<li>
<label for="simple-input"> UserName</label>
<input id="simple-input1" name="userid" type="text" class="k-textbox" style="width: 100%;">
</li>
<li>
<label for="simple-input">Password</label>
<input id="simple-input2" name="pwd" type="password" class="k-textbox" style="width: 100%;">
</li>
<li>
<input id="button" type="submit">
</li>
</ul>
</form>
You could use FormData and pass the form element as a parameter. Then use FormData.entries() to get an iterator of all values
document.querySelector('form.form').addEventListener('submit', function(e) {
e.preventDefault();
const formData = new FormData(this);
const entires = formData.entries();
for (var input of entires) {
console.log(input[0] + ': ' + input[1]);
}
});
<form class="form" action="register.jsp" method="post">
<ul class="fieldlist">
<li>
<label for="simple-input"> UserName </label> <input id="simple-input1" name="userid" type="text" class="k-textbox" style="width: 100%;" />
</li>
<li>
<label for="simple-input">Password</label>
<input id="simple-input2" name="pwd" type="password" class="k-textbox" style="width: 100%;" />
</li>
<li>
<input id="button" type="submit">
</li>
</ul>
</form>
Both your listeners are listening for the same thing - a submit. Make your code much simpler by merging them into a simplified listener, using template literals and newlines for the console.log():
document.querySelector("form.form").submit = function(e) {
e.preventDefault();
console.log(`Username: ${nameInput.value}\nPassword: ${nameInput1.value}`);
}
my contact form in my responsive website is not submitting. i have attached my contact.php but it is not working
my script is as follows
<!--Contact Us Script-->
<script type="text/javascript">
// <![CDATA[
$(function() {
$('#contactform').submit(function() {
var action = $(this).attr('action');
$.post(action, {
name: $('#name').val(),
email: $('#email').val(),
company: $('#website').val(),
subject: $('#subject').val(),
message: $('#message').val()
},
function(data) {
$('#contactform #submit').attr('disabled','');
$('.response').remove();
$('#contactform').before('<p class="response">'+data+'</p>');
$('.response').slideDown();
if(data=='Message sent!') $('#contactform').slideUp();
}
);
return false;
});
});
and my actual form is
<form action="contact.php" method="post" id="contactform">
<ol>
<li>
<label for="name">Name*</label>
<input id="name" name="name" class="text"/>
</li>
<li>
<label for="email">Email*</label>
<input id="email" name="email" class="text" />
</li>
<li>
<label for="url">Website</label>
<input id="url" name="web" class="text"/>
</li>
<li>
<label for="subject">Subject*</label>
<input id="subject" name="subject" class="text"/>
</li>
<li>
<label for="message">Message*</label>
<textarea id="message" name="message" rows="6" cols="50" ></textarea>
</li>
<li class="buttons">
<input name="imageField" type="image" class="send" id="imageField" form="contactform" src="Newsite/images/sub.png" />
<div class="clr"></div>
</li>
</ol>
</form>
I would be really grateful if someone could assist. I've been stuck for 2 days now!!!
Thanks
You can try it... Attach the function, to the event "click" from the img...
Sorry, (i can't speak(wirte or listen) english so much) but I hope it will help.
$("#imageField").click(
function(){
$('#contactform').submit(function(){
var action = $(this).attr('action');
$.post(action, {
name: $('#name').val(),
email: $('#email').val(),
company: $('#website').val(),
subject: $('#subject').val(),
message: $('#message').val()
},
function(data){
$('#contactform #submit').attr('disabled','');
$('.response').remove();
$('#contactform').before('<p class="response">'+data+'</p>');
$('.response').slideDown();
if(data=='Message sent!') $('#contactform').slideUp();
}
);
return false;
});
I have two files, preview.php & save.php
<form id="create-template" class="form" action="" method="post">
<p class="_50">
<label for="t-name">Template name</label>
<input type="text" name="t-name" class="required"/>
</p>
<p class="_100">
<label for="t-html">Template HTML</label>
<textarea id="t-html" name="t-html" class="required" rows="10" cols="40"></textarea>
</p>
<div class="clear"></div>
<div class="block-actions">
<ul class="actions-left">
<li><a class="button red" id="reset-template" href="javascript:void(0);">Clear</a></li>
</ul>
<ul class="actions-right">
<li><div id="preview"><input type="submit" class="button" value="Preview template" onclick="return false;"></div></li>
<li><input type="submit" class="button" value="Create template"></li>
</ul>
</div>
</form>
Current JS:
$("#preview").click(function() {
$.post('preview.php', {body:$('#t-html').val().replace(/\n/g,'<br />'), function (result) {
//maybe use .ajax instead?
//open preview.php in new window
});
});
How can I use the same form but have two different actions depending on what button one presses?
Preview template => preview.php => opens to a new tab
Create template => save.php => posts on same page
You can have a click event handler for both the button and attach simultaneous ajax call with each other.
and you can use javascript to open window in new tab.
window.open(<url>)
Try setting "target" attribute of the form based on what button was clicked.
Change your form to the following:
<form id="create-template" class="form" action="" method="post" target="_blank">
<p class="_50">
<label for="t-name">Template name</label>
<input type="text" name="t-name" class="required"/>
</p>
<p class="_100">
<label for="t-html">Template HTML</label>
<textarea id="t-html" name="t-html" class="required" rows="10" cols="40"></textarea>
</p>
<div class="clear"></div>
<div class="block-actions">
<ul class="actions-left">
<li><a class="button red" id="reset-template" href="javascript:void(0);">Clear</a></li>
</ul>
<ul class="actions-right">
<li><input id="preview-form" type="submit" class="button" value="Preview template" /></li>
<li><input type="submit" id="submit-form" class="button" value="Create template" /></li>
</ul>
</div>
</form>
And add this JavaScript:
$('#preview-form').click(function(ev) {
$('#create-template').attr('action', 'preview.php');
$('#create-template').attr('target', '_blank');
});
$('#submit-form').click(function(ev) {
$('#create-template').attr('action', 'submit.php');
$('#create-template').attr('target', '');
});
I haven't tested this across all browsers, so you might want to do that.
I am validating a form but when the validation is not passed it still posts the form. How do I prevent the this?
<form action="/Account/Registration" method="get">
<fieldset id="enterCode">
<ul>
<li class="inputBlock">
<input type="text" id="Code" name="Code" value="">
</li>
</ul>
</fieldset>
<div class="submitBlock">
<input type="submit" value="Send" class="button" onclick="validate();" />
</div>
</form>
<script type="text/javascript">
function validate() {
var val = $('#Code').val();
if (val == "") {
alert("Please enter code");
}
return false;
}
</script>
I'd do it like this:
<form action="/Account/Registration" method="get" id="registrationForm">
<fieldset id="enterCode">
<ul>
<li class="inputBlock">
<input type="text" id="Code" name="Code" value="">
</li>
</ul>
</fieldset>
<div class="submitBlock">
<input type="submit" value="Send" class="button" id="submitButton" />
</div>
</form>
<script type="text/javascript">
$(function(){
$('#submitButton').click(function(e){
e.preventDefault();
var val = $('#Code').val();
if (val.length > 0) {
$('#registrationForm').submit();
}
});
});
</script>
You need to stop the submit event from firing, or when it is fired, halt it by returning false on that event rather than the button's click event. You could change how your submit button behaves like in bunting's example, or bind a submit event to the form itself.
<form action="/Account/Registration" method="get" id="registrationForm">
<fieldset id="enterCode">
<ul>
<li class="inputBlock">
<input type="text" id="Code" name="Code" value="">
</li>
</ul>
</fieldset>
<div class="submitBlock">
<input type="submit" value="Send" class="button" />
</div>
</form>
<script type="text/javascript">
$(document).ready(function () {
$('#registrationForm').submit(function () {
var val = $('#Code').val();
if (val == "") {
alert("Please enter code");
return false;
}
return true;
});
});
</script>