Submit button not working in form - laravel - javascript

Here I used laravel 5.6. In my project I appended a form using ajax by rendering form. But here submit form not working. When I press submit button it does not make any action. It is acting like
my ajax code is
$.ajax({
url:"/add-form-content",
type: 'GET',
data: {
},
success: function (response) {
$('#cat_C_EEL_content').empty();
$('#cat_C_EEL_content').append(response);
}
})
blade
<form class="form form-horizontal" action="{{ url('set-reward') }}" method="POST" >
{{ csrf_field() }}
<td>
<input type="hidden" name="category_name" value="C-EEL">
<select name="reward" class="form-control" required>
<option value="">Select</option>
<option value="gold">gold</option>
<option value="silver">silver</option>
<option value="bronze">bronze</option>
</select>
</td>
<td>
<input type="submit" class="btn btn-outline-primary">
</td>
</form>

Related

Ajax custom in-line message in form

I am using ajax for many forms, the problem is that when I enter one of the forms the message that returns is shown in all the forms, there is a way to avoid this so that only the message is shown in the form sent and not in the others ?
Here is the input html adaptation:
<!-- FORM 1-->
<form name="name" action="form.php" method="POST" id="contact1">
<li class="text-info">Name</li>
<select name="age">
<option value="Sam">Sam</option>
<option value="Mike">Mike</option>
</select>
<input type="submit" name="submit" value="namevalue">
</form>
<div id="result1"></div>
<!-- FORM 2-->
<form name="likes" action="form.php" method="POST" id="contact2">
<ul>
<li class="text-info">Interests</li>
<input type="checkbox" name="interests[]" value="play_soccer">Play Soccer</input>
<input type="checkbox" name="interests[]" value="play_golf">Play Golf</input>
<input type="submit" name="submit" value="gamevalue">
</form>
<div id="result2"></div>
And the js for ajax is:
<script type="text/javascript">
$(document).ready(function() {
$("form").submit(function() {
// Getting the form ID
var formID = $(this).attr('id');
var formDetails = $('#'+formID);
$.ajax({
type: "POST",
url: 'form.php',
data: formDetails.serialize(),
success: function (data) {
// Inserting html into the result div
$('#results1').html(data);
$('#results2').html(data);
},
});
return false;
});
});
</script>
So in form.php when a form is submitted separately, every form send the message with a simple echo notifying that it was updated.
Any help its welcome, thanks
If You don't change anything than you need just add below condition with success response
if(formID=='contact1')
$('#results1').html(data);
else if(formID=='contact2')
$('#results2').html(data);
Use a data attribute
$("form").on("submit", function(event) {
event.preventDefault()
const form = $(this);
const outputElem = $(form.data("output"))
outputElem.text(form.attr("id"))
console.log(form.serialize())
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form name="name" action="form.php" method="POST" id="contact1" data-output="#result1">
<select name="age">
<option value="Sam">Sam</option>
<option value="Mike">Mike</option>
</select>
<input type="submit" name="submit" value="namevalue">
</form>
<div id="result1"></div>
<form name="name" action="form.php" method="POST" id="contact2" data-output="#result2">
<select name="age">
<option value="Sam">Sam</option>
<option value="Mike">Mike</option>
</select>
<input type="submit" name="submit" value="namevalue">
</form>
<div id="result2"></div>

AJAX form POSTING even after it is disabled

I have two forms that are posting data to another page using AJAX, the first form is posting the data fine, but the second form refreshes the page
I've tried placing the JavaScript for the second form in another file, or in the header using a tag, but that doesn't help either.
Javascript code:
$(document).ready(function(){
var form = $('#form1');
form.submit(function(event){
var data1= $('#data1').val();
var data2= $('#data2').val();
$.post('includes/page2.inc.php', {data1: data1, data2: data2}, function(data){
$('#div').html(data);
});
}
event.preventDefault();
});
var form2 = $('#form2');
form2.submit(function(event){
var data3= $('#data3').val();
var data4= $('#data4').val();
$.post('page2.inc.php', {data3: data3, data4: data4}, function(data){
$('#div').html(data);
});
}
event.preventDefault();
});
});
HTML:
<form id="form1" action = "" method = "POST">
<div class="container">
<div class="form-row">
<div class="col-3" >
<label style="padding: 2px;">Option 1</label>
<select class="custom-select" id="data1" name="select1">
<option selected>Choose...</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
</div>
</div><br>
<div class="form-row modmarginleft">
<div class="col-3">
<label style="padding: 2px;">Option 2</label>
<select class="custom-select" id="data2" name="select2">
<option selected>Choose...</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
</select>
</div>
</div><br>
<div class="btn1">
<button type="submit" name="btn1" class="btn btn-danger" style="margin: 10px;" value="">Next</button>
</div>
</div>
</form>
<form id = "form2" action = "" method = "POST">
<div class="form-row ">
<div class="col-3" style="padding:10px;">
<label class="checkbox-inline"><input id="data3" type="checkbox" value=""> Option 1</label>
</div>
<div class="col-3" style="padding:10px;">
<label class="checkbox-inline"><input id="data4" type="checkbox" value=""> Option 2</label>
</div>
</div><br>
<div class="btn1">
<button type="submit" name="btn2" id = "btn13" class="btn btn-danger" style="margin: 10px;" value="">Next</button>
</div>
</form>
I want 'form2' to not POST after it is submitted which it is currently doing, The first form submits without posting if I remove the code for the second form, but it POSTS like normal if I include it.
I forgot to mention in my post and I don't know if this matters, but the second form is in another file.
EDIT : Issue resolved by binding the document(page2.php) to the submission of the second form
form2 doesn't work properly because it is outside your $(document).ready function.
Also, event.preventDefault() should be within each form's submit function.
Overall, your code should look something like this
$(document).ready(function(){
var form = $('#form1');
form.submit(function(event){
event.preventDefault();
var data1= $('#data1').val();
var data2= $('#data2').val();
$.post('includes/page2.inc.php', {data1: data1, data2: data2}, function(data){
$('#div').html(data);
});
});
var form2 = $('#form2');
form2.submit(function(event){
event.preventDefault();
var data3= $('#data3').val();
var data4= $('#data4').val();
$.post('page2.inc.php', {data3: data3, data4: data4}, function(data){
$('#div').html(data);
});
});
});

