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);
});
});
});
Related
How can I use document.write to display a value from the drop down menu in
<option value="jmp.php?type=auto&rate=<script>document.write(rate)</script>">Auto Insurance</option>
Is this even possible? How can I accomplish this goal? On the next page I need to _GET the 'rate' and I cannot figure out how to pass it into the value.
When the forms submitted this code is used to send the user to the URL in the value=""
var goBtn = document.getElementById("search");
var menu = document.getElementById("s1");
goBtn.onclick = function() {
window.location = menu.value;
}
Here is the HTML I am working with.
<script>
function getRate() {
var rate = document.getElementById("s2").value;
</script>
<div class="row">
<div class="col-md-12">
<div class="subscribe-block">
<div class="row">
<form class="form-horizontal" role="form" id="subscribeForm">
<div class="col-sm-4">
<fieldset style="margin-top: -1.1em">
<div style="color: #fff;">Insurance Plan</div>
<select id="s1" class="form-control input-lg">
<option value="jmp.php?type=auto&rate=<script>document.write(rate)</script>">Auto Insurance</option>
<option value="jmp.php?type=health&rate=<script>document.write(rate)</script>">Health Insurance</option>
</select>
</fieldset>
</div>
<div class="col-sm-4">
<fieldset style="margin-top: -1.1em">
<div style="color: #fff;">Estimated Current Payment</div>
<select name="s2" id="s2" class="form-control input-lg">
<option>$5</option>
<option>$10</option>
<option>$20</option>
<option>$30</option>
<option>$40</option>
<option>$50</option>
<option>$60</option>
<option>$70</option>
<option>$80</option>
<option>$90</option>
<option>$100</option>
<option>$110</option>
<option>$120+</option>
</select>
</fieldset>
</div>
<div class="col-sm-4">
<input style="color: #fff;" id="search" placeholder="Continue >>" class="btn btn-warning btn-block btn-lg">
</div>
<script>
var goBtn = document.getElementById("search");
var menu = document.getElementById("s1");
var myObject = {
"value1": "jmp.php?type=auto&rate=<script>document.write(rate)<\/script>",
"value2": "jmp.php?type=health&rate=<script>document.write(rate)<\/script>"
}
goBtn.onclick = function() {
window.location = myObject[menu.value];
}
</script>
<select id="s1" class="form-control input-lg">
<option value="value1">Auto Insurance</option>
<option value="value2">Health Insurance</option>
</select>
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>
This is my html code(1st TRY)
<div class="col-md-4" >
<div class="form-group label-floating">
<label class="control-label">Select No</label>
<select class="form-control" v-model="or" required="">
<option value="" selected disabled hidden>Choose Type here</option>
<option v-for="aon in data" v-bind:href="'/recorddetails/'+aon.docId" >{{aon.orno}}</option>
</select>
</div>
</div>
So, based on the dropdown, If I select a particular value, I need to move to the recorddetails page with its docId.
When I try this code it is not working.
I also tried the following code(2nd TRY)
<div class="col-md-4" >
<div class="form-group label-floating">
<label class="control-label">Select No</label>
<select class="form-control" v-model="or" required="" #change="orCost()">
<option value="" selected disabled hidden>Choose Type here</option>
<option v-for="aon in data" v-bind:href="'/recorddetails/'+aon.docId" >{{aon.orno}}</option>
</select>
</div>
</div>
My vue js code is
methods:{
orCost: function(e) {
var vm = this;
data = {};
data['or'] = this.or;
$.ajax({
url: '/recorddetails/'+this.or,
data: data,
type: "GET",
dataType: 'json',
success: function(e) {
if (e.status)
{
}
else {
}
}
});
return false;
},
},
The problem is I am not able to redirect to the recorddetails page.
Please help me to redirect to the recorddetails page. I am able to get the docId value and all in the orCost(), but they are not redirecting. Please help me to redirect
You are trying too complicated I guess. Just try this
I have included a form also added a name as no.
<form method="post" action="/recorddetails/" name="myform" class=" form-inline" >
<div class="col-md-4" >
<div class="form-group label-floating">
<label class="control-label">Select Or No</label>
<select class="form-control" name="no" v-model="or" required="" >
<option value="" selected disabled hidden>Choose Type here</option>
<option v-for="aon in data" v-bind:value="aon.docId" >{{aon.orno}}</option>
</select>
</div>
</div>
<button class="btn search-btn" type="submit"><i class="fa fa-search"></i></button>
</form>
I have a short problem. This is my html code:
<select name="searchtips" id="searchtips" class="form-control">
<option value="http://88.99.78.54/category/bonnes-affaires/ameublement/searchkey">Ameublement</option>
<option value="Electro ménager">Electro ménager</option>
<option value="Extérieur">Extérieur</option>
<option value="Hi-tech">Hi-tech</option>
<option value="Prêt-à-porter">Prêt-à-porter</option>
<option value="Jouets">Jouets</option>
<option value="Animaux">Animaux</option>
<option value="Divers">Divers</option>
</select>
<label></label>
<input type="text" class="form-control" name="search" placeholder="Mots cles">
</div>
<div class="container">
<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12 buttons-section">
<button type="submit" class="btn btn-tips btn-block submit-button">J'EN PROFITE</button>
</div>
</div>
This is the jQuery:
$(".btn").click(function(){
var go_to_url = $("#searchtips").find(":selected").val();
document.location.href = go_to_url;
});
Ok, so when I select an category from options and click on J'EN PROFITE all works fine redirect me to the website. But when I write something on "Mots Cles" I want to add on my search key link: http://88.99.78.54/category/bonnes-affaires/ameublement/searchkey. So how can I add the text on my link?
Thank you so much for your help!
You need to check if the field is populated and based on that, you can append it to the URL. Check the below code:
$(".btn").click(function() {
var searchString = '';
if($("#searchString").val() != '')
var searchString = $("#searchString").val();
var go_to_url = $("#searchtips").find(":selected").val();
document.location.href = go_to_url + '/' + searchString;
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select name="searchtips" id="searchtips" class="form-control">
<option value="http://88.99.78.54/category/bonnes-affaires/ameublement/searchkey">Ameublement</option>
<option value="Electro ménager">Electro ménager</option>
<option value="Extérieur">Extérieur</option>
<option value="Hi-tech">Hi-tech</option>
<option value="Prêt-à-porter">Prêt-à-porter</option>
<option value="Jouets">Jouets</option>
<option value="Animaux">Animaux</option>
<option value="Divers">Divers</option>
</select>
<label></label>
<input type="text" class="form-control" name="search" placeholder="Mots cles" id="searchString">
</div>
<div class="container">
<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12 buttons-section">
<button type="submit" class="btn btn-tips btn-block submit-button">J'EN PROFITE</button>
</div>
</div>
I'm fetching the value the user has put into a text field in Jquery but the value is empty. Maybe I'm doing something wrong here or maybe I'm trying to access a clone of something istead of the real element because the inputed value is inside a popover in a fullcalendar. And I'm using bootstrap. Here is my code.
$(document).on('click', '#saveEvent', function () {
//save to db
var yogaspaceid = $("#HiddenYogaSpaceId").val();
var eventTitle = $("#eventTitle").val(); // always empty
//var eventTitle = $("#eventTitle").attr('value'); //always emtpy
var eventStartTime = $( "#timeSelect" ).val();
var eventDuration = $("#timeDuration").val();
$.post(
'/ManageSpaces/SaveNewEvent',
{ id: yogaspaceid, title: eventTitle, startTime: eventStartTime, duration: eventDuration}
);
$calPopOver.popover('destroy');
//refresh callendar or add new event then re render
});
<div id="eventcalendar">
<div class="col-md-10">
<div id='fullcalendar' style="width:100%"></div>
<div id="day-popover-head" class="hide">Add Event</div>
<div id="day-popover-content" class="hide">
#*<form role="form">*#
<div class="form-group">
<label for="eventTitle">Title:</label>
<input type="text" id="eventTitle" class="form-control">
</div>
<div class="form-group">
<label for="timeSelect">Select time:</label>
<select class="form-control" id="timeSelect">
</select>
<br>
<label for="timeDuration">Select duration:</label>
<select class="form-control" id="timeDuration">
<option value="30">30 min</option>
<option value="45">45 min</option>
<option value="60">60 min</option>
<option value="75">75 min</option>
<option value="90">90 min</option>
<option value="105">105 min</option>
<option value="120">120 min</option>
</select>
</div>
<div class="form-inline">
<button type="button" id="saveEvent" class="btn btn-default">Submit</button>
<button type="button" id="cancelEvent" class="btn btn-default">Cancel</button>
</div>
#*</form>*#
</div>
</div>
<div id="eventDetails" class="col-md-2 collapse" style="background-color:yellow;">
hello
</div>
</div>
Had to use
var eventTitle = $(".popover #eventTitle").val();
not sure why I had to use .popover in the call, but found the solution here