How to print a form value using jquery in html - javascript

Suppose I have a form with some input values(name, mobile_number, age and gender).
After fill up the form while I clicked submit button, I want to print the form values.
I have already tried with jQuery but not get the exact result.
Here is my result
But I want to print the form data like this
Name : Raff
Mobile Number : 016*******
Age : **
Gender : Male
Here is my form
<form action="{{url('/add-prescription')}}" method="post" id="new_prescription_form">
<input type="hidden" name="_token" value="{{ csrf_token() }}">
<div class="row clearfix">
<div class="col-lg-8 col-md-8 col-sm-12 col-xs-8">
<div class="card">
<div class="body">
<div class="row clearfix">
<div class="col-sm-6">
<div class="form-group">
<div class="form-line">
<b>Name: </b>
<input type="text" id="name" class="form-control" placeholder="" name="name" required/>
</div>
</div>
</div>
<div class="col-sm-6">
<div class="form-group">
<div class="form-line">
<b>Mobile Number: </b>
<input type="text" id="mobile_number" class="form-control" placeholder="" name="mobile_number" required/>
</div>
</div>
</div>
</div>
<div class="row clearfix">
<div class="col-sm-6">
<div class="form-group">
<div class="form-line">
<b>Age: </b>
<input type="text" id="age" class="form-control" placeholder="" name="age" required/>
</div>
</div>
</div>
<div class= "col-sm-6">
<b>Gender: </b>
<select id="gender" class="form-control show-tick" name="gender" required>
<option value="">-- Please select --</option>
<option value="1">Male</option>
<option value="2">Female</option>
<option value="3">Others</option>
</select>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="row clearfix">
<div class="form-group">
<button type="submit" class="btn btn-primary m-t-15 waves-effect" value="print" onclick="PrintElem()">SUBMIT</button>
</div>
</div>
</form>
jQuery
function PrintElem()
{
var divToPrint=document.getElementById('new_prescription_form');
var newWin=window.open('','Print-Window');
newWin.document.open();
newWin.document.write('<html><body onload="window.print()">'+divToPrint.innerHTML+'</body></html>');
newWin.document.close();
setTimeout(function(){newWin.close();},10);
}
How to solve this ? Anybody help please.


You have to get the values of input fields and add those into the print HTML, this can be achieved using JavaScript , you don't need JQuery for this.
Update your PrintElem function with this and check
function PrintElem()
{
var name = document.getElementById('name').value;
var mobile_number = document.getElementById('mobile_number').value;
var age = document.getElementById('age').value;
var gender = document.getElementById('gender').value;
var divToPrint=document.getElementById('new_prescription_form');
var newWin=window.open('','Print-Window');
newWin.document.open();
newWin.document.write('<html><body onload="window.print()"><div><p><lable>Name :</lable><span>'+name+'</span></p><p><lable>Mobile Number :</lable><span>'+mobile_number+'</span></p><p><lable>Age:</lable><span>'+age+'</span></p><p><lable>Gender</lable><span>'+gender+'</span></p></div></body></html>');
newWin.document.close();
setTimeout(function(){newWin.close();},10);
}
Hope this works for you


<html>
<head>
<title>jQuery example</title>
<link
href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css"
rel="stylesheet" type="text/css" />
<script
src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.js"
type="text/javascript">
</script>
<script
src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"
type="text/javascript">
</script>
<script type="text/javascript">
$(document).ready(function() {
$('#InputText').keyup(function() {
$('#OutputText').val($(this).val());
$('#DIVTag').html('<b>' + $(this).val() + '</b>');
});
});
</script>
</head>
<body>
<div id="JQDiv">
<form id="JQForm" action="">
<p>
<label for="InputText">
Enter Name :
</label><br />
<input id="InputText" type="text" name="inputBox" />
</p>
<p>
<label for="OutputText">
Output in box
</label><br/>
<input id="OutputText" type="text" name="outputBox" readonly="readonly" />
</p>
<p>
Output in div
</p>
<div id="DIVTag"></div>
</form>
</div>
</body>
</html>
Similarly you can do it for other form fields.
Also use angularjs to achieve same functionalities you can
This is what you are looking for?
Let me know.

Related

