How to manage two forms with one javascript function? - javascript

I am learning javascript but I still do not get to the book's chapter that could answers my question, so I will be very grateful if somebody can put me in the right track.
Here is the situation:
I am using jquery to submit a form. However I need to put two forms (of the same kind but referring to different object) and I want to use the same jquery function to submit the one I choose.
This is the jquery function:
<script type="text/javascript" src="jquery.min.js"></script>
<script type="text/javascript">
$(function(){
$(".submit").click(function(){
var name = $("#student").val();
var mark = $("#mark").val();
var dataString = 'student='+ student + '&mark=' + mark;
$.ajax
({
type: "POST",
url: "records.php",
data: dataString,
success: function()
{
$('.success').fadeIn(200).show();
$('.error').fadeOut(200).hide();
}
});
return false;
});
});
</script>
These are the forms I would like to pass to the above function depending on the one I click.
<form method="post" name="form">
<input type="hidden" id="student" name="student" value="Mandy" >
Mark: <input size="2" id="mark" name="mark" value="1" type="text">
<input type="submit" value="Submit" class="submit"/>
</form>
<form method="post" name="form">
<input type="hidden" id="student" name="student" value="Fred" >
Mark: <input size="2" id="mark" name="mark" value="1" type="text">
<input type="submit" value="Submit" class="submit"/>
</form>
Thanks

Well, first thing's first - you're going to get nowhere with the same id's on the page. Change the id's on student and mark to classes (which do not have to be unique):
<form method="post" name="form">
<input type="hidden" class="student" name="student" value="Mandy" >
Mark: <input size="2" class="mark" name="mark" value="1" type="text">
<input type="submit" value="Submit" class="submit"/>
</form>
<form method="post" name="form">
<input type="hidden" class="student" name="student" value="Fred" >
Mark: <input size="2" class="mark" name="mark" value="1" type="text">
<input type="submit" value="Submit" class="submit"/>
</form>
Then the jQuery is pretty simple - find the nearest form and seek out the student and mark by class (scoped to the form):
$(".submit").click(function(){
var $form = $(this).closest('form');
var student = $(".student", $form).val();
var mark = $(".mark", $form).val();
var dataString = 'student='+ student + '&mark=' + mark;
$.ajax
({
type: "POST",
url: "records.php",
data: dataString,
success: function()
{
$('.success').fadeIn(200).show();
$('.error').fadeOut(200).hide();
}
});
return false;
});
Live example: http://jsfiddle.net/6Lc8R/

Related

The jQuery ajax does not send more than two values to post url

I have the following code to send the data via Jquery AJAX and notice that I have three values that need to be sent to the receiving file(Addtocart.php).
The transmission and reception were good, but after a while I do not know why it no longer sends.. When one of the values is canceled and two remain, it sends.. but when three values are not sent.
ajax
<script >
$(document).ready(function() {
$("#add-to-card").click(function() {
var quantityq = $("#quantityq").val();
var user = $("#user").val();
var product__id = $("#product__id").val();
$.ajax({
url: 'Addtocart.php',
method: 'POST',
data: {
quantityq: quantityq,
user: user,
product__id: product__id
},
success: function(data) {
$('#result').html(data);
}
});
});
});
</script>
<input step="1" min="1" max="50" name="quantityq" id="quantityq" value="1" title="Qty" class="input-text qty text" size="4" type="number">
<input type="hidden" name="user" id="user" value="72663">
<input type="hidden" name="product__id" id="product__id" value="4">
</div>
<button type="submit" id="add-to-card" class="btn sqaure_bt fll display-f">send</button>
It is not clear what issue you are facing, as you didn't post an example that shows the issue clearly.
But Rather than binding to click event of the button, you should bind to submit event of the form. This way, client-side form validation will work correctly and your JS code will be a lot smaller.
<form id="myForm">
<input step="1" min="1" max="50" name="quantityq" id="quantityq" value="1" title="Qty" class="input-text qty text" size="4" type="number">
<input type="hidden" name="user" id="user" value="72663">
<input type="hidden" name="product__id" id="product__id" value="4">
<button type="submit" id="add-to-card" class="btn sqaure_bt fll display-f">send</button>
</form>
<script>
$(document).ready(function() {
$("#myForm").submit(function(e) {
e.preventDefault();
let postData = $(this).serialize();
$.ajax({
url: 'Addtocart.php',
method: 'POST',
data: postData,
success: function(data) {
$('#result').html(data);
}
});
});
});
</script>

PHP file is not doing anything with String URL

