Using jQuery Form, for some reason I have to submit a form through jQuery on method like this:
$("#submitImage").on("click", function() {
$('#loaderForm').ajaxForm(function() {
alert("Uploaded SuccessFully");
});
});
but this is not submitting the form! Can you please take a look at this demo and let me know what i am missing or doing wrong here?
$("#uploadFile").change(function() {
$('#image_preview').html("");
var total_file=document.getElementById("uploadFile").files.length;
for(var i=0;i<total_file;i++)
{
$('#image_preview').append("<img src='"+URL.createObjectURL(event.target.files[i])+"'>");
}
});
$("#submitImage").on("click", function() {
$('#loaderForm').ajaxForm(function()
{
console.log("Uploaded SuccessFully");
});
});
input[type=file]{
display: inline;
}
#image_preview{
border: 1px solid black;
padding: 10px;
}
#image_preview img{
width: 200px;
padding: 5px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.form/4.2.2/jquery.form.min.js"></script>
<div class="container">
<form id="loaderForm" action="uploadFile.php" method="post" enctype="multipart/form-data">
<input type="file" id="uploadFile" name="uploadFile[]" multiple/>
</form>
<br/>
<button type="button" class="btn btn-success" id='submitImage' >Upload Image </button>
<div id="image_preview"></div>
</div>
type of button should be 'submit'
<button type="submit" class="btn btn-success" id='submitImage' >Upload Image </button>
move the submit button inside the <form> tag and its type should by submit
<form id="loaderForm" action="uploadFile.php" method="post" enctype="multipart/form-data">
<input type="file" id="uploadFile" name="uploadFile[]" multiple/>
<input type="submit" class="btn btn-success" id='submitImage' value='Upload Image' />
</form>
Otherwise, you can just call $('#loaderForm').submit(); from within the button click event;
<form id="loaderForm" action="uploadFile.php" method="post" enctype="multipart/form-data">
<input type="file" id="uploadFile" name="uploadFile[]" multiple/>
</form>
<button type="button"
onclick="javascript:function(){ $('#loaderForm').submit(); }"
class="btn btn-success" id='submitImage' >Upload Image
</button>
Related
<form *ngIf="data.yesAsLink" id="myForm" ngNoForm [action]=action method="post"
target="pay" onsubmit="window.open('about:blank','pay','width=1050,height=860');"
style="display: inline; margin-left: 20px;">
<input type="hidden" name="ClientId" value="ExelaRON" />
<input type="hidden" name="Param" [value]=input />
<button type="submit" (click)="onYesClick(this)"
mat-button class="btn primary-btn" value="Submit"
style="font-size: 14px;">Pay now</button>
</form>
this code is in component html file and opening child window by submitting form. how to track close window event on this?
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'm trying to achieve the condition click event on each class element. This is my code.
//Edit input field
$('.js-edit, .js-save').each(function(index) {
$(this).on("click", function() {
var $form = $(this).closest('form');
$form.toggleClass('is-readonly is-editing');
var isReadonly = $form.hasClass('is-readonly');
$form.find('input').prop('disabled', isReadonly);
});
});
form.is-readonly .btn-save {
display: none;
}
form.is-readonly input[disabled],
form.is-readonly textarea[disabled] {
cursor: text;
background-color: #fff;
border-color: transparent;
outline-color: transparent;
box-shadow: none;
}
form.is-editing .btn-edit {
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form class="is-readonly" action="" method="post">
<input type="text" class="form-control is-disabled" value="40" disabled>
<button type="button" class="btn-edit js-edit">Edit</button>
<button type="button" class="btn-save js-save">Save</button>
<input type="text" class="form-control is-disabled" value="38" disabled>
<button type="button" class="btn-edit js-edit">Edit</button>
<button type="button" class="btn-save js-save">Save</button>
</form>
I have two input fields, at the moment click event making both field editable, i want it work separately for each field.
I hope you guys understand my question.
Thanks in advance.
Is this what you want to achieve?
I wrapped each field and its corresponding buttons in a div and changed the script a bit to match the new HTML.
//Edit input field
$('.js-edit, .js-save').each(function(index) {
$(this).on("click", function() {
var $group = $(this).closest('.group');
$group.toggleClass('is-readonly is-editing');
var isReadonly = $group.hasClass('is-readonly');
$group.find('input').prop('disabled', isReadonly);
});
});
.group.is-readonly .btn-save {
display: none;
}
.group.is-readonly input[disabled],
.group.is-readonly textarea[disabled] {
cursor: text;
background-color: #fff;
border-color: transparent;
outline-color: transparent;
box-shadow: none;
}
.group.is-editing .btn-edit {
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form action="" method="post">
<div class="group is-readonly">
<input type="text" class="form-control is-disabled" value="40" disabled>
<button type="button" class="btn-edit js-edit">Edit</button>
<button type="button" class="btn-save js-save">Save</button>
</div>
<div class="group is-readonly">
<input type="text" class="form-control is-disabled" value="38" disabled>
<button type="button" class="btn-edit js-edit">Edit</button>
<button type="button" class="btn-save js-save">Save</button>
</div>
</form>
Simple attach the events separately:
$(document).on('click', '.js-edit', function(){
console.log('Coming from Edit Button')
});
$(document).on('click', '.js-save', function(){
console.log('Coming from SaveButton')
});
You set class for form element and it's wrong. you should set class for input parent (like container class)
$('.js-edit, .js-save').on("click", function() {
var $form = $(this).closest('form');
var container = $(this).closest('.container');
container.toggleClass('is-readonly is-editing');
container.find('input').prop('disabled', $form.hasClass('is-readonly'));
});
.container.is-readonly .btn-save {
display: none;
}
.container.is-editing .btn-edit {
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form action="" method="post">
<div class="container is-readonly">
<input type="text" class="form-control is-disabled" value="40" disabled>
<button type="button" class="btn-edit js-edit">Edit</button>
<button type="button" class="btn-save js-save">Save</button>
</div>
<div class="container is-readonly">
<input type="text" class="form-control is-disabled" value="38" disabled>
<button type="button" class="btn-edit js-edit">Edit</button>
<button type="button" class="btn-save js-save">Save</button>
</div>
</form>
I have two buttons which are the submit button and save button.
The first time the page loads, the submit button should be enabled while the save button should be disabled.
After the submit button is clicked, the submit button should be disabled and record will be display while the save button should be enabled so that I can save record. But I cant enable the save button after the submit button is clicked and the record is displayed.
HTML
<header><h4>Customer Purchase Order</h4></header>
<form action="" method="post" class="form-disable">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="global.js"></script>
<table style="border-collapse:collapse;" width="1400px" height="172px" border="1">
Delivery Date: <input type="text" name="sdate2" placeholder="yyyy-mm-dd" onkeypress="return noenter()">
Date: <input type="text" name="sdate" placeholder="yyyy-mm-dd" value="" onkeypress="return noenter()">
<input type="button" class="but" name="sub" id="sub" value="Submit" formaction="" style="WIDTH: 57px; HEIGHT: 31px;" onkeypress="return noenter()" onclick="myFunction()">
<input type="button" class="but" name="save" id="save" value="Save" disabled formaction="addorder1.php" style="WIDTH: 57px; HEIGHT: 31px;" onkeypress="return noenter()" onclick="myFunction()"><br><br>
JAVASCRIPT
$(function()
{
$(".but").on("click", function(e)
{
e.preventDefault(); // not really necessary if buttons
$(this).prop("disabled", true);
if (this.id=="sub")
{
// do the submit and enable other button
$("#save").prop("disabled", false);
}
else
{
// do the save and enable other button
$("#sub").prop("disabled", false);
}
});
});
Demo
https://jsfiddle.net/kk5wxm37/
HTML
<form action="" method="post" class="form-disable">
<input type="text" name="name" placeholder="name"/>
<button type="submit" id="submit" name="submit" <?php echo isset($_POST['submit']) ? 'disabled="true"' : ''; ?>/> Submit</button>
<button type="submit" name="save" id="save" disabled value="true" >Save</button>
</form>
Javascript
<script>
$(document).ready(function(){
$('#submit').click(function(e){
e.preventDefault();
$(this).attr('disabled', true);
$('#save').attr('disabled', false);
});
});
</script>
JSFIDDLE
https://jsfiddle.net/7mu9Lk2r/
NEVER call a submit button submit - it kills the form submit event - I have renamed it to "sub"
PHP Only
<?PHP
$sub = isset($_POST['sub']);
$>
<button type="submit" name="sub" id="sub" <?php $sub ? 'disabled' : ''; ?>> Submit</button>
<button type="submit" name="save" id="save" <?php $sub ? '' : 'disabled'; ?> onblur="validate()">Save</button>
If the form is not submitted (Ajax):
FIDDLE
Assuming the buttons are SUBMIT buttons and correct syntax (you had <input /></button>)
$(function() {
$("form.form-disable").on("submit",function(e) {
e.preventDefault();
$("#sub").prop("disabled",true);
$("#save").prop("disabled",false);
});
});
If you do NOT use submit buttons, then this will work:
$(function() {
$("#sub").on("click", function(e) {
e.preventDefault();
$(this).prop("disabled", true);
$("#save").prop("disabled", false);
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form action="" method="post" class="form-disable">
<input type="text" name="name" placeholder="name" />
<button type="button" name="sub" id="sub">Submit</button>
<button type="button" name="save" id="save" disabled value="true">Save</button>
</form>
If you need to swap disable:
$(function() {
$(".but").on("click", function(e) {
e.preventDefault(); // not really necessary if buttons
$(this).prop("disabled", true);
if (this.id=="sub") {
// do the submit and enable other button
$("#save").prop("disabled", false);
}
else {
// do the save and enable other button
$("#sub").prop("disabled", false);
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form action="" method="post" class="form-disable">
<input type="text" name="name" placeholder="name" />
<button type="button" class="but" name="sub" id="sub">Submit</button>
<button type="button" class="but" name="save" id="save" disabled value="true">Save</button>
</form>
I just dont know how to change my buttons once clicked. All I want is to change this button
<input type="button" onclick="codename()" id="myButton1" value="New" class="btn" name="New" style="height: 60px; width: 90px">
to this button
<input type="submit" value="Save" class="btn2" name="Query" style="height: 60px; width: 90px">
once clicked.I have used the
button to enable a disabled text forms, and it works. So basically my NEW BUTTON will do 2 things: first is to enable disabled forms and button (working) AND second is to change that same button from
<input type="button" onclick="codename()" id="myButton1" value="New" class="btn" name="New" style="height: 60px; width: 90px">` to `<input type="submit" value="Save" class="btn2" name="Query" style="height: 60px; width: 90px">
(not yet existing)
here is my exiting code right now:
<SCRIPT LANGUAGE="JavaScript"><!--
function codename() {
if(document.formname.New)
{
document.formname.Add.disabled=false;
document.sapcode.SapCode.disabled=false;
document.lanecode.LaneCode.disabled=false;
document.soldto.SoldTo.disabled=false;
document.soldaddress.SoldAddress.disabled=false;
document.contactperson1.ContactPerson1.disabled=false;
document.deliveredto.DeliveredTo.disabled=false;
document.deliveredaddress.DeliveredAddress.disabled=false;
document.contactperson.ContactPerson.disabled=false;
}
else
{
document.formname.Add.disabled=true;
document.sapcode.SapCode.disabled=true;
document.lanecode.LaneCode.disabled=true;
document.soldto.SoldTo.disabled=true;
document.soldaddress.SoldAddress.disabled=true;
document.contactperson1.ContactPerson1.disabled=true;
document.deliveredto.DeliveredTo.disabled=true;
document.deliveredaddress.DeliveredAddress.disabled=true;
document.contactperson.ContactPerson.disabled=true;
}
}
//-->
</SCRIPT>
<div id="container">
<div id="header">
<div id="img">
<img src="dimensiondata.jpg" alt="dimension data" width="250" height="60">
</div>
<div id="indexno">
<center>Index No.</center> <input type="text" name="indexNo" size="13">
</div>
<form name="formname">
<input type="button" onclick="codename()" id="myButton1" value="New" class="btn" name="New" style="height: 60px; width: 90px">
<input type="submit" disabled value="Add" class="btn1" name="Add" style="height: 60px; width: 90px">
</form>
</div>
Pass this a reference of event and clicked button to the function like:
<input type="button" onclick="codename(event, this)" id="myButton1" value="New" class="btn" name="New" style="height: 60px; width: 90px">
and try the modifying your function as follows:
function codename(e, elm){
if(elm.type=='button'){
var e = e || window.event;
if(e)
e.preventDefault()
elm.type='submit';
elm.value="Save";
elm.className= 'btn2';
elm.name= "query";
}
//rest of the code
}