Correct values not getting stored in database when trying to submit form through ajax

I have a form that has multiple text fields and 2 file inputs. I am trying to save its value in a database through ajax. Both the files are getting stored properly but the issue is that some of the text values are getting saved as
[object HTMLInputElement]
[object HTMLCollection]
<form method="post" enctype="multipart/form-data" id="data">
<input type="text" name="first_name" id="first_name">
<input type="text" name="last_name" id="last_name">
<input type="email" name="Email" id="Email">
<input type="number" name="price" id="price" >
<select id="Experience" name="Experience" id="Experience">
<option >EXPERIENCE</option>
<option value="1">2</option>
<option value="2">3</option>
<option value="3">4</option>
</select>
<select id="availability" name="availability" >
<option>Color</option>
<option value="red">red</option>
<option value="white">white</option>
</select>
<input type="file" id="resume" class="resume " name="resume" >
<input type="file" id="file-upload" class="file-upload uploadvisa" name="file-upload" >
<button type="submit" id="save" class="save-icon-btn">
<img src="<?php echo base_url(); ?>assets/supplier/img/Save.png" class="wf-save-undo-icon">
</button>
</form>
AJAX CODE
var formData = new FormData();
$f1 = $('#file-upload');
$f2 = $('#resume');
formData.append('file-upload', $f1.get(0).files[0]);
formData.append('resume', $f2.get(0).files[0]);
formData.append('first_name', first_name);
formData.append('last_name', last_name);
formData.append('Email', Email);
formData.append('price', price);
formData.append('availability', availability);
jQuery.ajax(
{
type: "POST",
url: "<?php echo base_url(); ?>" + "Company/add_workforce_candidate",
data: formData,
processData: false,
contentType: false,
success: function(res)
{
console.log(res);
//alert(res);
},
error: function(errResponse)
{
console.log(errResponse);
}
});

jQuery serialize only part of a form

I am trying to send data through ajax to a PHP script. I know I can use form.serialize() but this will send the entire form, which is not what I want.
My form looks like this:
<form method="POST" action="timesheets/new" accept-charset="UTF-8" id="timesheet">
<input name="_token" type="hidden" value="xxx">
<input name="template_id" type="hidden" value="1">
<input name="user_id" type="hidden" value="1">
<fieldset>
<legend>New Timesheet</legend>
<fieldset>
<legend>Date/Hours Worked</legend>
<label for="work_type_0">Work Type</label>
<select class="work_type" id="work_type" name="row[0][work_type]">
<option value="Hours Worked">Hours Worked</option>
<option value="Day Rate">Day Rate</option>
<option value="On Call">On Call</option>
<option value="Paid Holiday">Paid Holiday</option>
<option value="Unpaid Holiday">Unpaid Holiday</option>
</select>
....
I only want to send the value of the _token field and the value of the work_type select field.
How can I achieve this?
Try to do this
$("[name='token'],.work_type").serialize()

Redirect form to different URL based on select option element, but after I submit the form

I'm new to JavaScript, and seeking for some help. I have a form with a select drop down with 5 options.
<form accept-charset="UTF-8" action="" method="post" onclick="javascript:location.href = this.value;">
<input id="name" name="name" size="30" type="text" value="Type your name">
<select id="option" name="Region" >
<option value="value1.html">Option1</option>
<option value="value2.html">Option2</option>
<option value="value3.html">Option3</option>
<option value="value3.html">Option4</option>
<option value="value3.html">Option5</option>
</select>
<input type="submit" id="submit" value="Submit">
</form>
And this Javascript:
<script type="text/javascript">
window.onload = function(){
location.href=document.getElementById("option").value;
}
</script>
I tried this and doesn't work to redirect to the page I want after I submit the form! Any ideas? I need that form to work, doesn't matter if I can do it with PHP or JavaScript.
Your window.onload is executed instantly before you even get a chance to make a choice.
<form onsubmit="return mysubmit();">
<select id="option" name="Region" >
<option value="value1.html">Option1</option>
<option value="value2.html">Option2</option>
<option value="value3.html">Option3</option>
<option value="value3.html">Option4</option>
<option value="value3.html">Option5</option>
</select>
<input type="submit" id="submit" value="Submit">
</form>
<script>
function mysubmit(){
//you can return false; here to prevent the form being submitted
//useful if you want to validate the form
window.location.href=document.getElementById('option').value;
}
</script>

Categories