I am trying to create a page where the form submit will execute two actions. In index.php,First action is it will use ajax to send data to be saved in the database. Second action is it will change page to index1.php. The code I created successfully saves data to the database but it does not change to index1.php. What is the problem with my code?
index.php
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("#submit").click(function(){
var radio1 = $("input[name=group1]:checked").val();
var radio2 = $("input[name=group2]:checked").val();
var radio3 = $("input[name=group3]:checked").val();
var radio4 = $("input[name=group4]:checked").val();
// Returns successful data submission message when the entered information is stored in database.
var dataString = '&submit1='+ radio1 + '&submit2='+ radio2 + '&submit3='+ radio3 + '&submit4='+ radio4;
if(radio1==''||radio2==''||radio3==''||radio4=='')
{
alert("Please Fill All Fields");
}
else
{
// AJAX Code To Submit Form.
$.ajax({
type: "POST",
url: "ajaxsubmit.php",
data: dataString,
cache: false,
success: function(result){
alert(result);
}
});
}
return false;
});
});
</script>
<form action="index1.php" method="post">
<hr>
<label>Alignment: </label>
<input type="radio" name="group1" value="5"> 5
<input type="radio" name="group1" value="4"> 4
<input type="radio" name="group1" value="3"> 3
<input type="radio" name="group1" value="2"> 2
<input type="radio" name="group1" value="1"> 1
<hr>
<label>Blend: </label>
<input type="radio" name="group2" value="5"> 5
<input type="radio" name="group2" value="4"> 4
<input type="radio" name="group2" value="3"> 3
<input type="radio" name="group2" value="2"> 2
<input type="radio" name="group2" value="1"> 1
<hr>
<label>Warp: </label>
<input type="radio" name="group3" value="5"> 5
<input type="radio" name="group3" value="4"> 4
<input type="radio" name="group3" value="3"> 3
<input type="radio" name="group3" value="2"> 2
<input type="radio" name="group3" value="1"> 1
<hr>
<label>Overall: </label>
<input type="radio" name="group4" value="5"> 5
<input type="radio" name="group4" value="4"> 4
<input type="radio" name="group4" value="3"> 3
<input type="radio" name="group4" value="2"> 2
<input type="radio" name="group4" value="1"> 1
<hr>
<input type="submit" id="submit" name="submit" value="Submit" class="button">
</form>
You need to change location after ajax success:
$.ajax({
type: "POST",
url: "ajaxsubmit.php",
data: dataString,
cache: false,
success: function(result){
alert(result);
window.location = '/index1.php';
}
});
Related
I have many checkbox and other input like text,select ,textarea ,... in my form
I post all data of inputs but checkbox not post data
I saw this link
In Laravel 5.1 Can't post value of checkbox
But I do not want to use hidden button
Is there another way ?????
My form
<form id='test-form'>
<input name='text1'>
<input name='text2'>
<textarea name='text3'></textarea>
<input type="checkbox" name="test1" >
<input type="checkbox" name="test2" >
<input type="checkbox" name="test3" >
<input type="checkbox" name="test4" >
<input type="checkbox" name="test5" >
<input type="checkbox" name="test6" >
<input type="button" id='send'>
</form>
<script>
$(document).on("click", "#send", function () {
$.ajax({
type: 'post',
url: 'add',
data: $("#test-form").serialize(),
success: function (result) {
$('#ajax_div').html(result);
},
})
})
</script>
Your checkboxes will not send any data because they do not have the value attribute.
Change your html to:
<input type="checkbox" name="test[]" value="1" >
<input type="checkbox" name="test[]" value="2" >
<input type="checkbox" name="test[]" value="3" >
<input type="checkbox" name="test[]" value="4" >
<input type="checkbox" name="test[]" value="5" >
<input type="checkbox" name="test[]" value="6" >
<input type="button" id='send'>
Note that I also changed the names to test[], this will send an array of all the checkboxes that are checked.
For example: I check checkbox 1 and checkbox 3, the value that the server will receive is in $_REQUEST['test'] (either POST or GET), and will be an array with content [1,3].
If none of the checkboxes is marked, the $_REQUEST['test'] will be not set which you can check server side using isset().
So basically, my loop outputs four times the html below with different values in $show_id.
Everyform returns the $show_id value of the first form instead of the value of the form when the function is called. How do I fix that ?
my javascript
<script type="text/javascript" >
function addScore() {
var show_id = $('#show_id').val();
var user_id = $('#user_id').val();
var score = $('input[name=tvshowrating]:checked').val();
if(score=='')
{
alert('PleaseEnter A Score');
}
else
{
$("#flash").show();
$("#flash").html('<img src="ajax-loader.gif" />Loading Score...');
$.ajax({
type: "POST",
url: "showscoreajax.php",
data:{
"show_id" : show_id,
"user_id" : user_id,
"score" : score //we are passing the name value in URL
},
cache: false,
success: function(data){
$("#flash").html('Added');
}
});
}
return false;
};
</script>
myhtml
<div id="flash"></div>
<form id="form3B">
<div class="your-score">
<div class="">Your Score</div>
<input class="hover-star" type="radio" name="tvshowrating" value="1" title="1"/>
<input class="hover-star" type="radio" name="tvshowrating" value="2" title="2"/>
<input class="hover-star" type="radio" name="tvshowrating" value="3" title="3"/>
<input class="hover-star" type="radio" name="tvshowrating" value="4" title="4"/>
<input class="hover-star" type="radio" name="tvshowrating" value="5" title="5"/>
<input class="hover-star" type="radio" name="tvshowrating" value="6" title="6"/>
<input class="hover-star" type="radio" name="tvshowrating" value="7" title="7"/>
<input class="hover-star" type="radio" name="tvshowrating" value="8" title="8"/>
<input class="hover-star" type="radio" name="tvshowrating" value="9" title="9"/>
<input class="hover-star" type="radio" name="tvshowrating" value="10" title="10"/>
<input type="hidden" id="show_id" value="<?php echo $row[0]; ?>" />
<input type="hidden" id="user_id" value="<?php echo $user_id ?>" />
<span id="hover-test" style="margin:0 0 0 20px;"></span>
<input id="submitscore" type="submit" value="Submit scores!" onclick="addScore()" />
</div>
</form>
</div>
</div>
This is because you cannot have duplicate id's unlike duplicate class you need different ids for each form. something like this
<input type="hidden" id="show_id-form3B" value="<?php echo $row[0]; ?>" />
Then it will be possible for you to get unique value of each different forms. Some thing like this
function addScore(formId) {
var show_id = $('#show_id-'+formId).val();
var user_id = $('#user_id-'+formId).val();
//add your code
}
I got a form, with 4 questions (1 question has 4 radio buttons), each question is stored inside a div.
With jquery i first show the 1st div, when i press the next button i show the 2nd, and so on.
Heres the entire code for it:
<form style="position:absolute; margin-left:140px;" method="post">
<div id="question1">
Q1
<br/>
<input name="q1" type="radio" value="q1a1">
A1
<br/>
<input name="q1" type="radio" value="q1a2">
A2
<br/>
<input name="q1" type="radio" value="q1a3">
A3
<br/>
<input name="q1" type="radio" value="q1a4">
A4
<br/>
</div>
<div id="question2">
Q2
<br/>
<input name="q2" type="radio" value="q2a1">
A1
<br/>
<input name="q2" type="radio" value="q2a2">
A2
<br/>
<input name="q2" type="radio" value="q2a3">
A3
<br/>
<input name="q2" type="radio" value="q2a4">
A4
<br/>
</div>
<div id="question3">
Q3
<br/>
<input name="q3" type="radio" value="q3a1">
A1
<br/>
<input name="q3" type="radio" value="q3a2">
A2
<br/>
<input name="q3" type="radio" value="q3a3">
A3
<br/>
<input name="q3" type="radio" value="q3a4">
A4
<br/>
</div>
<div id="question4">
Q4
<br/>
<input name="q4" type="radio" value="q4a1">
A1
<br/>
<input name="q4" type="radio" value="q4a2">
A2
<br/>
<input name="q4" type="radio" value="q4a3">
A3
<br/>
<input name="q4" type="radio" value="q4a4">
A4
<br/>
</div>
<br/><br/><br/><br/>
<input type="button" id="submit" name="Submit" />
</form>
<button id="next">Next question</button>
<script>
$('#submit').hide();
$('div[id^="question"]').hide().first().show();
$("#next").click(function (e) {
event.preventDefault();
$('div[id^="question"]:visible').hide().next().show();
});
</script>
This is what i want - when the last (4th) question loads, i want my next button to change into submit button. When i press the submit button it would show witch radio buttons were selected. Any suggestions on how can i do this?
Try something like this:
var currentQuestion = 1;
$(document).ready(function() {
$('.next').click(function(e) {
e.preventDefault();
if(currentQuestion < 4) {
$('#question' + (currentQuestion).toString()).hide();
$('#question' + (currentQuestion + 1).toString()).show();
currentQuestion++;
}
else { // On question four, process the form
// Not sure what you want to do with the data, but
// you can parse them like this:
var selections = {};
for(var i=1;i<=4;i++) {
selections[i] = $('input[name="q' + i.toString() + '"]:checked').val()
}
// Then you have a JS object with your questions and
// corresponding choices, so you can do what you want.
}
});
});
I want to have a set of checkboxes that use AJAX to post to a PHP page, but after the post I want to be able to use the same checkboxes to send another set of selections to the same PHP page, up to a specified number of sets, and then use the sets as data in the PHP page.
I can't figure out how this would be implemented. Any ideas?
index.php:
<form id="checkboxes">
<input type="checkbox" id="1" name="checkboxes[]" value="1" />
<input type="checkbox" id="2" name="checkboxes[]" value="2" />
<input type="checkbox" id="3" name="checkboxes[]" value="3" />
<input type="checkbox" id="1" name="checkboxes[]" value="4" />
<input type="checkbox" id="1" name="checkboxes[]" value="5" />
<input type="button" id="button" name="submit" value="Submit" />
</form>
<script type="text/javascript">
$(function() {
$("#button").click(function() {
$.ajax({
type: "POST",
url: "process.php",
data: $("form#checkboxes").serialize(),
success: function(data) {
$("#div").load('success.php')
}
});
})
})
</script>
process.php:
$data = array();
foreach($_POST['checkboxes'] as $key => $value){
$data[] = "$value";
}
You need to use Sessions, if you want data to prevail over time. So, you can use it this way:
<?php
session_start();
if (!isset($_SESSION["data"]))
$_SESSION["data"] = array();
foreach($_POST['checkboxes'] as $key => $value){
$_SESSION["data"] = "$value";
}
// Print out the final array, if there's a parameter final!
if (isset($_GET["final"]))
foreach ($_SESSION["data"] as $data)
echo $data;
?>
And for the JavaScript, you need to reset the thingy:
<form id="checkboxes">
<input type="checkbox" id="1" name="checkboxes[]" value="1" />
<input type="checkbox" id="2" name="checkboxes[]" value="2" />
<input type="checkbox" id="3" name="checkboxes[]" value="3" />
<input type="checkbox" id="1" name="checkboxes[]" value="4" />
<input type="checkbox" id="1" name="checkboxes[]" value="5" />
<input type="button" id="button" name="submit" value="Submit" />
</form>
<script type="text/javascript">
$(function() {
$("#button").click(function() {
$.ajax({
type: "POST",
url: "process.php",
data: $("form#checkboxes").serialize(),
success: function(data) {
$("#div").load('success.php');
$("form#checkboxes > input[type='checkbox']").removeAttr('checked');
}
});
});
});
</script>
You would use the success function of the ajax call. We would get the value of each checked box and then submit the form through ajax, prevent Default, and then uncheck all boxes after form submit.
$('something').submit(function(e){
e.preventDefault();
var checked = [];
$.each($('input[type=checkbox]'), function(i,v){
if($(this).is(':checked')){
checked.push($(this).val());
}
});
$.ajax({
url: 'someurl.ext',
type: 'post',
data: checked,
success: function(data){
$.each($('input[type=checkbox]'), function(i,v){
$(this).prop('checked', false');
});
}
});
});
hi i want to know about the addcart shopping. im doing the payment process named TRER. i have a problem with clicking button.i setup every code is correct eventhough i could not see any change.
i mentioned my product in radio button, i have a 5 radio buttons which has different amount like 20$ 40$ 58.99$ 70$ and 100$. this is the value of 5 radio button. if i clicks the 2 nd button that amount should add to shopping cart.
i have the little confusion with this. i want to know the action on radio button.
<input name="rmr" type="radio" value="20" onclick="add_payment_value()" />
<input name="rmr" type="radio" value="40" onclick="add_payment_value()" />
<input name="rmr" type="radio" value="58.99" onclick="add_payment_value()" />
<input name="rmr" type="radio" value="70" onclick="add_payment_value()" />
<input name="rmr" type="radio" value="100" onclick="add_payment_value()" />
i want to know the ajax function. should i use jquery and ajax togather.
could guys any one post some code else idea.
Wishing you a happy NewYear
thanks in advance mariya
HTML:
<input name="rmr" type="radio" value="20" />
<input name="rmr" type="radio" value="40" />
<input name="rmr" type="radio" value="58.99" />
<input name="rmr" type="radio" value="70" />
<input name="rmr" type="radio" value="100" />
JS:
var rbRmr = $('input[name="rmr"]');
$(rbRmr).bind('change', function(ev) {
var amount = $(this).val();
$(rbRmr).attr('readonly', 'readonly'); //block until the query ends Ajax
$.ajax({
...
data: {value: amount},
complete: function(xhr, sts) {
$(rbRmr).removeAttr('readonly'); //unblock
},
...
});
});
You should try jQuery $.ajax function! If you want to add price to shopping cart you could do something like:
HTML:
<input name="rmr" type="radio" value="20" />
<input name="rmr" type="radio" value="40" />
<input name="rmr" type="radio" value="58.99" />
<input name="rmr" type="radio" value="70" />
<input name="rmr" type="radio" value="100" />
jQuery:
$(document).ready(function(){
$("input[type='radio']").click(function(){
var price = $(this).val();
add_payment_value(price);
});
});
function add_payment_value(price){
// here you can use $.ajax function to add your 'price value' to your cart
$.ajax({
type: "POST",
url: "add_payment_price.php", // file where you can add price to your database
data: "",
success: function(){} // return something on success
});
}