Get textarea value from selected input by data id, from appended (jquery) elements

I was able to get the value for Description (textarea) from the first service (selected input) (which is right), for the attribute of data id, but I'm having a problem getting it from appended elements, after using the add more button
What am I missing, please?
Below is my code and I can explain further if need be.
<div class="service-box">
<div class="row">
<div class="col-md-12 service-group">
<div class="row">
<div class="form-group mb-3 col-md-6">
<label class="form-label">Service</label>
<div >
<select type="text" class="form-select" placeholder="Services" value="" name="service" id="service">
<option value="" disabled selected>Select your option</option>
#foreach ($services as $service)
<option value="{{$service->service_name}}" data-id="{{$service->description}}">{{$service->service_name}}</option>
#endforeach
</select>
</div>
</div>
<div class="form-group mb-3 col-md-6">
<label class="form-label">Amount</label>
<div >
<input type="text" class="form-control" name="amount" id="amount" placeholder="Amount">
</div>
</div>
<div class="form-group mb-3 col-md-12">
<label class="form-label">Description</label>
<textarea class="form-control" id="description" name="description" rows="6" placeholder="Content.." readonly></textarea>
</div>
</div>
</div>
</div>
</div>
<div class="col-md-12">
<button type="button" id="addmore" class="btn btn-default">Add more</button>
<button type="button" id="remove" class="btn btn-default">Remove</button>
</div>
$("#addmore").click(function() {
var serviceGroupHTML = $('.service-group').html();
$( ".service-box" ).append(serviceGroupHTML);
});
$("#remove").on("click", function() {
$(".service-box").children().last().remove();
});
<!-- This is where the problem lies -->
const service = new Array(document.getElementById("service"));
const description = new Array(document.getElementById("description"));
service[0].addEventListener("change", function(){
description[0].value = $('#service option:selected').data('id');
})
service[1].addEventListener("change", function(){
description[1].value = $('#service option:selected').data('id');
})

As your newly created element are dynamic so you need to bind it with static element. Then, you can get the value of the data-attribute by using $(this).find("option:selected").data("id") and assign this to your textarea of that particular group .
Demo Code :
$("#addmore").click(function() {
$('.service-group:first').clone().find("input:text,textarea").val("").end()
.appendTo('.service-box');
});
$("#remove").on("click", function() {
$(".service-box").children().last().remove();
});
$("body").on("change", "select[name=service]", function() {
//get description for data-attribute
var description = $(this).find("option:selected").data("id");
//assign value
$(this).closest(".service-group").find("textarea[name=description]").val(description)
})
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
<div class="service-box">
<div class="row service-group">
<div class="col-md-12">
<div class="row">
<div class="form-group mb-3 col-md-6">
<label class="form-label">Service</label>
<div>
<select type="text" class="form-select" placeholder="Services" value="" name="service">
<option value="" disabled selected>Select your option</option>
<option value="1" data-id="This test">XYZ</option>
<option value="1" data-id="This test22">Z22</option>
<option value="1" data-id="This test33">YZ33</option>
</select>
</div>
</div>
<div class="form-group mb-3 col-md-6">
<label class="form-label">Amount</label>
<div>
<input type="text" class="form-control" name="amount" id="amount" placeholder="Amount">
</div>
</div>
<div class="form-group mb-3 col-md-12">
<label class="form-label">Description</label>
<textarea class="form-control" name="description" rows="6" placeholder="Content.." readonly></textarea>
</div>
</div>
</div>
</div>
</div>
<div class="col-md-12">
<button type="button" id="addmore" class="btn btn-default">Add more</button>
<button type="button" id="remove" class="btn btn-default">Remove</button>
</div>

get value from form select and then calculate value in an input

