Right now I am using java script to submit two forms with a common function, I want to do it with jQuery. How can I pass data in jQuery as simple as JavaScript. I cannot able to send/retrieve data while event call.
Present Code:
function SaveSample(flag,mode){
//Based on flag and mode i am performing some validations
//save sample
}
<form id="ff1" name="ff1" method="post">
<input type="text" id="dummy2" name="dummy">
<input type="button" value="Save" onclick="SaveSample('A','S')">
</form>
<form id="ff2" name="ff2" method="post">
<input type="text" id="dummy2" name="dummy">
<input type="button" value="Save" onclick="SaveSample('A','D')">
</form>
Required Code:
$(document).ready(function(){
$(".sampleSave").on("click",function(e){
e.preventDefault();
//perform validations
//save sample
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form id="ff1" name="ff1" method="post">
<input type="text" id="dummy1" name="dummy">
<input type="button" value="Save" class="sampleSave">
</form>
<form id="ff2" name="ff2" method="post">
<input type="text" id="dummy2" name="dummy">
<input type="button" value="Save" class="sampleSave">
</form>
You can set the data-* attributes on the button and them access them in the click handler using $(this).attr("<attribute name>").
$(document).ready(function() {
$(".sampleSave").on("click", function(e) {
console.log($(this).attr("data-flag"), $(this).attr("data-mode"));
e.preventDefault();
//perform validations
//save sample
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form id="ff1" name="ff1" method="post">
<input type="text" id="dummy1" name="dummy">
<input type="button" value="Save" data-flag="A" data-mode="B" class="sampleSave">
</form>
<form id="ff2" name="ff2" method="post">
<input type="text" id="dummy2" name="dummy">
<input type="button" value="Save" data-flag="C" data-mode="D" class="sampleSave">
</form>
Another option is not to put the parameters on the form element, but instead have different callbacks for each form.
$(document).ready(function(){
$("#ff1 .sampleSave").on("click",function(e){
e.preventDefault();
SaveSample('A','S');
});
$("#ff2 .sampleSave").on("click",function(e){
e.preventDefault();
SaveSample('A','D');
});
});
You can use this code
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$(".sampleSave").on("click",function(e){
var formData = $(this);
$.ajax( {
type: "POST",
url: formData.attr( 'action' ),
data: formData.serialize(),
success: function( response ) {
console.log( response );
}
} );
e.preventDefault();
//perform validations
//save sample
});
});
</head>
<body>
<form id="ff1" name="ff1" method="post" action="yourfile.php">
<input type="text" id="dummy1" name="dummy">
<input type="button" value="Save" class="sampleSave">
</form>
<form id="ff2" name="ff2" method="post" action="yourfile1.php">
<input type="text" id="dummy2" name="dummy">
<input type="button" value="Save" class="sampleSave">
</form>
</body>
</html>
Related
I need to load 2 actions with 1 button. The first action uploads a file to the server and the second action loads some customer data.
HTML
<p class="text-center font-big"><u>Load Photometric Data (.ies File)</u></p>
<form id= "form1" method="post" action="<?php echo $_SERVER["PHP_SELF"]; ?>" enctype="multipart/form-data">
<input type="file" name="file" id="file">
<input type="hidden" name="upload_file" />
</form>
<form id= "form2" method="post" action="/roadlite_main.php">
<input type="hidden" name="new_data" />
</form>
<input type="button" value="Click Me!" onclick="submitForms()" />
js
<script language="javascript">
submitForms = function()
{
document.getElementById("form1").submit();
document.getElementById("form2").submit();
}
</script>
The second form (or maybe the last) always loads OK ... the first form fails to load and does not upload the file.
Any ideas!
I want to save textarea to Controller session using jquery ajax post method in Codeigniter smarty. I can't save data to session. How can I do this? Please guide me with full description coding example please.
$this->session->set_userdata()
Here is my view
<div class="col-md-9" id="label">
<form method="post" id="programmingQ1" name="programmingQ1" action="{base_url('home/question2')}" enctype="multipart/form-data">
<div class="form_block">
{foreach $question_data as $qdata}
<p class="question">
{$qdata->Question|nl2br}
</p>
{/foreach}
<label for="text">Fill in the answer :</label>
<br>
<textarea name="answer1" id="text" maxlength="2000" class="form-control" rows="20">{if isset($value)}{$value['answer1']}{/if}</textarea>
<input type="button" id="mybutton" name="next" class="btn btn-default nextbutton" id="btn_submit" value="Next">
</div>
</form>
</div>
Here is my ajax
<script type="text/javascript">
$('input#mybutton').click(function() {
var text = $('textarea#text').val();
alert(text);
$.ajax({
url : "saveq1",
type: "POST",
data : text,
success: function(data)
{
alert(data);
},
});
});
</script>
Here is my controller
public function saveq1()
{
$data=array();
if($_SERVER['REQUEST_METHOD']=='POST')
{
$this->load->library('session');
$this->session->set_userdata('answer1',$this->input->post());
print_r($this->session->userdata('answer1'));
}
$data['value']=$this->session->userdata('question1');
$this->smarty->view('question1.tpl',$data);
}
<?php session_start();?>
<div class="col-md-9" id="label">
<form method="post" id="programmingQ1" name="programmingQ1" action="{base_url('home/question2')}" enctype="multipart/form-data">
<div class="form_block">
{foreach $question_data as $qdata}
<p class="question">
{$qdata->Question|nl2br}
</p>
{/foreach}
<label for="text">Fill in the answer :</label>
<br>
<textarea name="answer1" id="text" maxlength="2000" class="form-control" rows="20">{if isset($value)}{$value['answer1']}{/if}</textarea>
<input type="button" id="mybutton" onclick="setTxtAreaDataToSession();" name="next" class="btn btn-default nextbutton" id="btn_submit" value="Next">
</div>
</form>
</div>
<script type="text/javascript">
function setTxtAreaDataToSession(){
var text = $('#text').val();
'<?php $this->session->set_userdata(?>'+text+'<?php)?>'; // setting in session.
}
</script>
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 have this code:
HTML:
<form method="post" action="<?php echo $this->serverUrl().str_replace('public','',$this->basePath()).'/user/sendmessagetoinbox/'; ?>">
<fieldset>
<label>Subject</label>
<input type="text" name="inbox_subject" />
</fieldset>
<fieldset>
<label>Message</label>
<textarea name="inbox_message"></textarea>
</fieldset>
<fieldset>
<button type="submit" class="btn btn-primary btn-save send-btn">Send message to inbox</button>
<!-- <input type="submit" class="btn btn-submit" value="Send message to inbox" /> -->
</fieldset>
<input type="hidden" value="" name="patient-id" />
</form>
JS:
$('#inMail').on('show.bs.modal', function (event) {
var url='<?php echo $this->serverUrl().str_replace('public','',$this->basePath()).'/user/sendmessagetoinbox/'; ?>';
console.log(url);
var pId = $(event.relatedTarget).data('patientId')
console.log(pId); //UNDEFINED
$(".modal-body").find('form').attr("action",url+pId);
})
I wish to send patient ID in action the following form. How to do this?
try adding id="patient-id" in put tag:
<input type="hidden" value="" id="patient-id" name="patient-id" />
also
var pId = $('#patient-id').val();
Can you please check for this
var pId = $(event.relatedTarget).data('patientId');
Try replacing with
var pId = $(event.relatedTarget).data('patient-id');
I think its all about form name property
Site searched on different sites but i don't find a solution for my form/html file. I'm really new in this and I really don't know why my code wont work, could some please review my code and can tell me what is wrong ? (this is for me the easiest way to learn it)
<!DOCTYPE html>
<html>
<head>
<script src="jquery-1.9.1.js"></script>
</head>
<body>
<form id="formoid" action="site" title="" method="post">
<div>
<label class="title">First Name</label>
<input type="text" id="name" name="name" value="" >
</div>
<div>
<label class="title">Name</label>
<input type="text" id="name2" name="name2" value="">
<input name="authenticity_token" type="hidden" value="token_value">
</div>
<div>
<input type="submit" id="submitButton" name="submitButton" value="Submit">
</div>
</form>
<script type='text/javascript'>
/* attach a submit handler to the form */
$("#formoid").submit(function(event) {
/* stop form from submitting normally */
event.preventDefault();
/* Send the data using post */
$.post( 'site/login', {
authenticity_token: $('#authenticity_token').val(),
username: $('#name').val(),
password: $('#name2').val()
},
function(responsePage,statusText,result)
{
console.log(responsePage);
}
);
});
</script>
</body>
</html>
Thanks for helping :)!
<html>
<head>
<script src="http://code.jquery.com/jquery-1.10.2.js"></script>
<style type="text/css">
.selected{
background-color : green;
}
</style>
<script>
$(document).ready(function () {
$("#formoid").submit(function (event) {
/* stop form from submitting normally */
event.preventDefault();
/* Send the data using post */
$.post('login_1.asp', {
authenticity_token: $('#authenticity_token').val(), username: $('#name').val(), password: $('#name2').val()
},
function (responsePage, statusText, result) {
alert("response from server---" + responsePage);
}
);
});
});
</script>
</head>
<body>
<form id="formoid" action="site" title="" method="post">
<div>
<label class="title">First Name</label>
<input type="text" id="name" name="name" value="" >
</div>
<div>
<label class="title">Name</label>
<input type="text" id="name2" name="name2" value="">
<input name="authenticity_token" type="hidden" value="token_value">
</div>
<div>
<input type="submit" id="submitButton" name="submitButton" value="Submit">
</div>
</form>
</body>
</html>
login_1.asp
<%
Response.Write request.Form("username") + "---------------" + request.Form("password")
%>