Ajax custom in-line message in form - javascript

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>

Related

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);
});
});
});

Adding a Div response on ActionPerformed

I have this javascript/ajax code that I have been tweaking for half a day now to just add a div response that was echoed by php script. Any help would be much appreciated.
<form id="form1" name="form1" method="post" enctype="multipart/form-data">
<select id="machine" name="machine" class="field" >
<option value="" selected="selected">Choose..</option>
<option value="machine1.php">Machine 1</option>
<option value="machine2.php">Machine 2</option>
</select>
</fieldset>
<fieldset>
<legend><strong>Select a file to upload</strong></legend>
<input type="file" id="files" name="files[]" size="40" multiple="multiple" />
<br />
<p></p>
<input type="submit" value="Upload File" id="upload" />
<br />
<br />
</form>
<div id="information"></div>
</fieldset>
<fieldset>
<legend><strong>Uploaded Files</strong></legend>
<div id="uploaded"></div>
</fieldset>
<script type="text/javascript">
function addaction(actionvalue){
$("#form1").attr("action",actionvalue);
};
</script>
As GHOST93 said, there's no AJAX call in your code.
But to me it seems like you're trying to change the action attribute based on what is selected in the select box. That by itself doesn't need an Ajax call.
Try adding something like this into your script
http://jsfiddle.net/W4Km8/7431/
$("#machine").change(function(){
$("#form1").attr("action", $(this).val());
});
And you can probably drop your addaction() function.

Form event onChange not working on dropdown selection

I have one form that works perfectly and changes the action of the form based on radio buttons:
<form name="form1" method="post" action="[[base_urlnt]]/electricity-rate-plans">
<input type="radio" name="energy" value="electricity" checked>
<label for="electricity">Electricity</label>
<input type="radio" name="energy" value="gas" onChange="if(this.checked){document.forms[0].action='[[base_urlnt]]/natural-gas-rate-plans'}">
<label for="gas">Natural Gas</label>
<input name="service_zip_5" type="text" id="search" placeholder="Enter ZIP Code"><button type="submit" class="bigButton">Get Rates</button>
</form>
And I want to do the same thing, but change the action on another form by using onChange but not on radio buttons, but using a dropdown list seen below. What am I doing wrong?
<form name="form1" method="post" action="[[base_url]]alberta/electricity-plans">
<p>Choose Your Service</p>
<select name="service" id="service" title="Choose Your Service">
<option value="Electricity" selected="selected">Electricity</option>
<option value="Gas" onChange="if(this.selected){document.forms[0].action='[[base_url]]alberta/natural-gas-plans'}">Natural Gas</option>
<option value="Dual" onChange="if(this.selected){document.forms[0].action='[[base_url]]alberta/dual-fuel-plans'}">Dual Fuel</option>
</select>
<p>Enter Your ZIP Code</p>
<input name="service_zip_5" type="text" id="zipcode">
<button type="submit" id="submit">Get Started</button>
</form>
I tried
onChange="if(this.checked)
first and the thought that since it is a selection it should be onChange="if(this.selected) but neither work. Is this just not a function?
You need to change it slightly.
Your onchange events should be bound to the select not the individual options.
I have also added an attribute "data-url" to each option to store the url that will need to be added to the form action onchange.
This "data-url" attribute can then be used by the javascript function to update the form action. It also means you don't have to repeat the same code in all of your onchange attributes. You can just call a function that extracts the corresponding "data-url".
See - http://jsfiddle.net/williamtdavies/8kxzaquw/
<form name="form1" method="post" action="[[base_url]]alberta/electricity-plans">
<p>Choose Your Service</p>
<select name="service" id="service" title="Choose Your Service" onChange="changeFormAction(this);">
<option value="Electricity" data-url="[[base_url]]alberta/electricity-plans">Electricity</option>
<option value="Gas" data-url="[[base_url]]alberta/natural-gas-plans">Natural Gas</option>
<option value="Dual" data-url="[[base_url]]alberta/dual-fuel-plans">Dual Fuel</option>
</select>
<p>Enter Your ZIP Code</p>
<input name="service_zip_5" type="text" id="zipcode"/>
<button type="submit" id="submit">Get Started</button>
</form>
<script>
function changeFormAction(elem){
document.forms[0].action = elem.options[elem.selectedIndex].getAttribute("data-url");
}
</script>

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>