I am trying to calculate multiple values based on multiple selections from a and then have the data add up and display in an on the same form. I tried some jquery stuff but didn't really work at all. I've tried using some Javascript to do the calcultions but nothing seems to be happening.
Blade:
#extends('layout.layouts')
#section('content')
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>NCIC - Reports</title>
</head>
<body>
<br>
<h1>New Report</h1>
<br>
<form action="{{ 'storereport' }}" method="POST" enctype="multipart/form-data">
#csrf
<div class="form-group">
<label for="title">Title</label>
<input type="text" class="form-control" name="title">
</div>
<div class="form-group">
<label for="author">Reporting Officer</label>
<input type="text" class="form-control" name="author" value="{{ Auth::user()->name }}">
</div>
<div class="form-group">
<label for="profileid">SSN</label>
<input type="text" class="form-control" name="profileid">
</div>
<div class="form-group">
<label for="report">Report</label>
<textarea class="form-control" name="report" rows="10"></textarea>
</div>
<div class="form-group">
<label for="selectpicker">Select Offences</label>
<select class="selectpicker" id="lawspicker" name="laws[]" data-width="100%" data-live-search="true" multiple>
#foreach($laws as $law)
<option value="{{ $law->name }} {{ $law->fine }} {{ $law->months }}">Offence: {{ $law->name }} </option>
#endforeach
</select>
</div>
<div class="form-group">
<label for="punishment">Punishment</label>
<input type="text" class="form-control" id="punishment" name="punishment">
</div>
<hr style="background-color:white;">
<button type="submit" class="btn btn-success">Submit</button>
<a class="btn btn-info float-right" href="{{ route('reports') }}">Main menu</a>
</form>
</body>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script>
$("#lawspicker").keyup(function(){
$("#punishment").val(parseFloat($("{{ $law->months }}").val()) + parseFloat($('{{ $law->fine }}').val()));
})
$("#lawspicker").change(function(){
$("#punishment").val(parseInt($("#lawspicker").val());
})
</script>
<style>
body{
background-color: #353b48;
color:white;
}
</style>
</html>
#endsection
To clarify, I want {{ $law->months }} & {{ $law->fine }} to add up and then display in #punishment <input>
Thanks for looking!

You can do some thing like this.
Update <option> tag to this
<option data-fine="{{$law['fine']}}" data-months="{{$law['months']}}" value="{{ $law['name'] }} {{ $law['fine'] }} {{ $law['months'] }}">Offence: {{ $law['name'] }} </option>
and you can get data attribute of the selected <option> tag in your script like this.
`$("#lawspicker").change(function() {
var fine = $(this).find(':selected').data('fine');
let months = $(this).find(':selected').data('months');
$("#punishment").val(parseInt(fine+months));
});`
Thanks.

I would be tempted to replace your select element with checkboxes personally.
An example below using jquery to calculate the fine and months when a button is clicked but could be an event of your choosing. I stripped it back from your example so it was easier to see what is going on.
Checkbox example
<div class="container mt-4">
<div class="row">
<div class="col-12">
<div class="form-group">
<h4>Select Offences</h4>
<div class="d-flex">
<div class="custom-control custom-checkbox">
<input type="checkbox" name="laws[]" id="law-a" data-fine="100" data-months="12" class="custom-control-input offence">
<label for="law-a" class="custom-control-label">Law A</label>
</div>
<div class="custom-control custom-checkbox">
<input type="checkbox" name="laws[]" id="law-b" data-fine="999" data-months="6.5" class="custom-control-input offence">
<label for="law-b" class="custom-control-label">Law B</label>
</div>
<div class="custom-control custom-checkbox">
<input type="checkbox" name="laws[]" id="law-c" data-fine="123.5" data-months="8" class="custom-control-input offence">
<label for="law-c" class="custom-control-label">Law C</label>
</div>
</div>
</div>
</div>
<div class="col-12">
<div class="form-group">
<label for="punishment">Punishment</label>
<input type="text" class="form-control" id="punishment" name="punishment" readonly>
</div>
</div>
<div class="col-12">
<button type="submit" id="submit" class="btn btn-primary">Submit</button>
</div>
</div>
</div>
Then some javascript (jquery)
$(function() {
$("#submit").click(function() {
let fine = 0;
let months = 0;
$(".offence").each(function(index, obj) {
if (obj.checked) {
fine += parseFloat($(obj).data("fine"));
months += parseFloat($(obj).data("months"));
}
})
$("#punishment").val("Fine: "+ fine + " Months: " + months);
})
});
When you click submit, the javascript will loop through each element with the offence class and then read the value of the data-fine and calculate the totals.
An example fiddle: https://jsfiddle.net/dbtas60w/
Multiselect example
<div class="container mt-4">
<div class="row">
<div class="col-12">
<div class="form-group">
<h4>Select Offences</h4>
<div class="d-flex">
<div class="custom-control custom-checkbox">
<select class="selectpicker" id="lawspicker" name="laws[]" multiple>
<option data-fine="100" data-months="12">Law A</option>
<option data-fine="999" data-months="6.5">Law B</option>
<option data-fine="123.5" data-months="8">Law C</option>
</select>
</div>
</div>
</div>
</div>
<div class="col-12">
<div class="form-group">
<label for="punishment">Punishment</label>
<input type="text" class="form-control" id="punishment" name="punishment" readonly>
</div>
</div>
<div class="col-12">
<button type="submit" id="submit" class="btn btn-primary">Submit</button>
</div>
</div>
</div>
javascript
$(function() {
$("#submit").click(function() {
let fine = 0;
let months = 0;
$("#lawspicker>option").each(function(index, obj) {
if (obj.selected) {
fine += parseFloat($(obj).data("fine"));
months += parseFloat($(obj).data("months"));
}
})
$("#punishment").val("Fine: "+ fine + " Months: " + months);
})
});
Example fiddle: https://jsfiddle.net/dbtas60w/1/

Sum of two variables from div

I want to sum the two field automatically using javascript ,
After searching more about what I want exactly I found this example on table please how can I change it to work on divs
http://jsfiddle.net/gXdwb/3/
Those are my fields
<div> class="form-group">
<label for="nbStudentA" >Number student A</label>
<div>
{{ form_widget(form.nbStudentA, {'attr':{'class': 'form-control'}}) }}
</div>
</div>
<div class="form-group">
<label for=" nbStudentB " >Number Student B</label>
<div class="col-sm-9">
{{ form_widget(form.nbStudentB, {'attr':{'class': 'form-control'}}) }}
</div>
</div>
<div class="form-group">
<label for="Sum" >Sum Students :</label>
<div>
<input type="text" class="Sum" name="total" value=""/>
</div>
</div>
update:
what I have tried before is to sum the two variables using twig but it's done on the server side and what I want is the effectuate the sum just when the user enter the variables:
<div >
<label>Sum </label>
<div >
{% set foo = form.nbStudentA + form.nbStudentB %}
{{ foo }}
</div>
</div>

Don't know exactly what you want but this does work.If you want from only div
<div id="std-1">1</div>
<div id="std-2">2</div>
<div>{{one + two}}</div>
</div>
//scripts
$scope.one=parseInt(document.getElementById('std-1').innerHTML);
$scope.two=parseInt(document.getElementById('std-2').innerHTML);
or you don't mind input fields and making it dynamic
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app>
<div class="std-1">
Student one: <input ng-model="student.one " type="number"/>
</div>
<div class="std-2">
Student two: <input ng-model="student.two " type="number"/>
</div>
<div>Sum: {{student.one + student.two}}</div>
</div>

Make it simple
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js">
</script>
<div ng-app>
<div id="first">
<input ng-model="first" placeholder="First number" type="text" />
</div>
<div id="second">
<input ng-model="second" placeholder="Second number" type="text" />
</div>
<h1> Sum: {{first--second}} </h1>
</div>

Checking a var is checked

In my case my checkboxes are not ticked by default so when the checkbox var html is ticked I would like it to show the alert.
Is there anyway that this can be done via a variable/use of #id or do I have to do something along the lines of ($('.checkbox_check').is(':checked'))?
I am just trying not to bloat my code if possible.
Code:
<!DOCTYPE html>
<html>
<head>
<title>E-mail Sig Generator</title>
<link href=
"https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css"
rel="stylesheet">
<link href=
"https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-theme.min.css"
rel="stylesheet">
<script src=
"https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script>
$(document).ready(function() {
var name = $('#name').val();
var position = $('#position').val();
var phone = $('#phone').val();
var email = $('#email').val();
var address = $('#address').val();
var facebook = $('#facebook').val();
var website = $('#website').val();
var html = $('#showInline');
var file = $('#html');
if(html)
{
alert("muppets");
}
});
</script>
</head>
<body style="background:#000;">
<div style="width:980px; margin-left:auto; margin-right:auto;">
<table border="0" cellpadding="0" cellspacing="0" width="980px">
<tr>
<td style="text-align:center; background:#000;"></td>
</tr>
</table>
</div>
<div style=
"width:980px;margin-left:auto;margin-right:auto;border-radius:25px;background-color: #ffffff;">
<form class="form-group" id="email" method="post" name="email" style=
"width:380px; padding:20px;">
<div class="form-group">
<label for="name">Name</label> <input class="form-control" id=
"name" type="text">
</div>
<div class="form-group">
<label for="position">Position</label> <input class=
"form-control" id="position" type="text">
</div>
<div class="form-group">
<label for="phone">Phone</label> <input class="form-control"
id="phone" type="tel">
</div>
<div class="form-group">
<label for="email">E-Mail</label> <input class="form-control"
id="email" type="email">
</div>
<div class="form-group">
<label for="address">Address</label> <input class=
"form-control" id="address" type="text">
</div>
<div class="form-group">
<label for="facebook">Facebook</label> <input class=
"form-control" id="facebook" type="text">
</div>
<div class="form-group">
<label for="website">Website</label> <input class=
"form-control" id="website" type="text">
</div>
<div class="form-group">
<div class="checkbox">
<label><input id="html" type="checkbox" value="">
<strong>Download as a HTML file</strong></label>
</div>
</div>
<div class="form-group">
<label><input id="showInline" type="checkbox" value="">
<strong>Show as HTML Code</strong></label>
</div>
</form>
<div id="inlineDIV" onchange="showInlineDIV()" style="display:none;">
<textarea id="showInlineHTML" readonly="readonly">
</textarea>
</div>
</div>
</body>
</html>

For that you have to attach event delegate to jquery .change() event
$(document).ready(function(){
var html = $('#showInline');
html.change(function() {
alert("muppets : "+ $(this).is(":checked"));
});
});
Try the FIDDLE.
Hope this helps..

You can use the var html directly as it is a valid jquery object. Use below code -
if(html.is(':checked'))
{
alert("muppets");
}

$(document).ready(function() {
var html = $('#showInline');
if (html.prop('checked')) {
alert("muppets");
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<div style="width:980px;margin-left:auto;margin-right:auto;border-radius:25px;background-color: #ffffff;">
<form class="form-group" id="email" method="post" name="email" style="width:380px; padding:20px;">
<div class="form-group">
<label>
<input id="showInline" type="checkbox" value="" checked>
<strong>Show as HTML Code</strong>
</label>
</div>
</form>
</div>

First I suggest you to change jquery and bootstrap library sequence on page.
Please follow below code.
<!DOCTYPE html>
<html>
<head>
<title>E-mail Sig Generator</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"
type="text/javascript"></script>
<script src=
"https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<link href=
"https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css"
rel="stylesheet">
<link href=
"https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-theme.min.css"
rel="stylesheet">
<script>
$(document).ready(function() {
var name = $('#name').val();
var position = $('#position').val();
var phone = $('#phone').val();
var email = $('#email').val();
var address = $('#address').val();
var facebook = $('#facebook').val();
var website = $('#website').val();
var html = $('#showInline');
var file = $('#html');
$("input[type='checkbox']").on("click",function() {
alert("muppets");
});
});
</script>
</head>
<body style="background:#000;">
<div style="width:980px; margin-left:auto; margin-right:auto;">
<table border="0" cellpadding="0" cellspacing="0" width="980px">
<tr>
<td style="text-align:center; background:#000;"></td>
</tr>
</table>
</div>
<div style=
"width:980px;margin-left:auto;margin-right:auto;border-radius:25px;background-color: #ffffff;">
<form class="form-group" id="email" method="post" name="email" style=
"width:380px; padding:20px;">
<div class="form-group">
<label for="name">Name</label> <input class="form-control" id=
"name" type="text">
</div>
<div class="form-group">
<label for="position">Position</label> <input class=
"form-control" id="position" type="text">
</div>
<div class="form-group">
<label for="phone">Phone</label> <input class="form-control"
id="phone" type="tel">
</div>
<div class="form-group">
<label for="email">E-Mail</label> <input class="form-control"
id="email" type="email">
</div>
<div class="form-group">
<label for="address">Address</label> <input class=
"form-control" id="address" type="text">
</div>
<div class="form-group">
<label for="facebook">Facebook</label> <input class=
"form-control" id="facebook" type="text">
</div>
<div class="form-group">
<label for="website">Website</label> <input class=
"form-control" id="website" type="text">
</div>
<div class="form-group">
<div class="checkbox">
<label><input id="html" type="checkbox" value="">
<strong>Download as a HTML file</strong></label>
</div>
</div>
<div class="form-group">
<label><input id="showInline" type="checkbox" value="">
<strong>Show as HTML Code</strong></label>
</div>
</form>
<div id="inlineDIV" onchange="showInlineDIV()" style="display:none;">
<textarea id="showInlineHTML" readonly="readonly">
</textarea>
</div>
</div>
</body>
</html>

$(document).on('click', '#showInline', function() {
if (html.get(0).checked) {
alert('Checked')
}
});
HERE

Try this
if(html.prop('checked')){
alert('Do something');
}

I want to make you notice that you may have an scope issue with the html variable, as it is declared inside the closure of the function called on document ready. So once the function is executed the variable "disappears". One solution might be declare the variables you want to initialize as global vars, meaning outside any function declaration.
var html; //declare as global
$(document).ready(function() {
var name = $('#name').val();
var position = $('#position').val();
var phone = $('#phone').val();
var email = $('#email').val();
var address = $('#address').val();
var facebook = $('#facebook').val();
var website = $('#website').val();
var file = $('#html');
html = $('#showInline'); //initialize
if(html)
{
alert("muppets");
}
});
Although it is not a very elegant solution. You may think of using a class and initialize a instance on your document ready callback.

display two different forms using value from dropdown

I want to display form 1 if drop down value selected is one and similarly display form 2 if drop down value selected is two .
I am using JS to do this. Here is the code .please HELP ME.
I am not aware of JQuery so please help me from basics if the solution is in JQuery
<!DOCTYPE html>
<!--
To change this license header, choose License Headers in Project Properties.
To change this template file, choose Tools | Templates
and open the template in the editor.
-->
<html>
<head>
<meta charset="UTF-8">
<title></title>
<link rel="stylesheet" type="text/css" href="asset_sim.css">
<script>
$('p select[name=asset_sim]').change(function () {
if ($(this).val() == 'asset') {
$('#asset_form').show();
} else {
$('#sim_form').show();
}
});
$('p select[name=asset_sim]').change(function () {
if ($(this).val() == 'sim') {
$('#sim_form').show();
} else {
$('#asset_form').hide();
}
});
</script>
</head>
<body>
<?php
include 'header.php';
include 'footer.php';
include 'config.php';
//
//if (isset($_POST['sub'])) {
// $username = filter_input(INPUT_POST, 'User_name');
// $fullname = filter_input(INPUT_POST, 'Full_name');
// $email = filter_input(INPUT_POST, 'email', FILTER_VALIDATE_EMAIL);
// $roll = filter_input(INPUT_POST, 'role');
// $contact = filter_input(INPUT_POST, 'contact_no');
//
//
// if (($sql = $conn->prepare("insert into tmtool.user_master (Username,Full_name,Email,Role,Contact_no)"
// . "values (?,?,?,?,?)")) == FALSE) {
// echo "false";
// }
// $sql->bind_param('sssss', $username, $fullname, $email, $roll, $contact);
//
// // 2nd query for execution
//
// if (($sql1 = $conn->prepare("insert into tmtool.login (Username,Password) values (?,?)")) == FALSE) {
// echo "false";
// }
// $sql1->bind_param('ss', $username, $tmppass);
//
//inserting userdetails into database
}
?>
<div id="page-wrapper">
<div class="row">
<div class="col-lg-12">
<h1 class="page-header">Assets and SIM Management</h1>
</div>
</div>
<div class="row">
<div class="col-lg-12">
<div class="panel panel-default">
<div class="panel-heading">
<label>Enter Asset Details</label>
</div>
<div class="panel-body">
<p>Asset or Sim details :
<select name="asset_sim" required="required">
<option value="">-- Select an Option --</option>
<option value="asset">Enter Asset Details</option>
<option value="sim">Enter SIM Details</option>
</select>
</p>
<div class="dataTable_wrapper">
<div id="asset_form">
<form action="AssetMaster.php" method="POST" role="form">
<div class="col-lg-6">
<div class="form-group">
<label>Device Name</label>
<select name="device_name">
<option>Laptop</option>
<option>Mobile</option>
<option>Data Card</option>
</select>
</div>
<div class="form-group">
<label>Company name</label>
<input class="form-control" name="company_name" type="text" id="company_name" required="required" placeholder="Enetr Company name" title="Please Enetr company name of Device">
</div>
<div class="form-group">
<label>Model Number</label>
<input class="form-control" name="Model_number" type="text" id="model_number" required="required" placeholder="Enetr Model number" title="Enter model number of Your Device ">
</div>
<div class="form-group">
<label>OS version</label>
<input class="form-control" name="OS_version" required="required" id="Os-versionid" placeholder="Enter OS version detail" oninvalid="setCustomValidity('Enter OS version details')" onchange="try {
setCustomValidity('')
} catch (e) {
}"/>
</div>
</div>
<div class="col-lg-12">
<button type="submit" class="btn btn-primary" id="submit" name="sub" data-toggle="modal" data-target="#myModal">Submit</button>
<button type="reset" class="btn btn-primary">Reset</button>
</div>
</form>
</div>
</div>
<div class="dataTable_wrapper">
<div id="sim_form">
<form action="AssetMaster.php" method="POST" role="form">
<div class="col-lg-6">
<div class="form-group">
<label>Type</label>
<select name="sim_type">
<option>Prepaid</option>
<option>Postpaid</option>
</select>
</div>
<div class="form-group">
<label>Simcard Number</label>
<input class="form-control" name="simcard_no" type="text" id="simcard_name" required="required" placeholder="Enetr Simcard Number" title="Please Enter Simcard Number">
</div>
<div class="form-group">
<label>Service Provider</label>
<input class="form-control" name="service_provider" type="text" id="service_provider" required="required" placeholder="Enter Service provider name" title="Enter Service provider name ">
</div>
</div>
<div class="col-lg-12">
<button type="submit" class="btn btn-primary" id="submit" name="sub" data-toggle="modal" data-target="#myModal">Submit</button>
<button type="reset" class="btn btn-primary">Reset</button>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- jQuery -->
<!--<script src="../bower_components/jquery/dist/jquery.min.js"></script>-->
<!-- Bootstrap Core JavaScript -->
<!--<script src="../bower_components/bootstrap/dist/js/bootstrap.min.js"></script>-->
<!-- Metis Menu Plugin JavaScript -->
<script src="../../bower_components/metisMenu/dist/metisMenu.min.js"></script>
<!-- DataTables JavaScript -->
<script src="../../bower_components/DataTables/media/js/jquery.dataTables.min.js"></script>
<script src="../../bower_components/datatables-plugins/integration/bootstrap/3/dataTables.bootstrap.min.js"></script>
<!-- Custom Theme JavaScript -->
<script src="../../dist/js/sb-admin-2.js"></script>
<!-- Page-Level Demo Scripts - Tables - Use for reference -->
<script>
$(document).ready(function () {
$('#dataTables-example').DataTable({
responsive: true
});
});
</script>
</body>
</html>

Here you can see a working snippet:
$(document).ready(function(){
var selector = $("#form_selector");
var last = null;
function update(){
var selected = selector.val();
if (last)
$("#form_" + last).css('display', 'none');
$("#form_" + selected).css('display', 'block');
last = selected;
}
update();
selector.on("change", update);
});
form {
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="form_selector">
<option value="1">1</option>
<option value="2">2</option>
</select>
<hr>
<form name="form" id="form_1">
<input type="text" name="username" placeholder="Your Username"></input><br>
<input type="submit" value="Submit Form 1"></input><br>
</form>
<form name="form" id="form_2">
<input type="email" name="email" placeholder="Your Email"></input><br>
<input type="submit" value="Submit Form 2"></input><br>
</form>

Categories