I'm still very new to ajax and jquery, so sorry for the title, I didn't know how to phrase my question.
I'm having a problem with my URL string send: I have a Form set up which allows users to enter currency details as seen below, once the submit button has be pressed i want the data to be sent to a PHP file while having the page not redirect and putting what was sent in the text area below as XML.
I have the JQuery sending the string(to much data i dont want the operation or the textarea to be sent), but the PHP file is not doing anything with the data
Here's my code and my screenshots:
The Form:
<form name="myform" id="myform" method="get">
<input type="radio" name="operation" value="1" id="Post"
onclick="displayFunctionPost()"> Post
<input type="radio" name="operation" value="2" id="Put"
onclick="displayFunctionPut()"> Put
<input type="radio" name="operation" value="3" id="Delete"
onclick="displayFunctionDelete()"> Delete
<br>
Currency Code:
<br>
<input type="text" name="currencycode" id="currencycode"
placeholder="Code" disabled>
<!--currency form-->
<br>
Currency Name
<br>
<input type="text" name= "currencyname" id="currencyname"
placeholder="name" disabled>
<br>
<!---rates form--->
Rate(£=1):
<br>
<input type="number" name="rate" id="rate" placeholder="rate" disabled>
<!---countries form-->
<br>
Countries (comma separated if 1+)
<br>
<input type="text" name= "countries" id="countries" placeholder="countries" disabled>
<br>
<!---xml response--->
<br>
Response Message:
<br>
<div id="textarea"><textarea id="textarea" cols="70" rows="5"></textarea>
</div>
<input type="Submit" name="Submit" id="Submit" value="Submit" >
</form>
And here is the JQuery I have so far:
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script>
$(document).ready(function() {
$("#Submit").click(function(e){
e.preventDefault()
var data = "&currencyname="+currencyname+"&currencycode="+currencycode+"&rate="+rate+"&countries=";
var data = $('#myform').serialize();
$.ajax({
type: 'get',
cache: false,
url: 'currPut.php',
data: data,
processData: false,
contentType: false,
success: function( data ) {
alert('test ');
}
});
});
});
</script>
And here's the PHP file:
<?php
#date_default_timezone_set("GMT");
$xml=new DomDocument("1.0","UTF-8");
$xml->formatOutput=true;
$xml->preserveWhiteSpace=false;
$xml->load('rates.xml');
if(!$xml)
{
$currencies=$xml->createElement("currencies");
$xml->appendChild($currencies);
}
else
{
$currencies=$xml->firstChild;
}
if (isset($_GET['Submit']))
{
$curcode = $_GET['currency-code'];
$newrate = $_GET['rate'];
$cname = $_GET['currency-name'];
$countries = $_GET['countries'];
$today = date("F j,g:i a");
$curr=$xml->createElement("currency");
$currencies->appendChild($curr);
$currate=$xml->createElement("code",$curcode);
$curr->appendChild($currate);
$currate->setAttribute("rate",$newrate);
$name=$xml->createElement("cname",$cname);
$curr->appendChild($name);
$places=$xml->createElement("cntry",$countries);
$curr->appendChild($places);
$xml->save('rates.xml');
}
?>
This is the form.
And this is the console.

Radio function in jQuery POST input

Pressing the button Index.php page, through sending the data to the script Resultx.php page, which responds with an asynchronous call on the same page Index.php.
index.php
<script>
$(document).ready(function() {
$("#input_form").submit(function(){
var fett = $("#fett").val();
$.ajax({
url: 'resultx.php',
type: "POST",
data: "fett="+fett,
dataType: "html",
success: function(data) {
$("div#resultx").html(data);
}
});
return false;
});
});
</script>
<form name="testa" id="input_form" action="" method="post" class="form-shorten" onsubmit="return checkForm(this);">
<input type="text" name="fett" class="form-control input-lg" id="fett" required><br/>
<button name="invio" type="submit" class="btn" value="Send" onclick="loadDoc()"><span class="glyphicon glyphicon-fire"></span> Send</button>
</form>
I wanted to add options with the "radio function" which may send along with the variable fett, also the variable taskOption to Resultx.php page.
<p><label class="radio-inline select">
<input class="radio-inline select" type="radio" name="taskOption" id="taskOption1" value="taskOption1"> option1</label>
<label class="radio-inline select">
<input class="radio-inline select" type="radio" name="taskOption" id="taskOption2" value="taskOption2"> option2</label></p>
Resultx.php
<?php
$fett = $_POST["fett"]; // ok
$taskOptionOK = $_POST["taskOption"]; // This is what I need
echo "$fett ";
echo "$taskOptionOK ";
?>
I know this is trivial but to me jQuery is kryptonite.
To get the value of a checked checkbox/radio you can try this:
var taskOption = $('input[name=taskOption]:checked').val();

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 lose $_POST value

I have the following script
$(document).ready(function(){
$("#SoumettreCarte").submit(function(ev) {
alert('ok');
ev.preventDefault();
ville="bonjour";
$.post("../cartes/essai2.php", {ville:ville})
.done(function (response) {
// window.location.replace("http://localhost/projet2/cartes/essai2.php");
});
});
});
When i click on submit, i want it to redirect me to essai2.php, so i use window.location.replace, but then i lose the value of my $_POST. So my problem, is how to load another page after submitting a form with javascript without losing my $_POST. Thanks for your help.
When i try action="essai2.php", i don't get "ville" in my $_POST.
You can make a hidden field like this:
HTML
<input type="hidden" name="ville" id="ville">
You can change the input field's value like this:
JQUERY
$(document).ready(function(){
ville = 'Bonjour';
$("#ville").val(ville);
//or $("[name=ville]").val(ville);
}
you can do like this
<form action="essai2.php" class ="SoumettreCarte" id="SoumettreCarte" method="post" >
<input type="text" name="pays" id="pays">
<input type="hidden" name="lat" value="">
<input type="hidden" name="lng" value="">
<input type="submit" name="submit" id="soumettre" value="soumettre la carte" >
</form>
in jquery part do like this
var lat = "some lattitude";
var lng = "some longtitude";
$("[name=submit]").click(function(e){
$("[name=lat]").val(lat);
$("[name=lng]").val(lng);
});
<form action="essai2.php" class ="SoumettreCarte" id="SoumettreCarte" method="post" >
<input type="text" name="pays" id="pays">
<input type="hidden" name="lat" value="">
<input type="hidden" name="lng" value="">
<input type="submit" name="submit" id="soumettre" value="soumettre la carte" >
</form>
<script type="text/javascript">
$.post("../cartes/essai2.php", data:$("#SoumettreCarte").serialize())
.done(function (response) {
});</script>
you can try this one..

Categories