validating a form then displaying the other hidden form using jquery

i'm having a bit of a problem with my jquery code..i have two forms in my page..one displays when the user loads the page and the other is hidden(set to style="display:none;"). I want to fill out all the details in the first form and on clicking next, display the hidden form..problem is, the hidden form gets displayed on clicking the 'next' button even when the first form has no input..so i'm guessing i'm doing something wrong with the jquery validation code(i'm using the jQuery Validation plugin)..any help would be appreciated.thanks in advance
Here's how my code looks like:
The DETAILS
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"> </script>
<script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.8/jquery.validate.min.js"></script>
<body>
<div class="item item1">
<form action="index.html" method="get" id = "form1">
<h1>The DETAILS</h1>
<p align="justify">Try our FREE landlord cost calculator and<br>
discover the real cost of letting your property. <br>
<input name="name" type="text" placeholder="your name"class="required" />
<br>
<input name="email" type="text" placeholder="your email" class="required" />
<br>
<input name="phone" id="phone" type="text" placeholder="your phone no" class="required" />
<br>
<input name="postcode" id="postcode" type="text" placeholder="postcode of property to let" class="required" />
<br>
<select name="bedrooms" id="bedrooms" placeholder="bedrooms" class="required" >
<option value="1">1</option>
<option value="2" >2</option>
<option value='' disabled selected="selected">Please Choose</option>
</select>
<br>
<input name="hearAbout" type="text" placeholder="where did your hear about us?" class="required" />
<br>
<button class="submit button1 " id = "next" name="submit" type="submit" value="next"><span class="next ">></span>next</button>
</p>
</form>
</div>
<script type="text/javascript">
$(document).ready(function(){
$("#form1").validate();
});
</script>
<script>
$("#form1").submit(function() {
/* AJAX calls and insertion into #form2 */
$("#form2").show();
return false;
});
</script>
<div class="item item2">
<form action="calculation.php" method="post" id = "form2"style="display:none;">
<h1>The Income</h1>
<label> Estimated monthly rent:£ </label> <input name="rent" id="rent" type="text" /><hr>
THE COSTS STEP 3 <hr>
Agents Commission: <select name="commission" id="commission">
<option value="10%">10%</option>
<option value="12%" selected="selected">12%</option>
</select> <hr>
Estimated Setup Fees:£ <input id="fees" name="fees" type="text" /><hr>
How many weeks in the year do you estimate <br>that your property will<br> be vacant/empty?<input name="weeks" type="text" /><hr>
<button class="submit button2" name="submit" type="submit" value="calculate"><span class="next">></span>calculate</button>
</form>
</div>
your submit action should validate on submitting the first form and then show other form. Please try below code.
<script>
$(document).ready(function(){
$("#form1").submit(function() {
$("#form1").validate();
/* AJAX calls and insertion into #productionForm */
$("#form2").show();
return false;
});
});
</script>
Try using jQuery Form Plugin: http://malsup.com/jquery/form/
Put this in the section:
<script src="http://malsup.github.com/jquery.form.js"></script>
and then modify your script with ajaxForm:
<script>
$("#form1").ajaxForm(function() {
/* AJAX calls and insertion into #productionForm */
$("#form2").show();
return false;
});
</script>
Here's what I am talking about on my comment Harun Thuo :
$(".selector").validate({
rules: {
// simple rule, converted to {required:true}
name: "required",
// compound rule
email: {
required: true,
email: true
}
},
submitHandler: function(form) {
// do other things for a valid form
form.submit();
$("#form2").show();
return false;
});
}
});
You can do the submission here. Read the documentation. You can also control the error placement.
http://jqueryvalidation.org/validate

Categories