Submit a form without using submit button in CodeIgniter - javascript

I'm just new to CodeIgniter framework and all the lessons have been jumbled on my mind now. I just want to ask, how to submit a form without using a form submit button in codeigniter. I did saw an example of javascript but I want to see it in codeigniter framework. Can anybody give me a simple mvc sample? Thank you in advance!

you can use AJAX as well
<script>
$(function(){
$( "#submit" ).click(function(event)
{
event.preventDefault();
var name= $("#name").val();
var phone= $("#phone").val();
var address= $("#address").val();
$.ajax(
{
type:"post",
url: "<?php echo base_url(); ?>index.php/Controller_name/Method name",
data:{ name:name, phone:phone,address:address,},
success:function(data)
{
}
error:function(data)
{
}
});
});
});
</script>
So in Form should be
<form action="#" method="post">
<input type="text" id="name" name="name">
<input type="text" id="phone" name="phone">
<input type="text" id="address" name="address">
<input type="submit" value="Submit Form" id="submit">
</form>

Related

How can I fix my Mturk submit button? It is not working

When I submitted my external HIT on Mturk, the Submit button is not working. I would appreciate if someone could help me with this. The data gets stored in my server though. Here is my code:
<div id="instruction3" class="instructions" style="display:none">
survey questions here
Submit
</div>
function SaveData() {
(some code here)
d = {
"trialStruct": trialStruct,
"critStruct": critStruct
};
console.log(d)
SendToServer(curID, d);
}
<form action="https://workersandbox.mturk.com/mturk/externalSubmit" id="mturk_form" method="post" name="mturk_form">
<input id="assignmentId" name="assignmentId" type="hidden" value="" />
<p><input id="submitButton" type="submit" value="Submit" /></p>
</form>
function SendToServer(id, curData) {
$.ajax({
type : "POST",
url : "https://xxxxxxxxxxxx/turk/save.php",
data : { json : JSON.stringify(curData) },
success : function(data) {
document.forms[0].submit();
}
});
}
Edited: the flow should be participants click on the submit button and the data gets stored and sent to the externalSubmit page. These are parts of the code from Mturk that I need to implement in my code and perhaps I am not doing it right.
<!-- HTML to handle creating the HIT form -->
<form action="https://workersandbox.mturk.com/mturk/externalSubmit" id="mturk_form" method="post" name="mturk_form">
<input id="assignmentId" name="assignmentId" type="hidden" value="" />
<!-- HTML to handle submitting the HIT -->
<p><input id="submitButton" type="submit" value="Submit" /></p>
</form>
You should call the SaveData() function inside the form tag
<form action="https://workersandbox.mturk.com/mturk/externalSubmit" id="mturk_form" method="post" name="mturk_form" onSubmit="SaveData()">
So I think you should try to move the SaveData function to the onSubmit value of the form. So you would be submitting the form and the data would get saved to the server. You have extra html code above but I think that is superfluous for what you are trying to do.
function SaveData() {
(some code here)
d = {
"trialStruct": trialStruct,
"critStruct": critStruct
};
console.log(d)
SendToServer(curID, d);
}
function SendToServer(id, curData) {
$.ajax({
type : "POST",
url : "https://xxxxxxxxxxxx/turk/save.php",
data : { json : JSON.stringify(curData) },
success : function(data) {
document.forms[0].submit();
}
});
}
<form action="https://workersandbox.mturk.com/mturk/externalSubmit" id="mturk_form" method="post" name="mturk_form" onSubmit="SaveData()">
<input id="assignmentId" name="assignmentId" type="hidden" value="" />
<p><input onclick="window.location.href = https://workersandbox.mturk.com/mturk/externalSubmit';"id="submitButton" type="submit" value="Submit" /></p>
</form>
Here is the working one, I have used https://postman-echo.com/post just to make sure it works.
function SaveData() {
var d = {
"trialStruct": trialStruct,
"critStruct": critStruct
};
console.log(d);
SendToServer(curID, d);
}
function SendToServer(id, curData) {
$.ajax({
type: "POST",
url: "https://postman-echo.com/post",
data: {
json: JSON.stringify(curData)
},
success: function(data) {
$("#mturk_form").submit();
}
});
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="instruction3" class="instructions" style="display:none">
Submit
</div>
<form action="https://postman-echo.com/post" id="mturk_form" method="post" name="mturk_form">
<input id="assignmentId" name="assignmentId" type="hidden" value="" />
<p><input id="submitButton" type="submit" value="Submit" /></p>
</form>

How to copy the hidden field value and pass it on another page using jquery in CodeIgniter?

I am new with CodeIgniter and I want to pass hidden field value to another page using jQuery in CodeIgniter. Can I do this using jQuery?
<input type="hidden" name="grdtot" class="grdtot" />
this hidden field on cart.php page
<label id="grdtot_c" name="grdtot_c" class="grdtot_c"></label>
I want to fetch this hidden field value on checkout.php page. How I can do this using jQuery?
You can do this another way using localstorage to getting value from another page
Just write like this on page one.
localStorage.setItem('Gridtotal', $('.grdtot').val());
And get value from another page.
var grdTotal= localStorage.getItem('Gridtotal');
$('#grdtot_c').val(grdTotal);
Suppose You have form given below:
<body>
<div>Upload data to the server without page Refresh</div>
<input type="hidden" name="hidden_name" id="hidden_name">
<input type="text" name="name" id="name">
<input type="text" name="email" id="email">
<input type="text" name="website" id="website">
<input type="submit" name="submit" id="save" value="Submit">
<div id="display"></div>
</body>
And Now Your Script to send data to Your Controller.
You must have to use ajax to send data to the controller in CodeIgniter, And It will make your work easy.
<script>
$(document).ready(function(){
$('#save').click(function(){
var hidden_name = $('#hidden_name').val();
var name = $('#name').val();
var email = $('#email').val();
var website = $('#website').val();
$.ajax({
type:'POST',
url:'<?php echo base_url();?>index.php/controller_name/function_name',
async:false,
data:{
"done":1,
"hidden_name":hidden_name,
"name":name,
"email":email,
"website":website
},
success:function(data){
$('#display').html(data);
}
});
});
});
</script>

Multi form submit with one selector use jquery ajax

I have a problem with jquery ajax multi form.
every execution is always part of the form at the top, to form the other does not work.
can help me.
this Source Code
<form id="form_action" action="http://www.dom.dom/act/">
<input type="text" name="nama" value="" />
<button type="submit" >Save</buton>
</form>
<form id="form_action" action="http://www.dom.dom/act/">
<input type="text" name="nama" value="" />
<button type="submit" >Save</buton>
</form>
<form id="form_action" action="http://www.dom.dom/act/">
<input type="text" name="nama" value="" />
<button type="submit" >Save</buton>
</form>
<form id="form_action" action="http://www.dom.dom/act/">
<input type="text" name="nama" value="" />
<button type="submit" >Save</buton>
</form>
jquery ajax nya :
$("‪#‎form_action‬").on('submit', function(e){
e.preventDefault();
var link = $(this).attr("action");
var data = $(this).serialize();
$.ajajx({
url:link,
data:data,
type:"POST",
typeData:'html',
cache:false,
success: function(data){
//// bla bla //
}
});
return false;
});
How to use this jquery for multi form..?
When you use an id selector ($('#some-id')) you get only the first element that matches your selector, not an array as you get with other selectors.
Also, it seems that they're all the same form.. What are you trying to achieve? Maybe you can use the same form and just change action attribute or some input in the form.
Another thing, as #dave mentioned in the comments, there's no $.ajajx function in jQuery :-)

javascript Submit multiple forms with one button

In my html I have multiple forms (text inputs, radio buttons, check boxes and select) and one button. I would like to fill all these forms and send values to my php file. For now I am trying to submit values from text input and select but I am stuck at this point.
I have a js submit file:
submitForms = function(){
document.getElementById("form1").submit();
document.getElementById("form2").submit();
}
And my forms are like this:
SELECT:
<form id ="form1" name="dists" action="solve.php" method="post">
<select id="demo" name="sadzba" onchange="selectElement1(this.value)>
<option value="">-- vyberte oblasť --</option>
</select>
</form>
Text input form + button:
<form id="form2" action="solve.php" method="post">
<input type="text" name="spotVT" ><label>kWh za rok VT</label>
<div id="nt" style='display:none'><input type="text" name="spotNT" ><label>kWh za rok NT</label></div>
</form>
<input id="sub" type="button" value="Ok" style="margin-left:15px;" onclick="submitForms()"/>
But this is not working. Can you help me please? Thank you
Once you are submitting one form your page reloads or terminates the javascript after that submission of form so better use Ajax for submitting multiple forms at the same time
with jquery
$("#sub").click(function(){
$("form").each(function(){
var fd = new FormData($(this)[0]);
$.ajax({
type: "POST",
url: "solve.php",
data: fd,
processData: false,
contentType: false,
success: function(data,status) {
//this will execute when form is submited without errors
},
error: function(data, status) {
//this will execute when get any error
},
});
});
});
Above code will submit every form when you click a button with id sub
It will be easier to only submit one form. You can give your select and input tag the same form name by assigning form="your-form-id".
Here's an simple example of a native Javascript implementation.
<!DOCTYPE html>
<html>
<head>
<title>Multiform - JAVASCRIPT</title>
</head>
<body>
<fieldset>
<legend>Form 1</legend>
<form name="f1" id="f1" onsubmit="return validate(this)">
<input type="text" name="username" placeholder="Username" />
</form>
</fieldset>
<fieldset>
<legend>Form 2</legend>
<form name="f2" id="f2" onsubmit="return validate(this)">
<input type="text" name="email" placeholder="Email" />
</form>
</fieldset>
<fieldset>
<legend>Form 3</legend>
<form name="f3" id="f3" onsubmit="return validate(this)">
<input type="text" name="password" placeholder="Password" />
</form>
</fieldset>
<button onclick="submitAll();">SUBMIT ALL</button>
<script>
'use strict';
function validate(form){
//forms processsing goes here...
console.log(form, form.name)
return false;
}
function submitAll(){
for(var i=0, n=document.forms.length; i<n; i++){
document.forms[i].onsubmit();
}
}
</script>
</body>
</html>
You could try this. If submitting all forms is fine for your page
$('form').submit();
Function that's in actual use:
function trySubmitAllForms() {
if ($('.saveSpinner').is(':visible')) {
return;
}
if ($('form').valid()) {
$('.saveSpinner').show();
$('form').submit();
} else {
showValidationErrorMessages();
}
}
Bismillah, try our method below, insyaAllah we hope can provide a solution for you.
document.getElementById("submit").addEventListener("click", function () {
$(function () {
$("#formid01").delay(300).submit();
$("#formid02").delay(300).submit();
});
});

How to include submit button name and values on form Serialize() ajax

I have trouble, my code doesn't work, because my server script side need a name from the submit button. I'm using Ajax method, and I'm using data: serialize, when I have Click on Submit, it doesn't work. Here is my JavaScript code:
$(function(){
$('#buy_product').submit(function(e){
e.preventDefault();
var submitData = $('#buy_product').serialize();
submitData.push({ name: this.name, value: this.value });
$('.loading').html('{{HTML::image('img/ajax-loader.gif')}}');
$.ajax({
type: "POST",
data: submitData,
url: "{{URL::base()}}/products/view/{{$products->id}}/{{Str::slug($products->name_product, '_')}}",
success: function(msg){
$('#qty').val('');
$('.loading').html(msg);
}
});
});
});
If you have clue, please tell me, I'll be glad.
My button is like this:
<input name="update" id="update" type="submit" value="update">
<input name="empty" id="empty" type="submit" value="empty">
I believe you can't do that but you can use a hidden field
<input type="hidden" name="any_name" value="any_value" />
Try this:
Java Script Code:
<script type='text/javascript'>
$(function(){
$('#form').submit(function(e){
e.preventDefault();
var submitData = $('#form').serialize();
var btnName = $('#submit').attr('name');
var btnVal = $('#submit').val();
var btn = '&'+btnName+'='+btnVal;
submitData += btn;
alert(submitData);
});
});
</script>
HTML Code:
<form action="" id="form" type='post'>
<input type="text" name="name" id="name" value='Scott'/>
<input type="submit" name="submit" id="submit" value='POST'/>
</form>
or use:
var submitData = $('#buy_product').serialize();
submitData += '&btnName=' + $('#your_submitbtn_id').attr('name') + '&btnValue='+ $('##your_submitbtn_id').attr('value');

Categories