How do I check if an HTML input name has a certain value with Javascript?
Question
In my website I am processing an HTML form currently with PHP, but I need to do it with JavaScript. With JavaScript how do I check if an HTML input name has a certain value?
Basically I need to do the equivalent of this:
<?php
if (isset($_POST['reportsubmit'])) {
$radio = $_POST['report'];
if ($radio == 'customer') {
$redirect = 'Click <a href="#customer">here</a> to continue on with the form';
} else if ($radio == 'item') {
$redirect = 'Click <a href="#item">here</a> to continue on with the form';
} else if ($radio == 'department') {
$redirect = 'Click <a href="#department">here</a> to continue on with the form';
} else if ($radio == 'person') {
$redirect = 'Click <a href="#person">here</a> to continue on with the form';
}
} else if (isset($_POST['customersubmit'])) {
//process form
//redirect
} else if (isset($_POST['itemsubmit'])) {
//process form
//redirect
} else if (isset($_POST['departmentsubmit'])) {
//process form
//redirect
} else if (isset($_POST['personsubmit'])) {
//process form
//redirect
}
?>
<!DOCTYPE html>
<html>
<head>
<title>Gordmart MIS Reports</title>
<!--<link rel="stylesheet" href="../css/Main.css">-->
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.min.css">
<script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
<script src="http://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.min.js"></script>
</head>
<body>
<div data-role="page" class="frame" id="report">
<div data-role="header">
<?php include("Header.php");?>
</div>
<div data-role="main" id="main">
<h3>Would you like to view a report grouped by customers, items, sales departments, or sales people?</h3>
<form action="<?php echo htmlspecialchars($_SERVER["PHP_SELF;"], ENT_QUOTES, "utf-8"); ?>" method="post">
<input type="radio" name="report" value="customer"><p>Customers</p>
<input type="radio" name="report" value="item"><p>Items Sold</p>
<input type="radio" name="report" value="department"><p>Sales Departments</p>
<input type="radio" name="report" value="person"><p>Sales People</p>
<input type="submit" name="reportsubmit" value="Submit">
</form>
</div>
<div data-role="footer">
<h1>Footer Text</h1>
</div>
</div>
<div data-role="page" class="frame" id="customer">
<div data-role="header">
<?php include("Header.php");?>
</div>
<div data-role="main" id="main">
<h3>Would you like to view a cumulative report of all customers, or a single report of just one?</h3>
<form action="<?php echo htmlspecialchars($_SERVER['PHP_SELF'], ENT_QUOTES, 'utf-8'); ?>" method="post">
<input type="radio" name="customer" value="all"><p>All</p>
<input type="radio" name="customer" value="one"><p>One</p><br>
<input type="submit" name="customersubmit" value="Submit">
</form>
</div>
<div data-role="footer">
<h1>Footer Text</h1>
</div>
</div>
<div data-role="page" class="frame" id="item">
<div data-role="header">
<?php include("Header.php");?>
</div>
<div data-role="main" id="main">
<h3>Would you like to view a cumulative report of all sales items, or a single report of just one?</h3>
<form action="<?php echo htmlspecialchars($_SERVER['PHP_SELF'], ENT_QUOTES, 'utf-8'); ?>" method="post">
<input type="radio" name="item" value="all"><p>All</p>
<input type="radio" name="item" value="one"><p>One</p><br>
<input type="submit" name="itemsubmit" value="Submit">
</form>
</div>
<div data-role="footer">
<h1>Footer Text</h1>
</div>
</div>
<div data-role="page" class="frame" id="department">
<div data-role="header">
<?php include("Header.php");?>
</div>
<div data-role="main" id="main">
<h3>Would you like to view a cumulative report of all sales departments, or a single report of just one?</h3>
<form action="<?php echo htmlspecialchars($_SERVER['PHP_SELF'], ENT_QUOTES, 'utf-8'); ?>" method="post">
<input type="radio" name="department" value="all"><p>All</p>
<input type="radio" name="department" value="one"><p>One</p><br>
<input type="submit" name="departmentsubmit" value="Submit">
</form>
</div>
<div data-role="footer">
<h1>Footer Text</h1>
</div>
</div>
<div data-role="page" class="frame" id="person">
<div data-role="header">
<?php include("Header.php");?>
</div>
<div data-role="main" id="main">
<h3>Would you like to view a cumulative report of all sales people, or a single report of just one?</h3>
<form action="<?php echo htmlspecialchars($_SERVER['PHP_SELF'], ENT_QUOTES, 'utf-8'); ?>" method="post">
<input type="radio" name="person" value="all"><p>All</p>
<input type="radio" name="person" value="one"><p>One</p><br>
<input type="submit" name="personsubmit" value="Submit">
</form>
</div>
<div data-role="footer">
<h1>Footer Text</h1>
</div>
</div>
<div data-role="page" class="frame" id="redirect">
<div data-role="header">
<?php include("Header.php");?>
</div>
<div data-role="main" id="main">
<?php echo $redirect;?>
</div>
<div data-role="footer">
<h1>Footer Text</h1>
</div>
</div>
</body>
</html>
But with JavaScript. So the part I would need to do the equivalent of is specifically this part:
<?php
if (isset($_POST['reportsubmit'])) {
$radio = $_POST['report'];
if ($radio == 'customer') {
$redirect = 'Click <a href="#customer">here</a> to continue on with the form';
} else if ($radio == 'item') {
$redirect = 'Click <a href="#item">here</a> to continue on with the form';
} else if ($radio == 'department') {
$redirect = 'Click <a href="#department">here</a> to continue on with the form';
} else if ($radio == 'person') {
$redirect = 'Click <a href="#person">here</a> to continue on with the form';
}
} else if (isset($_POST['customersubmit'])) {
//process form
//redirect
} else if (isset($_POST['itemsubmit'])) {
//process form
//redirect
} else if (isset($_POST['departmentsubmit'])) {
//process form
//redirect
} else if (isset($_POST['personsubmit'])) {
//process form
//redirect
}
?>
So basically I need to know how to read an HTML input name and value, and see if the HTML input name has a certain value.
1 answers
solution1
0 2014-05-10 14:45:03
Try this
var element = document.getElementById("textid");
var value = element.value;
var name = element.name;
Second solution
As I can see your code has multiple element with same name so either change them to have different names and use the below mentioned solution (just for design sake).
or give them an id and use the first solution.
var x=document.getElementsByName("report");
for(i=0;i<x.length;i++){
alert(x[i].name);
}
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.
Related Question
How do I check in JavaScript if a value exists at a certain array index?
How do i get my html input element to influence my javascript class object value(character name)
How do I check if a value has changed in Javascript?
How do I check and change the value of an input with using javascript
Javascript How do I check that input value is neither empty or not a number?
How to use JavaScript (or JQuery) to check if an input is empty or has a certain string?
how to check if an html element has certain text with javascript
How to check if HTML input textbox is below a certain number using javascript?
How do I check if users input is equal to a certain value in my array?
Check if radiobuttonlist has certain value using Javascript
Related Tags