I use the following Ajax script to post data and to disable the send-button and the form fields. At the moment only the submit button disables on click, but I want all the fields to be disabled.
So that's why I added: var compl_form = $('form#updateBeschikbaarheid'); and compl_form.attr("disabled", "disabled");
But that won't work.
<script type="text/javascript">
$(document).ready(function(){
$("form#updateBeschikbaarheid").submit(function(event) {
event.preventDefault();
var formData = $(":input,:hidden").serialize();
var btnSubmit = $('#uploadenFormSend');
var compl_form = $('form#updateBeschikbaarheid');
$.ajax({
type: "POST",
url: "beschikbaarheid.insert.php",
data: formData,
success: function(result){ /* GET THE TO BE RETURNED DATA */
$("#resultaat").html(result); /* THE RETURNED DATA WILL BE SHOWN IN THIS DIV */
btnSubmit.val("Wacht op goedkeuring"); // put your normal text
btnSubmit.attr("disabled", "disabled");
compl_form.attr("disabled", "disabled");
}
});
});
});
</script>
Form:
<form method="post" id="updateBeschikbaarheid" name="updateBeschikbaarheid">
<input type="time" name="zaterdag_van" id="zaterdag_van" value="">
<input type="time" name="zaterdag_tot" id="zaterdag_tot" value="">
<input type="submit" class="button-pink" value="<?php echo $button_text; ?>" id="uploadenFormSend" name="uploadenFormSend">
</form>
You cannot disable a form like that, but you can disable the inputs:
$(':input').prop('disabled', true);
Or in older versions of jQuery
$(':input').attr('disabled', 'disabled');
.prop()
.attr()
EDIT: based on your question in the comments, you can leave a select box enabled like this:
$(':input').not('select').attr('disabled', 'disabled');
compl_form.prop("disabled", true);
try this.
Related
I have a form as:
<form method='post' action="submit.cfm" id='formid' class="formclass" name="formname">
<input type='submit' name='submit' value="save">
<input type='submit' name='submitDraft' value="save draft">
</form>
Now without jQuery, I can submit the form and it will validate with html required fields for whichever fields it needs to be, and I will fill it and save it, now for the save draft, I want to save it without validation and trying to use jQuery to accomplish this but it's not working as expected.
I tried like this:
$("#formid").submit(function(event) {
event.preventDefault(); // prevent default action
var post_url = $(this).attr("action"); // get form action url
var form_data = $(this).serialize(); // Encode form elements for submission
$.post( post_url, form_data, function( response ) {
$("#server-results").html( response );
});
});
Now can I kill 2 birds with one stone, any feasible solution? There is no upload field, so I am safe from that perspective.
More tried came up with
<script type="text/javascript">
$(document).on('submit','#formid',function(event) {
event.preventDefault(); //prevent default action
var _id = $(this).find("#saved").attr('id');
if(_id == 'saved') {
alert('hi');
var isDrafted = 0;
$.validate({
modules : 'date, file'
});
} else {
alert('hello');
var isDrafted = 1;
var post_url = $(this).attr("action"); //get form action url
var form_data = $(this).serialize() & '&isDrafted=' + isDrafted; //Encode form elements for submission
$.post( post_url, form_data, function( response ) {
$("#server-results").html(response);
});
}
});
</script>
Now I am using a formvalidation.net validator, its old but its working, and honestly it is going to be mess to replace it, so how can I make this work?
Something else noticed, I had to click the button twice before it shows validation messages when clicked on save.
And the whose context is save means submit to the action page to save in database
You would need to name the buttons the same with different values, like mentioned here:
<input type='submit' name='submit' value="save">
<input type='submit' name='submit' value="save draft">
Or, since you are open to jQuery, setting a hidden field to which submit button was pressed:
<input type='hidden' name='whichSubmit' id='whichSubmit'>
<input type='submit' name='submit' value="save">
<input type='submit' name='submitDraft' value="save draft">
$("#formid").submit(function(event){
$('#whichSubmit').val(event.target.name);
});
(both of those are untested pseudo code)
I'm echoing the Submit Button as seen below in each row of a Table. When clicked the Submit Button the Javascript initializes and alert()'s the response. The issue is only the first Button works as intended and subsequent buttons redirect to foobar.php.
Submit Button:
<form name="savefilenote" id="savefilenote" method="post" action="forbidden-savefilenote.php?notetype=2">Note: <input id="filenote" name="filenote" type="text" value="'.$filenote.'"> <input id="filename" name="filename" type="hidden" value="'.$filename.'"> <input type="submit" value="Save"></form>
Javascript:
<script>
$(function(){
$('.savefilenote').on('submit', function(e){
// prevent native form submission here
e.preventDefault();
// now do whatever you want here
$.ajax({
type: $(this).attr('method'), // <-- get method of form
url: $(this).attr('action'), // <-- get action of form
data: $(this).serialize(), // <-- serialize
beforeSend: function(){
$('#result').html('');
},
success: function(data){
$('#result').html(data);
if(data === "0") {
alert("foo");
}
if(data === "1") {
alert("bar");
}
}
});
});
});
</script>
Use a class instead of an id.
$("#savefilenote") can find only one instance of a button since and ID works for a specific element. If you change it to $(".savefilenote") and apply the same class to all buttons it should work.
id should be specific to a single element. Using the same id to identify multiple tags, you'll end up only affecting the first element in the body. If you want to associate a behavior to a group of elements, you'll need to use a class.
Html:
<form id="yourFormId" method="POST" action="/">
{{csrf_field()}}
<div id="check" class="input-group margin-bottom-sm">
<input class="form-control" type="text" name="find" placeholder="Search">
<button type="submit"><div id="search" class="input-group-addon"><i class="fa fa-search"></i></div></button>
</div>
</form>
JS:
<script>
$(function(){
$(".form-control").on('change',function(e){
$("#yourFormId").attr("action","/" + this.val() );
});
});
</script>
That script doesn't work. I need an ajax solution to pass dynamically my input text to action url. How to do that?
Try this:
<script>
$(function(){
$(".form-control").on('change',function(e){
$("#yourFormId").attr("action","/" + $(this).val() );
});
});
</script>
i think u want to submit your form with ajax request with dynamic text field value.
you can use simple java script function on change or click event whatever you want or with ajax request
you simple use like this
window.location.href="/"+$(this).val();
return false;
This code will submit your form on keyup (as soon as you stop typing)
var timerid;
jQuery("#yourFormId").keyup(function() {
var form = this;
clearTimeout(timerid);
timerid = setTimeout(function() { form.submit(); }, 500);
});
In this code you intercept the form submit and change it with an ajax submit
$('.form-control').bind('keyup', function() {
$("#yourFormId").submit(function (event) {
event.preventDefault();
$.ajax({
type: "post",
dataType: "html",
url: '/url/toSubmit/to',
data: $("#yourFormId").serialize(),,
success: function (response) {
//write here any code needed for handling success }
});
});
});
To use the delay function you should use jQuery 1.4. The parameter passed to delay is in milliseconds.
How to disable other input when this input OnKeyUp ?
When i input data into input name="inputid1" , i want to disabled other input
when i input data into input name="inputid2" , i want to disabled other input
when i input data into input name="inputid3" , i want to disabled other input
when i input data into input name="inputid4" , i want to disabled other input
How can i do this with javascript loop ?
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<form id="form-id" method="post" action="" ENCTYPE = "multipart/form-data" onsubmit="return checkform(this);">
<input type="text" id="inputid1" name="inputid1" onKeyUp="fn_test1()">
<br>
<input type="text" id="inputid2" name="inputid1" onKeyUp="fn_test2()">
<br>
<input type="text" id="inputid3" name="inputid1" onKeyUp="fn_test3()">
<br>
<input type="text" id="inputid4" name="inputid1" onKeyUp="fn_test4()">
<br>
<span id="myplace"></span>
</form>
<?PHP
for($i=1;$i<=4;$i++)
{
?>
<script>
function fn_test<?PHP echo $i; ?>() {
$("#inputid2").prop('disabled', true);
$("#inputid3").prop('disabled', true);
$("#inputid4").prop('disabled', true);
setTimeout(function(){
$.ajax
(
{
url: 'test_mm16.php',
type: 'POST',
data: $('#form-id').serialize(),
cache: false,
success: function (data) {
$("#inputid2").prop('disabled', false);
$("#inputid3").prop('disabled', false);
$("#inputid4").prop('disabled', false);
$('#myplace').show();
$('#myplace').html(data);
}
}
)
}, 2000);
}
</script>
<?PHP
}
?>
This will work
$('#form-id input').on('keyup',function() {
$('#form-id input').attr('disabled','disabled'); //disable all
$(this).removeAttr('disabled'); //enable the one that triggers the event
doPost();
});
function doPost() {
$.ajax({
url: 'test_mm16.php',
type: 'POST',
data: $('#form-id').serialize(),
cache: false,
success: function (data) {
$('#myplace').show();
$('#myplace').html(data);
},
always: function() {
$('#form-id input').removeAttr('disabled');
}
}
)
}
Working example:
http://jsfiddle.net/z4apqjan/
Edited: I put the doPost function to execute the Ajax request.
There are to much messy things in your code, but I've made some corrections for you:
You have same names for four input elements, so you will always get inputid1 param in your PHP and I think this is not want you want to achieve.
You don't need to bind keyup for each element manually in html, better use advantage of jQuery, for this purpose I've added class attribute to all four inputs with value strangeInputs, you can change it respectively as you wish.
No need to create functions for each input, you already have enough information which separates the meaning of them.
Also after once keyup occurs to one of the input elements I think you no longer need keyup handler, so we will remove it after first it's been fired with jQuery's .off function. Edit: but because you send request all the time keyup occurs to the input we should not disable event listener
Finally your simplified code would look like this:
HTML:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<form id="form-id" method="post" action="" ENCTYPE = "multipart/form-data" onsubmit="return checkform(this);">
<input type="text" id="inputid1" class='strangeInputs' name="inputid1">
<br>
<input type="text" id="inputid2" class='strangeInputs' name="inputid2">
<br>
<input type="text" id="inputid3" class='strangeInputs' name="inputid3">
<br>
<input type="text" id="inputid4" class='strangeInputs' name="inputid4">
<br>
<span id="myplace"></span>
</form>
JavaScript:
/**
* scenario is simple, bind keyup event, when it fires once,
* execute desired code and remove keyup listener finally
*/
$(function(){
$('.strangeInputs').keyup(function(){
$('.strangeInputs').not(this).prop('disabled', true);
fn_test_inputs();
// $('.strangeInputs').off('keyup');
// in the case you send request at once keyup event occurs,
// you should not remove listener
});
});
function fn_test_inputs()
{
setTimeout(function(){
$.ajax
(
{
url: 'test_mm16.php',
type: 'POST',
data: $('#form-id').serialize(),
cache: false,
success: function (data) {
// here enable inputs again
$('.strangeInputs').prop('disabled', false);
$('#myplace').show();
$('#myplace').html(data);
}
}
)
}, 2000);
}
Simple input thing you can see here: http://jsfiddle.net/gttv53fg/
I have a form that looks like this:
<form method="post">
<input type="text" name="username" id="username">
<input type="text" name="password" id="password">
<select id="item" name="item">
<option value="1">Blue</option>
<option value="3">Pink</option>
<option value="4">Black</option>
</select>
<input type="button" id="submit" onclick="addItem();" name="submit" value="Submit"/>
</form>
How can I use javascript to call the addItem() function and send a post request to test.php with the value of the username as username, password as password, and item as item?
EDIT:
This is the only code in my addItem(); function so far:
$.post("http://test.com/test.php",{username:username, password:pword, item:item}, function(data) {
$('#message').html(data);
});
However, I'm wondering, how can I grab the data from all of the input fields and put it into the code I have above? This is because the function is called through a button and NOT a submit button.
To grab the data, jQuery has beautiful function inside. based upon your edited question you can try this :
var username = $("#username").val();
var pword = $("#password").val();
var item = $("#item option:selected" ).text();
// you can check the validity of username and password here
$.post("http://test.com/test.php",{username:username, password:pword, item:item},
function(data) {
$('#message').html(data);
});
(again, if you are following this way then there is no use of form tag.)
Using jQuery you can send the form as simply as doing:
$('form').submit(function(){
$.post('path/to/server/file', $(this).serialize(),function(response){
/* do something with returned data from server*/
});
return false; /* prevent browser submitting form*/
});
$.post is a shortcut method of $.ajax
jQuery $.ajax() docs
jQuery $.post() docs
give a form name and a action url, then use form.sumit() method to post form data
<form method='post' name='myform' action='test.php'>
...
<script type="text/javascript">
function addItem() {
document.myform.submit();
}
</script>
<form action="your.php" onSubmit="return addItem()">
This should do it
then in js
function addItem() {
//whatever you want to do
return true;
}
=============================================================
I see you are using Ajax, if you want to do it, then you should do the following:
$(document).on("click", "#yoursubmitbuttonID", function(e){
var password = $("#password").val();
var username = $("#username").val();
//send Ajax here
}