I have this code where it works is to know how many people are booked for the day that I enter in the form.
The query works well and returns the expected result.
The problem is that I would like to show this result next to an hour of the select, so it doesn't show me.
If the div of the id result-date or pull out of the select of the different time options I see the result.
What could I do to see the result of the query within an option?
This is the file of check_availablity.php.
require('config.php');
sleep(1);
$data = $_POST['data'];
$result = $connexion->query(
'SELECT persones FROM reservas where data = \''.$data.'\' ORDER by hora ASC'
);
if ($result->num_rows > 0) {
foreach ($result as $hores){
echo $hores['persones'].' llocs disponibles.';
}
}
else{
echo 'Esta tot reservat';
}
<!DOCTYPE HTML>
<html>
<head>
<title>Rem la Ràpita</title>
<link rel="icon" type="image/png" href="../images/favicon.png" sizes="32x32"/>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<!--Comprovar la disponibilitat d'horari-->
<script src="https://code.jquery.com/jquery-3.2.1.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('#data').on('blur', function(){
var data = $(this).val();
var dataString = 'data='+data;
$.ajax({
type: "POST",
url: "check_availablity.php",
data: dataString,
success: function(data) {
$('#result-data').fadeIn(1000).html(data);
}
});
});
});
</script>
</head>
<body>
<div class="container-login">
<div class="wrap-login" style="width: 1000px">
<!--<form class="login-form validate-form" action="bd/reservar.php" method="post">-->
<form class="login-form validate-form" action="bd/reservar.php" method="post">
<span class="login-form-title"></span>
<div class="row">
<div class="wrap-input100 col-xs-6 espai-davant-text" data-validate = "Nom incorrecte">
<input class="input100" type="text" id="nom" name="nom" placeholder="">
<span class="focus-efecto"></span>
</div>
<div class="wrap-input100 col-xs-6 espai-davant-text" data-validate = "Email incorrecto">
<input class="input100" type="text" id="apellidos" name="apellidos" placeholder="" >
<span class="focus-efecto"></span>
</div>
<div class="wrap-input100" style="width:100%" data-validate = "Email incorrecto">
<input class="input100" type="text" id="email" name="email" placeholder="">
<span class="focus-efecto"></span>
</div>
<div class="wrap-input100 col-xs-6 espai-davant-text" data-validate="Telefon incorrecto">
<input class="input100" type="text" id="telefon" name="telefon" placeholder="">
<span class="focus-efecto"></span>
</div>
<div class="wrap-input100 col-xs-6 espai-davant-text" data-validate="Persones incorrecto">
<input class="input100" type="number" id="persones" name="persones" placeholder="">
<span class="focus-efecto"></span>
</div>
<div class="wrap-input100" style="width:100%" data-validate="Data incorrecto">
<input class="input100" type="date" id="data" name="data" placeholder="Fecha">
<span class="focus-efecto"></span>
</div>
<div class="wrap-input100" style="width:100%" data-validate="Hora incorrecto">
<select name="hora" id="hora" class="input100">
<option disabled selected></option>
<option value="12:00">12:00</option><div id="result-data"></div>
<option value="12:30">12:30</option>
<option value="13:00">13:00</option>
<option value="13:30">13:30</option>
<option value="14:00">14:00</option>
<option value="20:00">20:00</option>
<option value="20:30">20:30</option>
<option value="21:00">21:00</option>
<option value="21:30">21:30</option>
<option value="22:00">22:00</option>
<option value="22:30">22:30</option>
</select>
<span class="focus-efecto"></span>
</div>
<div class="container-login-form-btn">
<div class="wrap-login-form-btn">
<div class="login-form-bgbtn"></div>
<button type="submit" name="submit" class="login-form-btn">RESERVAR</button>
</div>
</div>
</div>
</form>
</div>
</div>
</body>
</html>
It looks like you are trying to use ajax to change the selected option ? That will not work. And a div tag on the option will not work either.
The select is normally styled by the OS and it is not easy to change things in it. It makes no sense to use ajax to display something next to an option.
If your goal is to update the dropdown, before the user opens it, then use the ajax to replace the complete select element, including the options.
Related
I a Google Spreadsheet filling from html form.
Function processForm works well and all fields are getting correct data
My problem with launchForm as I'm thinking.
The form opens in a popup window, but inputs don't load datalist elements. Unfortunately I don't understand why
function launchForm() {
var htmlApp = HtmlService
.createHtmlOutputFromFile('Index')
.setSandboxMode(HtmlService.SandboxMode.IFRAME)
.setWidth(400)
.setHeight(450);
SpreadsheetApp.getActiveSpreadsheet().show(htmlApp);
}
function processForm(formObject) {
var url = "LINK_TO_SPREADSHEET_OF_DATA_COLLECTION";
var ss = SpreadsheetApp.openByUrl(url);
var ws = ss.getSheetByName("List");
var asiaTime = Utilities.formatDate(new Date(), Session.getScriptTimeZone(), "yyyy-MM-dd");
var nameParam = [ws.getLastRow(),
formObject.recipe_name,
formObject.place_name,
formObject.servingOrder,
formObject.cuisine_name,
asiaTime]
ws.appendRow(nameParam);
}
<!DOCTYPE html>
<html>
<head>
<base target="_top">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
</head>
<body>
<div class="container">
<div class="row">
<div class="col-6">
<form id="myForm" onsubmit="handleFormSubmit(this)">
<p class="h4 mb-4 text-center">New Recipe</p>
<div class="form-row">
<div class="form-group col-md-6">
<label for="recipe_name">Recipe Name</label>
<input type="text" class="form-control" id="recipe_name" name="recipe_name" placeholder="Recipe Name" required>
</div>
<div class="form-group col-md-6">
<label for="cuisine_name">Cuisine</label>
<input id="cuisine_name" name="cuisine_name" type="text" class="form-control" placeholder="Cuisine Name" list="cuisine_name" required>
<datalist id="cuisine_name">
<option value="Asian"></option>
<option value="Western"></option>
</datalist>
</div>
</div>
<div class="form-row">
<div class="form-group col-md-6">
<p>Place name</p>
<div class="form-check form-check-inline">
<input class="form-check-input" type="radio" name="place_name" id="ll4h" value="LL4H" required>
<label class="form-check-label" for="ll4h">LL4H</label>
</div>
<div class="form-check form-check-inline">
<input class="form-check-input" type="radio" name="place_name" id="ll4t" value="LL4T" required>
<label class="form-check-label" for="female">LL4T</label>
</div>
</div>
<div class="form-group col-md-6">
<label for="servingOrder">Serving order</label>
<input id="servingOrder" name="servingOrder" type="text" class="form-control" placeholder="Serving order" list="servingOrder" required>
<datalist id="servingOrder">
<option value="Starter"></option>
<option value="Main course"></option>
<option value="Veggi side"></option>
<option value="Carbs side"></option>
<option value="Dessert"></option>
<option value="Dough"></option>
<option value="Sauce"></option>
<option value="Drink"></option>
<option value="Other"></option>
</datalist>
</div>
</div>
<button type="submit" class="btn btn-primary btn-block">Submit</button>
</form>
<div id="output"></div>
</div>
</div>
</div>
<script>
// Prevent forms from submitting.
function preventFormSubmit() {
var forms = document.querySelectorAll('form');
for (var i = 0; i < forms.length; i++) {
forms[i].addEventListener('submit', function(event) {
event.preventDefault();
});
}
}
window.addEventListener('load', preventFormSubmit);
function handleFormSubmit(formObject) {
google.script.run.processForm(formObject);
document.getElementById("myForm").reset();
}
</script>
</body>
</html>
Where I'm wrong and how to fix it? What is the best way to close popup after submitting?
You want to put datalist to the input tag.
For this, how about this answer? I think that the reason of your issue is that the same id is used to the input tag and the datalist tag. So how about the following modification?
From:
<input id="cuisine_name" name="cuisine_name" type="text" class="form-control" placeholder="Cuisine Name" list="cuisine_name" required>
<datalist id="cuisine_name">
To:
<input id="cuisine_name" name="cuisine_name" type="text" class="form-control" placeholder="Cuisine Name" list="cuisine_name_datalist" required>
<datalist id="cuisine_name_datalist">
And
From:
<input id="servingOrder" name="servingOrder" type="text" class="form-control" placeholder="Serving order" list="servingOrder" required>
<datalist id="servingOrder">
To:
<input id="servingOrder" name="servingOrder" type="text" class="form-control" placeholder="Serving order" list="servingOrder_datalist" required>
<datalist id="servingOrder_datalist">
Reference:
The HTML Data List element
While editing a podcast, I am getting an option being selected through the PHP code and now I want to write a j-query if the option is selected from the select field.
I am gone through many question and answer give in the Stack Overflow but all of them seems to output the effect in click even or in change event.
<div class="form-group pt-2 input-upload">
<label for="EditedBy">Podcast Type : </label>
<select class="form-control" name="podcast_type" id="podcast_type">
<option selected disabled hidden>-- Select Any One --</option>
<option id="audio1" name="audio1" value="audio1" >Audio</option>
<option id="video1" name="video1" value="video1" >Video</option>
</select>
</div>
<div class="form-group" id="input-upload">
<label for="avatar">Upload Audio:</label><br>
<input type="file" class="upload" id="fileUp" name="audio">
</div>
<div class="form-group" style="width:30%" id="input-file">
<label for="Filename">Audio Duration: </label>
<input id="infos" class="form-control" name="duration">
</div>
<div class="form-group" id="input-upload-file">
<label for="avatar">Video url:</label><br>
<input type="url" name="link" id="link" class="form-control" placeholder="link" value="">
</div>
I have already written j-query if the user is trying to add a post but when editing post my j-query code does not work like expected.
Following is the code I have written while adding a podcast.
$('#podcast_type').change(function(){
if($('#podcast_type').val() == 'audio1') {
$('#input-upload').show();
$('#input-file').show();
} else {
$('#input-upload').hide();
$('#input-file').hide();
}
});
$('#podcast_type').change(function(){
if($('#podcast_type').val() == 'video1') {
$('#input-upload-file').show();
} else {
$('#input-upload-file').hide();
}
});
You can combine the 2 events in one.
$('#podcast_type').change(function() {
var val = $('#podcast_type').val(); //Get value of the select
if (val == 'audio1') { //If audio, hide 1 input. Show 2
$('#input-upload').show();
$('#input-file').show();
$('#input-upload-file').hide();
} else if (val == 'video1') { //If video, hide 2 input. Show 1
$('#input-upload').hide();
$('#input-file').hide();
$('#input-upload-file').show();
} else {
$('#input-upload').hide(); //Hide all intially
$('#input-file').hide();
$('#input-upload-file').hide();
}
}).change(); //Trigger change on load.
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="form-group pt-2 input-upload">
<label for="EditedBy">Podcast Type : </label>
<select class="form-control" name="podcast_type" id="podcast_type">
<option selected disabled hidden>-- Select Any One --</option>
<option id="audio1" name="audio1" value="audio1">Audio</option>
<option id="video1" name="video1" value="video1">Video</option>
</select>
</div>
<div class="form-group" id="input-upload">
<label for="avatar">Upload Audio:</label><br>
<input type="file" class="upload" id="fileUp" name="audio">
</div>
<div class="form-group" style="width:30%" id="input-file">
<label for="Filename">Audio Duration: </label>
<input id="infos" class="form-control" name="duration">
</div>
<div class="form-group" id="input-upload-file">
<label for="avatar">Video url:</label><br>
<input type="url" name="link" id="link" class="form-control" placeholder="link" value="">
</div>
Before listening to change event, you need to Initialize inputs state on page load
<?php
$podcast_type = 'audio1';
?>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<div class="form-group pt-2 input-upload">
<label for="EditedBy">Podcast Type : </label>
<select class="form-control" name="podcast_type" id="podcast_type">
<option disabled>-- Select Any One --</option>
<option id="audio1" value="audio1" <?= ($podcast_type == 'audio1') ? 'selected' : '' ?>>Audio</option>
<option id="video1" value="video1" <?= ($podcast_type == 'video1') ? 'selected' : '' ?>>Video</option>
</select>
</div>
<div class="form-group" id="input-upload">
<label for="avatar">Upload Audio:</label><br>
<input type="file" class="upload" id="fileUp" name="audio">
</div>
<div class="form-group" style="width:30%" id="input-file">
<label for="Filename">Audio Duration: </label>
<input id="infos" class="form-control" name="duration">
</div>
<div class="form-group" id="input-upload-file">
<label for="avatar">Video url:</label><br>
<input type="url" name="link" id="link" class="form-control" placeholder="link" value="">
</div>
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
<script>
$(function() {
var podcast = $('#podcast_type');
var podcast_type = podcast.val();
// Initialize input state on page load
setPodcastType(podcast_type);
podcast.change(function() {
setPodcastType($(this).val());
});
function setPodcastType(podcast_type)
{
if (podcast_type == 'audio1') {
$('#input-upload').show();
$('#input-file').show();
// Hide video input
$('#input-upload-file').hide();
return true;
}
$('#input-upload-file').show();
// Hide audio input
$('#input-upload').hide();
$('#input-file').hide();
}
});
</script>
</body>
</html>
I have this dynamic form that lets me add more form inputs if user selects the + button or remove it if they select the - button. In this form I have a drop down selector I wanted to take this selector and make it so the user can select multiple options in the select box. I have included the select2 API however I am not able to select multiple options. Is there anything I can do to make this work?
var room = 1;
function education_fields() {
room++;
var objTo = document.getElementById('education_fields')
var divtest = document.createElement("div");
divtest.setAttribute("class", "form-group removeclass"+room);
var rdiv = 'removeclass'+room;
divtest.innerHTML = '<div class="col-sm-3 nopadding"><div class="form-group"> <input type="text" class="form-control" id="Schoolname" name="Schoolname[]" value="" placeholder="School name"></div></div><div class="col-sm-3 nopadding"><div class="form-group"> <input type="text" class="form-control" id="Major" name="Major[]" value="" placeholder="Major"></div></div><div class="col-sm-3 nopadding"><div class="form-group"> <input type="text" class="form-control" id="Degree" name="Degree[]" value="" placeholder="Degree"></div></div><div class="col-sm-3 nopadding"><div class="form-group"><div class="input-group"> <select multiple="multiple" class="form-control" id="educationDate" name="educationDate[]"><option value="">Date</option><option value="2015">2015</option><option value="2016">2016</option><option value="2017">2017</option><option value="2018">2018</option> </select><div class="input-group-btn"> <button class="btn btn-danger" type="button" onclick="remove_education_fields('+ room +');"> <span class="glyphicon glyphicon-minus" aria-hidden="true"></span> </button></div></div></div></div><div class="clear"></div>';
objTo.appendChild(divtest)
}
function remove_education_fields(rid) {
$('.removeclass'+rid).remove();
}
<head>
<meta charset="utf-8">
<meta name="robots" content="noindex, nofollow">
<title>Dynamic Form Fields - Add & Remove Multiple fields - Bootsnipp.com</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
<!-- select2 boxes-->
<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.5/css/select2.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.5/js/select2.full.min.js"></script>
</head>
<div class="panel panel-default">
<div class="panel-heading">Dynamic Form Fields - Add & Remove Multiple fields</div>
<div class="panel-heading">Education Experience</div>
<div class="panel-body">
<div id="education_fields">
</div>
<div class="col-sm-3 nopadding">
<div class="form-group">
<input type="text" class="form-control" id="Schoolname" name="Schoolname[]" value="" placeholder="School name">
</div>
</div>
<div class="col-sm-3 nopadding">
<div class="form-group">
<input type="text" class="form-control" id="Major" name="Major[]" value="" placeholder="Major">
</div>
</div>
<div class="col-sm-3 nopadding">
<div class="form-group">
<input type="text" class="form-control" id="Degree" name="Degree[]" value="" placeholder="Degree">
</div>
</div>
<div class="col-sm-3 nopadding">
<div class="form-group">
<div class="input-group">
<select multiple="multiple" class="form-control" id="educationDate" name="educationDate[]">
<option value="">Date</option>
<option value="2015">2015</option>
<option value="2016">2016</option>
<option value="2017">2017</option>
<option value="2018">2018</option>
</select>
<div class="input-group-btn">
<button class="btn btn-success" type="button" onclick="education_fields();"> <span class="glyphicon glyphicon-plus" aria-hidden="true"></span> </button>
</div>
</div>
</div>
</div>
<button class="btn btn-primary" type="submit">Next</button>
<div class="clear"></div>
</div>
<div class="panel-footer"><small>Press <span class="glyphicon glyphicon-plus gs"></span> to add another form field :)</small>, <small>Press <span class="glyphicon glyphicon-minus gs"></span> to remove form field :)</small></div>
</div>
<script type="text/javascript">
// select2 place holder text
$('#educationDate').select2({
placeholder: 'Pick An Option'
});
</script>
Select2 adopts to standard HTML attributes.
https://select2.org/configuration/options-api
You need to add multiple to your select
<select multiple
I have searched as suggested but have not found why my version of the form does not work. I have a form that collects name, email, phone, a select option and a message in a textarea input. I change the textarea and action php based off the user option selected in the select input.
I use PHP to email the form contentse. I get ALL fields except for:
-Message/Comments
HTML
<!-- Career Form -->
<form id="careerContactForm" role="form" action="" method="post" enctype="multipart/form-data">
<!-- $name -->
<div class="row form-group">
<div class="col-md-8 col-md-offset-2 required">
<label for="contact-name">Full Name</label>
<input type="text" name="name" class="form-control" id="contact-name" placeholder="Full Name" required>
</div>
</div>
<!-- $email -->
<div class="row form-group">
<div class="col-md-4 col-md-offset-2 required">
<label for="contact-email">Email</label>
<input type="text" name="email" class="form-control" id="contact-email" placeholder="Email" required>
</div>
<!-- $phone -->
<div class="col-md-4 required">
<label for="contact-phone">Phone Number</label><br />
<input type="text" class="form-control bfh-phone" data-country="US" id="contact-phone" name="phone" placeholder="Phone Number" required>
</div>
</div>
<!-- $who -->
<div class="row form-group">
<div class="col-md-8 col-md-offset-2 required select-wrapper">
<!-- Contact -->
<label for="contact-who">Who are you trying to contact?</label>
<select class="selectorWho form-control" name="who" required>
<option value="None"><em>--Please Select One--</em></option>
<option value="general">General</option>
<option value="HR / Careers">HR / Careers</option>
<option value="sales">Sales</option>
<option value="td">TDXperts</option>
<option value="Other">Other</option>
</select>
</div>
</div>
<!-- $interest -->
<div class="row form-group hidden uploadResume">
<div class="col-md-8 col-md-offset-2 required select-wrapper">
<!-- Career -->
<label>I'm looking for employment opportunities in…</label>
<select class="selector-career form-control" name="interest" required>
<option value="None"><em>--Please Select One--</em></option>
<option value="Accounting">Accounting</option>
<option value="Administration">Administration</option>
<option value="Finance">Finance</option>
<option value="general">General</option>
<option value="HR">HR</option>
<option value="IT">IT</option>
<option value="Logistics & Customs Affairs">Logistics & Customs Affairs</option>
<option value="Marketing">Marketing</option>
<option value="Purchasing">Purchasing</option>
<option value="Sales">Sales</option>
<option value="Supply Chain Planning">Supply Chain Planning</option>
<option value="Warehouse">Warehouse</option>
<option value="Other">Other</option>
</select>
</div>
<div class="col-md-8 col-md-offset-2 required">
<label for="uploadResume">Upload Your Resume</label>
<input type="file" name="resume" id="resume-upload">
<p class="help-block"><em>You must choose a valid file. We accept .doc, .docx, .pdf, .rtf and .txt files</em></p>
</div>
</div>
<!-- Career Submit: hide / show -->
<div class="row form-group">
<div class="col-md-8 col-md-offset-2 hidden careerContact">
<!-- Contact -->
<label for="contact-message">Questions or Comments</label>
<textarea name="message" cols="50" rows="6" id="contact-message" class="form-control" placeholder="Would you like to include any more information?" ></textarea>
</div>
<div class="col-md-8 col-md-offset-2 hidden contactMessage">
<!-- Career -->
<label for="career-message">Message</label>
<textarea name="comments" cols="50" rows="6" id="career-message" class="form-control" placeholder="Your message..." ></textarea>
</div>
</div>
<div class="row form-group">
<div class="col-md-8 col-md-offset-2">
<button type="submit" class="btn">Send message</button>
</div>
</div>
</form>
JS (that show/hide textareas and show/hide file upload dialog)
$(document).ready(function(e) {
$(".selectorWho").on('change', function(e) {
e.preventDefault();
var uploadResume = $('.uploadResume');
var comments = $('.contactMessage');
var careerComments = $('.careerContact');
if (this.value == "HR / Careers") {
uploadResume.slideDown().removeClass("hidden");
careerComments.removeClass("hidden");
comments.addClass("hidden");
var action = "do/careers-submit.php";
var submitButton = 'career-submit';
} else {
uploadResume.slideUp().addClass('hidden');
careerComments.addClass('hidden');
comments.removeClass("hidden");
var action = "do/contact-submit.php";
var submitButton = 'contact-submit';
}
$("#careerContactForm").attr("action", action);
});
});
PHP (for one of the actions)
<?php
require("../classes/class.phpmailer.php");
$mail = new PHPMailer();
$name = $_POST['name'];
$email = $_POST['email'];
$phone = $_POST['phone'];
$who = $_POST['who'];
$interest = $_POST['interest'];
$comments = $_POST['comments'];
$mail->IsSMTP();
$mail->From = "$email";
$mail->FromName = "$name";
// $mail->AddAddress("hr#tireco.com","Tireco HR");
$mail->AddAddress("vs#tireco.com","Tireco HR");
$mail->Subject = "New Resume Submission";
$mail->Body = "Name:\n $name\n\n\nPhone:\n $phone\n\n\nEmail:\n $email\n\n\nContacting:\n $who\n\n\nInterested In:\n -$interest\n\n\nQuestions/Comments:\n $comments";
if (isset($_FILES['resume']) &&
$_FILES['resume']['error'] == UPLOAD_ERR_OK) {
$mail->AddAttachment($_FILES['resume']['tmp_name'],
$_FILES['resume']['name']);
}
$mail->WordWrap = 50;
if(!$mail->Send()) {
echo 'Message was not sent.';
echo 'Mailer error: ' . $mail->ErrorInfo;
} else {
header( 'Location: ../thankYou.html' ) ;
}
?>
So, I get all fields except for the message/comments textarea text.
If you would like to see what I get in the email click here
If you clicked, you saw what I get when I submit a HR/Careers > IT + Upload File + Message...The message is omitted.
Thank you in advance for your help.
VS
You need to give your select box a name, not the option.
You have
<select id="interest" class="selector-career form-control" required>
It needs to be
<select name="interest" id="interest" class="selector-career form-control" required>
With regards to the file attachment you should probably check the file uploaded ok
if (isset($_FILES['resume']) &&
$_FILES['resume']['error'] == UPLOAD_ERR_OK) {
$mail->AddAttachment($_FILES['resume']['tmp_name'],
$_FILES['resume']['name']);
}
This is what I use for my selectors, which I have inside a div / form wrapper. You need to select an index of the option, not the option container. This is for selecting States, of which I have removed most to save space. Look at it's structure and modify your code. Notice the square brackets that index the option your client selected. "state_sel" is the variable that contains the selected item. I left out my button for a function call.
<form id="state_opt" name="state_opt"> State
<select id="state_mgr" onChange="state_sel=document.state_opt.state_mgr.options[document.state_opt.state_mgr.selectedIndex].value;">
<option selected value="0">None</option>
<option value="AL">Alabama
<option value="MT">Montana
<option value="WI">Wisconsin
<option value="MO">Missouri
<option value="WY">Wyoming
</select>
I was testing a website's security and in an attempt to exploit its XSS, I used <script> tag. However, this website has a word limit on the input, so my ending script tag was not inserted in the database. Now when I open the webpage the submit button no longer appear because it was inside the truncated script tag. Due to Chrome's auto-correction, that specific script tag gets closed after submit button tag. Are anyone able to help me out?
After auto-correction, the HTML code of the page looks like this.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Update Student Information</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" href="../login/css/style_reg.css" type="text/css" />
<link rel="stylesheet" href="../login/js/jquery-smoothness-ui.css">
<script src="../login/js/jquery-2.0.3.js"></script>
<script src="../login/js/jquery-ui.js"></script>
<script type="text/javascript">
window.onload=function()
{
var c=document.getElementById("same_info");
c.onchange=toggle_shipping_visibility;
}
function toggle_shipping_visibility()
{
var c=document.getElementById("same_info");
var t=document.getElementById("shipping_table");
t.style.display=(c.checked) ? 'none' : '';
}
</script>
<script>
$(function() {
$( "#datepicker" ).datepicker();
});
</script>
</head>
<body>
<div class="wrapper">
<form class="form2" action="sem-reg.php" method="POST">
<div class="formtitle">Update Student Information</div>
<div class="note">
»» All Fields are Compulsory
<h3 style="margin-left:20px;color:green;">Welcome ADARSH I can still edit it</h3>
<h3 style="margin-left:20px;color:green;">1403097</h3>
</div>
<div class="input">
<div class="inputtext">University Roll:</div>
<div class="inputcontent">
<input type="text" name="univ" placeholder="University Roll No" value="1403097"readonly/>
</div>
</div>
<div class="input">
<div class="inputtext">College Roll:</div>
<div class="inputcontent">
<input type="text" name="coll" placeholder="College Roll No" value="1006/14"readonly/>
</div>
</div>
<div class="input">
<div class="inputtext">Name:</div>
<div class="inputcontent">
<input type="text" name="name" placeholder="Name" value="ADARSH I can still edit it"readonly/>
</div>
</div>
<div class="input">
<div class="inputtext">Father's Name:</div>
<div class="inputcontent">
<input type="text" name="father" placeholder="Father's Name" value="PAWAN KUMAR" readonly/>
</div>
</div>
<div class="input">
<div class="inputtext">Mother's Name:</div>
<div class="inputcontent">
<input type="text" name="mother" placeholder="Mother's Name" value="SH. MT. BABLI DEVI"readonly/>
</div>
</div>
<div class="input">
<div class="inputtext">Batch</div>
<div class="inputcontent" readonly>
<select name="batch" >
<option disabled="disabled" value="2011">2011</option>
<option value="2011">2011</option><option value="2012">2012</option><option value="2013">2013</option><option value="2014">2014</option><option value="2015">2015</option> </select>
</div>
</div>
<div class="input">
<div class="inputtext">Semester</div>
<div class="inputcontent">
<select name="sem" >
<option value="4">4</option>
<option value="1">1</option><option value="2">2</option><option value="3">3</option><option value="4">4</option><option value="5">5</option><option value="6">6</option><option value="7">7</option><option value="8">8</option> </select>
</div>
</div>
<div class="input">
<div class="inputtext">Branch</div>
<div class="inputcontent" >
<select name="bra">
<option value="3">B.Tech - Computer Science Engineering</option>
<option value="1">B.Tech - Biotechnology Engineering</option><option value="2">B.Tech - Chemical Engineering</option><option value="3">B.Tech - Computer Science Engineering</option><option value="4">B.Tech - Electronics & Communications Engineering</option><option value="5">B.Tech - Information Technology</option><option value="6">B.Tech - Mechanical Engineering</option><option value="10">M.Tech Part Time Thermal Engineering</option><option value="11">M.Tech Part Time Computer Science Engineering</option><option value="12">M.Tech Part Time Electronics & Communications Engineering</option><option value="13">M.Tech Part Time Chemical Engineering</option><option value="14">M.Tech Part Time Production Engineering</option><option value="15">M.Sc Physics</option> </select>
</div>
</div>
<div class="input">
<div class="inputtext">Practical Group</div>
<div class="inputcontent">
<select name="prac">
<option value="2">B1</option>
<option value="1">None</option><option value="2">B1</option><option value="3">B2</option><option value="4">B3</option> </select>
</div>
</div>
<div class="input">
<div class="inputtext">D.O.B</div>
<div class="inputcontent">
<input id="datepicker" type="text" name="dob" placeholder="D.O.B." value="24/04/1997"readonly/>
</div>
</div>
<div class="input">
<div class="inputtext">Section</div>
<div class="inputcontent">
<select name="sec">
<option value="1">A</option>
<option value="0">None</option>
<option value="1">A</option>
<option value="2">B</option>
</select>
</div>
</div>
<div class="input">
<div class="inputtext">Category</div>
<div class="inputcontent">
<select name="cat" readonly>
<option value="General">General</option>
<option value="General">General</option><option value="Scheduled Castes/ Scheduled Tribes">Scheduled Castes/ Scheduled Tribes</option><option value="Backward Classes">Backward Classes</option><option value="Border Areas">Border Areas</option><option value="Backward Areas">Backward Areas</option><option value="Sports Persons">Sports Persons</option><option value="Children/ Grand Children of Freedom Fighters/Political Sufferers">Children/ Grand Children of Freedom Fighters/Political Sufferers</option><option value="Disabled Persons">Disabled Persons</option><option value="Children/Widow Of Defence Personnel/ Ex-Servicemen etc">Children/Widow Of Defence Personnel/ Ex-Servicemen etc</option><option value="Children/ Widows Of Para-military forces/Punjab Police, PAP and Punjab Home Guards">Children/ Widows Of Para-military forces/Punjab Police, PAP and Punjab Home Guards</option><option value="Riot Affected/ Terrorist affected families">Riot Affected/ Terrorist affected families</option><option value="Tsunami victims">Tsunami victims</option> </select>
</div>
</div>
<div class="input">
<div class="inputtext">Phone No(Parents):</div>
<div class="inputcontent">
<input type="text" name="phone_parent" placeholder="Phone no(Parents)" value="+919459578556"readonly/>
</div>
</div>
<div class="input">
<div class="inputtext">Phone No(Self): </div>
<div class="inputcontent">
<input type="text" name="phone_self" placeholder="Phone No(Self)" value="+919814615325"readonly/>
</div>
</div>
<div class="add">Permanent Address:</div>
<div class="input" style="height:120px">
<div class="inputtext">Address: </div>
<div class="inputcontent">
<textarea class="textarea" name="address" placeholder="Address" ></textarea><script>alert(hahahahahahahahhaha you gonna pay for this bu</textarea>
</div>
</div>
<div class="input">
<div class="inputtext">City: </div>
<div class="inputcontent">
<input type="text" name="city" placeholder="City" value="Dhar"readonly/>
</div>
</div>
<div class="input">
<div class="inputtext">State: </div>
<div class="inputcontent">
<input type="text" name="state" placeholder="State" value="Himachal"readonly/>
</div>
</div>
<input type="checkbox" name="same_info" id="same_info" checked="checked">Correspondence Address is same as Permanent Address<br>
<table id="shipping_table" style="display:none">
<tr class="inputtext">
<td>Address</td>
</tr>
<tr>
<td><textarea class="textarea" name="c_address"placeholder="Address"></textarea><script>alert(hahahahahahahahhaha you gonna pay for this bu</textarea></td>
</tr>
<tr class="inputtext">
<td>City</td>
</tr>
<tr>
<td class="inputcontent"><input type="text" name="c_city" placeholder="City" value="Dhar"></td>
</tr>
<tr class="inputtext">
<td>State</td>
</tr>
<tr>
<td class="inputcontent"><input type="text" name="c_state" placeholder="State" value="Himachal"></td>
</tr>
</table>
<div class="buttons">
«« Go Back To Home Page
<input class="orangebutton" type="submit" name="submit" value="Update" />
</div>
</form>
</div>
</body>
</html>
Using Chrome you can right-click on the last visible element, or somewhere else on the page, select Inspect and then edit the HTML that is loaded in the browser using the Chrome built in developer tools. E.g. remove/alter the <script> tag. And see if the page becomes usable again.
You can also try a recent version of Firefox or MSIE, they have features very similar to the above.