0

I have two conditions, if two conditions are matching the given value should display. I am using input value as Drop down. If the value of two drop-downs matched i need to display my value on same page. For Example: dropDown1 selection -> KM : 10(Dropdown), dropDown1 selection -> Fueal : 2 Lit(Dropdown)

Output: Happy Jorney On the same page and below the drop-down List.

  • if you need a condition within ajax functionality (or) before ajax functionality – divya sekar Apr 9 at 5:05
  • @divyasekar If two drop-down select and if it is matching the value should be display below like i.stack.imgur.com/Kg9pA.png – zus Apr 9 at 5:19
  • You are are confusing using word Ajax. its on page JS give me few minutes I will let you know. – Hassan Ali Shahzad Apr 9 at 5:21
  • @HassanAliShahzad Let me explain, i need the the value should be display without click or refresh the page, so that i need AJAX, – zus Apr 9 at 5:23
  • ok now its second part after selection from where you will get result ? on the basis of two matched sections. – Hassan Ali Shahzad Apr 9 at 5:25
1

For that you have two files basically, look the code your will get clear understanding for request flow also it will not change user selction:

your html file will be testing.html

<html>
<head>
<title> Upgrade Cost</title>
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
</head>

<form method='POST' action='home.php'>

Name : <input type="text" name="name"/><br/><br/>
Email Id : <input type="text" name="email_id"/><br/><br/>
Contact Number : <input type="text" name="contact_number"/><br/><br/>
I have :
<select id="old">
<option value = "select_option">Select Option</option>
<option value = "one">One</option>
<option value = "two">Two</option>
<option value = "three">Three</option>
<option value = "four">Four</option>
<option value = "five">Five</option>
</select><br/><br/>
I want :
<select id="new">
<option value = "select_option">Select Option</option>
<option value = "one">One</option>
<option value = "two">Two</option>
<option value = "three">Three</option>
<option value = "four">Four</option>
<option value = "five">Five</option>
</select>
</form>
<!-- <button id="btn_check_value">Check for value</button> -->
<div id="result"></div>
<script>
$(document).ready(function(){

$('#new').on('change',function(){

var old_val = $("#old option:selected").val();
var new_val = $("#new option:selected").val();
$.ajax({
type: "POST",
url: "home.php",
dataType: "text",
data: { old: old_val, new: new_val },
success: function(data) {
    // Check the output of ajax call on firebug console
    //console.log(data);
    $('#result').html(data);
}
});

});
});

</script>
</html>

you ajax file will be:

<?php
if(isset($_POST['old']) && isset($_POST['new'])){
$old = $_POST['old'];
$new = $_POST['new'];
if($old=='one'&&$new=='two'){

// echo json_encode(array('Cost 10$'));
echo "Upgrade Code : 10$";
}

elseif($old=='one'&&$new=='three')
{
echo "Upgrade Code : 20$";
}

elseif($old=='one'&&$new=='four')
{
echo "Upgrade Code : 30$";
}


elseif($old=='one'&&$new=='five')
{
echo "Upgrade Code : 40$";
}
else{
echo "Choose Valid Options";;
}
}
?>

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.