I open a div with a table inside by clicking a button. In this table there are a number of input fields. If all input fields are filled then button should change the colour.
I have a number of divs with table with input fields. One of them is working, but does not succeed with seccond div.
<p><br></p>
<!-- The Next Button Plates -->
<button id = "buttonP" onclick="showOrHide('Plates')" class="button1" name= "Plates" ><b>Plates</b></button>
<!-- Insert a table in a div, so this can be hide -->
<div id="Plates">
<br>
<div id="CompoundPlates_button">
<table style="width:20%;margin-left:50px;" >
<colgroup>
<col span="3" style="background-color:#E3CEF6;">
<!--<col style="background-color:yellow"> -->
</colgroup>
<tr>
<td width="20%"><input type="button" id = "button" class="buttonsmall" style="height:20px;width:60px" onclick="showOrHide('CompoundPlates')">
</td>
<td width="40%"><b>CompoundPlates</></td>
<td width="15%"></td>
<td width="15%"></td>
<td width="10%"></td>
</tr>
</table>
</div> <!-- Close Div CompoundPlates_button -->
<!-- Insert a table in a div, so this can be hide -->
<div id="CompoundPlates">
<table style="width:50%;margin-left:50px;" >
<colgroup>
<col span="3" style="background-color:#E3CEF6;">
</colgroup>
<tr>
<td width="10%">
</td>
<td width="20%">Number of Plates:</td>
<td width="30%"><input type="text" name="Number of plates" size="35"></td>
<td width="20%"></td>
<td width="20%"></td>
</tr>
<tr>
<td>
</td>
<td>Plate/Tip type :</td>
<td><input type="text" name="Plate/Tip type" size="35"></td>
<td></td>
<td></td>
</tr>
<tr>
<td>
</td>
<td>Lid : </td>
<td><input type="text" name="Lid" size="35"> </td>
<td></td>
<td></td>
</tr>
<tr>
<td>
</td>
<td>Storage device :</td>
<td><input type="text" name="Storage device" size="35"></td>
<td></td>
<td></td>
</tr>
<tr>
<td>
</td>
<td>Position :</td>
<td><input type="text" name="Position" size="35"></td>
<td></td>
<td></td>
</tr>
</table>
</div> <!-- Close div CompoundPlates -->
</div> <!-- Close div Plates -->
If input boxes are filled then color of button Compound plates should change from red to green. And if button Compound plates and button Assay plates is green then overlaying button Plates should also change from red to green
I think it's helpful for you
[1]: Change the button's color after fill out the form
$("input[type=text]").change(function() {
var filled = true;
$( "input[type=text]" ).each(function( index ) {
if($( this ).val() == ""){
filled = false;
});
if(filled === false){
//change color
}
});
Should do the trick.
What I did is I used Jquery to check and change the color of the button and for the input fields I used css because it was hard for me to change more than one input field. This is my fiddle
$("input[type='text'], textarea").on("input", function () { canChangeColor(); }); function canChangeColor(){ var can = true; $("input[type='text'], textarea").each(function(){ if($(this).val()==''){ can = false; } }); if(can){ $('.btn').css({background:'green'}) }else{ $('.btn').css({background:'red'}) } }
.form-control {
background-color: red;
}
.form-control:valid {
background-color: green;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div>
<div>
<input type="text" class="form-control" id="name" name="user_name" placeholder=" Full Name" required>
</div>
<div>
<input type="text" class="form-control" name="user_mail" placeholder=" Email Address" required>
</div>
<div>
<textarea type="text" class="form-control" name="user_message" id="message" cols="30" rows="10" placeholder=" Let me know what's on your mind" required></textarea>
</div>
</div>
<div class="sendButton">
<button class="btn" type="submit" disabled="disabled">Send</button>
</div>
Hope this works for you!
Related
I just want to add this form as user click on add button.Every time user click on add button a new form expand befor add button and also when user click on delete button it will delete all the form one by one but except the parent one.
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css" >
<link href='https://fonts.googleapis.com/css?family=Roboto:400,300,500,700' rel='stylesheet' type='text/css'>
<link href='https://fonts.googleapis.com/css?family=Open+Sans:400,600,700,300' rel='stylesheet' type='text/css'>
</head>
<body>
<!-- dashboard-left end here-->
<div class="inner-aw-div">
<form name="internship" id="internship">
<table class="tbl">
<tr>
<td>Company / Institute*</td>
<td colspan="2"><input type="text" name="title" id="awtitle"></td>
</tr>
<tr>
<td>Location</td>
<td colspan="2" ><input type="text"></td>
</tr>
<tr>
<td>Duration</td>
<td class="select-td">
<select> <option value="" disabled selected>1</option>
</select>
<select><option value="" disabled selected>week<option>
</select>
</td>
<td class="select-td select-margin">
<span> Complete in Year </span>
<select> <option value="" disabled selected>Year</option>
</select>
</td>
<tr>
<td>Project Name/ Title</td>
<td colspan="2"><input type="text"></td>
</tr>
<tr>
<td>Brief Description</td>
<td class="award-description" colspan="2"><textarea id="awdescription" value="max 2000 characters"></textarea>
</td>
</tr>
<tr>
<td><label>Key Skill Used</label></td>
<td class="award-description" colspan="2"><textarea id="awdescription" value="max 2000 characters"></textarea>
</td>
</tr>
<tr>
<td></td>
<td colspan="2" class="intern-img" id="training">Training/ Internship
<button id="plus">Add</button>
<button id="minus">delete</button>
</td>
</tr>
</table>
</form>
</div>
</body>
</html>
So,i dont know how to achieve this using javascript.
-try this one.
MY HTML
<script type="text/javascript" src="../js/jquery.min.js"></script>
<section id="main-content">
<section class="wrapper">
<!-- BASIC FORM ELELEMNTS -->
<div class="row mt">
<div class="col-lg-12">
<div class="form-panel">
<h4 class="mb"><i class="fa fa-angle-right"></i>Multi Picture</h4>
<form class="form-horizontal style-form" method="post" id="multi_image" enctype="multipart/form-data">
<input type="hidden" class="form-control" name="user_id" >
<div class="form-group">
<label class="col-sm-2 col-sm-2 control-label">Picture 1</label>
<div class="col-sm-10 upload_div">
<div style="float:left;width:30%;">
<input type="file" name="userfile[]">
</div>
<!-- <div style="width:70%;">
Add
Delete
</div> -->
</div>
</div>
<div class="other_files">
</div>
<div class="form-group">
<div class="col-sm-10">
Add
<button class="btn btn-primary" type="submit">Upload</button>
</div>
</div>
</form>
</div>
</div><!-- col-lg-12-->
</div><!-- /row -->
</section>
</section>
MY JS CODE:
<script type="text/javascript">
$(document).ready(function(){
var max_upload=5;
var addbutton=$('.add_btn');
var wrapper=$('.other_files');
var x=1;
$(addbutton).click(function(){
if(x < max_upload)
{
x++;
var new_html='<div class="form-group">';
new_html+='<label class="col-sm-2 col-sm-2 control-label">Picture ' + x + '</label>';
new_html+='<div class="col-sm-10 upload_div">';
new_html+='<div style="float:left;width:30%;">';
new_html+='<input type="file" name="userfile[]">';
new_html+='</div>';
new_html+='<div style="width:70%;">';
new_html+='Delete';
new_html+='</div>';
new_html+='</div>';
new_html+='</div>';
wrapper.append(new_html);
}
});
$(wrapper).on('click','.delete_class',function(e){
e.preventDefault();
$(this).parent().parent().parent().remove();
x--;
});
});
</script>
First of all remove delete from your original form so that you can preserve deleting of parent form. You can add it dynamically on cloned forms as below:
var id=0;
$(document).ready(function() {
//attach a click event to add button whose id begins with plus, since id's have
//to be unique in DOM, we will be generating new id as in plus1, plus2 etc.,
//when we clone the form and before we append it. So the below selector means
//attach click events to those buttons whose id begins with plus. ^= means begins with
$(document).on('click',"button[id^=plus]",function(e){
e.preventDefault(); //prevent default action
//create a delete button html
var deleteBtn=$('<button id="minus">delete</button>');
//clone the parent form which will be in first
var clonedForm=$('form:first').clone();
//you can also do var clonedForm=$("#internship").clone();
id++; //increment the global id
//loop through each element which contains id property and replace with a new one
//to maintain uniqueness
clonedForm.find('[id]').each(function(){
var $el=$(this); //get the reference to element
$el.attr('id',$el.attr('id')+id); //replace its id with new one
});
deleteBtn.attr('id',deleteBtn.attr('id')+id);//replace delete button's id
clonedForm.attr('id',clonedForm.attr('id')+id); //replace cloned form's id
//append deleteBtn to td where add exists
clonedForm.find("td[id^=training]").append(deleteBtn);
//append cloned form to inner-aw-div
clonedForm.appendTo(".inner-aw-div");
});
//delete event to delete the closest form
$(document).on('click',"[id^=minus]",function(){
$(this).closest('form').remove(); //just remove the parent form
})
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
<link href='https://fonts.googleapis.com/css?family=Roboto:400,300,500,700' rel='stylesheet' type='text/css'>
<link href='https://fonts.googleapis.com/css?family=Open+Sans:400,600,700,300' rel='stylesheet' type='text/css'>
<!-- dashboard-left end here-->
<div class="inner-aw-div">
<form name="internship" id="internship">
<table class="tbl">
<tr>
<td>Company / Institute*</td>
<td colspan="2">
<input type="text" name="title" id="awtitle">
</td>
</tr>
<tr>
<td>Location</td>
<td colspan="2">
<input type="text">
</td>
</tr>
<tr>
<td>Duration</td>
<td class="select-td">
<select>
<option value="" disabled selected>1</option>
</select>
<select>
<option value="" disabled selected>week
<option>
</select>
</td>
<td class="select-td select-margin">
<span> Complete in Year </span>
<select>
<option value="" disabled selected>Year</option>
</select>
</td>
<tr>
<td>Project Name/ Title</td>
<td colspan="2">
<input type="text">
</td>
</tr>
<tr>
<td>Brief Description</td>
<td class="award-description" colspan="2">
<textarea id="awdescription" value="max 2000 characters"></textarea>
</td>
</tr>
<tr>
<td>
<label>Key Skill Used</label>
</td>
<td class="award-description" colspan="2">
<textarea id="awdescription" value="max 2000 characters"></textarea>
</td>
</tr>
<tr>
<td></td>
<td colspan="2" class="intern-img" id="training">Training/ Internship
<button id="plus">Add</button>
</td>
</tr>
</table>
</form>
</div>
I want to get contents of each rows and write it in input but i can't do this work.
<table>
<tbody>
<tr>
<td>
<div id="a">abc</div>
</td>
</tr>
<tr>
<td>
<div id="b">abcd</div>
</td>
</tr>
<tr>
<td>
<div id="c">abcdf</div>
</td>
</tr>
<tr>
<td>
<div id="d">abcde</div>
</td>
</tr>
<tr>
<td>
<button class="magicButton">choose this row</button>
</td>
</tr>
</tbody>
</table>
$(document).ready(function(){
$('.magicButton').click(function(){
// insert text of div a into input
// insert text of div b into input
// ect
});
});
Once you press the button it gets this values into following
<input type="text" name="whatver" div="fromValueA" readonly>
<input type="text" name="whatver" div="fromValueB" readonly>
<input type="text" name="whatver" div="fromValueC" readonly>
<input type="text" name="whatver" div="fromValueD" readonly>
How exactly can I get this to not just use the same A, B ,C from all buttons that are made
Best wishes, Mike
Use jquery replaceWith() method to replacing div with input.
$("button").click(function(){
$("table td > div").replaceWith(function(index, text){
var id = "fromValue" + $(this).attr("id");
return "<input id='" + id + "' value='" + text + "' />";
});
});
table, tr, td {
border: 1px solid black;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<tr>
<td>
<div id="a">A</div>
</td>
</tr>
<tr>
<td>
<div id="b">B</div>
</td>
</tr>
<tr>
<td>
<div id="c">C</div>
</td>
</tr>
<tr>
<td>
<button>Change</button>
</td>
</tr>
</table>
Basically when a user clicks submit in my MVC 3 application.
I want to use jquery to check if any of the rows selected (selected via checkboxes) have any value in a particular cell in that row.
and is not display an alert mgs or validation error.
Rough code attempt:
$("#MultiSubBtn").click(function () {
if ((':checkbox').is(':checked') && ('td').find("attBtn").isempty())
alert("there is a cert missing");
});
In the above MultiSubBtn is the id on my Submit btn.
and the cell I am trying to query id a
Still learning when it comes to jquery , here is the full html page.
I removed some elements to reduce page size.
<div id="tabs-1" style="position:relative; left:-12%;">
#using (Html.BeginForm("SentMultipleCalsToCustomer", "CalibrationViewer", FormMethod.Post))
{
#* This is the table that contains a single page of the paginated table of recent calibrations *#
<table id="all-calibrations" class="grid tracker-grid" style="width:77%">
<colgroup>
<col class ="" style="width:11%">
<col class="workno-data" style="width:13%">
<col class="equipmentId-data" style="width:8%">
<col class="equipmentDesc-data" style="width:12%">
</colgroup>
<thead>
<tr>
#* ADDED 20/08/2014 *#
<th>Select</th>
<th>Work<br />No.</th>
<th>ID</th>
<th>Description</th>
#* the customer column is only shown for LTS users since customer only see 1 customers data *#
#if (this.User.IsInRole("LTS User Passive"))
{
<th style="width:15%;">Customer</th>
}
<th style="text-align: center; width:15%;">Cert</th>
</tr>
</thead>
<tbody>
#* iterate through each calibration shown on this page *#
#for (int index = 0; index < Model.Count(); index++)
{
#Html.HiddenFor(m => Model.ElementAt(index).CustomerName)
<tr>
#* The work number is a link to the calibration the work no. represents *#
<td><input type="checkbox" name="selectecals" value="#Model.ElementAt(index).Id"/></td>
<td>#Html.ActionLink("WN–" + #Html.DisplayFor(m => Model.ElementAt(index).Id), "Index", "CalibrationViewer", new { id = Model.ElementAt(index).Id }, null)</td>
<td>#Html.DisplayFor(m => Model.ElementAt(index).EquipmentID)</td>
<td>#Html.DisplayFor(m => Model.ElementAt(index).EquipmentDescription)</td>
#* once again only the lts user sees the customer column data *#
#if (this.User.IsInRole("LTS User Passive"))
{
<td>#Html.DisplayFor(m => Model.ElementAt(index).CustomerName)</td>
}
#* if the calibration has an attachment display the name of the file,
else display the Upload button*#
#if (Model.ElementAt(index).CertName != null)
{
<td style="background-color:#33CC00; color:#fff;">#Html.DisplayFor(m => Model.ElementAt(index).CertName)</td>
}
else
{ // style="background-color:#5C9CCC" // ----- to allow for btn
<td id ="attBtn" class="file-uploader-attachment-Class"></td>
}
</tr>
<script type="text/javascript">
var CUST_NAME = '#Model.ElementAt(index).CustomerName';
</script>
}
</tbody>
</table>
if (Model.Count() != 0)
{
<div id="calibrationViewer-rightColumn" style="display:inline-block; position:absolute; top:8.5%; left:80%; width:20%">
#{Html.RenderPartial("StatusForm", InstrumentTracker.Common.Enums.Status.Finished_Calibration);}
<input type="submit" style="width:100%;" class="styledbutton" id="MultiSubBtn" value="Submit" />
<input type="hidden" name="customer" value="#ViewBag.CustomerName" />
<br /> <br />
<button class="styledbutton" style="width:100%;" onclick="window.location.href='/Tracker/Index'">Return to Main Tracker Page</button>
</div>
}
} #*end using form tag*#
</div>
<script type="text/javascript">
$(document).ready(function () {
$("#MultiSubBtn").click(function () {
if ((':checkbox').is(':checked') && ('td').find("attBtn").isempty())
alert("there is a cert missing");
});
function handleCheckbox() {
if ($(this).find(':checkbox').is(':checked')) {
$(this).find('.file-uploader-attachment-Class').removeClass("upload-placeholder-unchecked");
createUploader($(this));
$(this).find('.qq-upload-list').css("margin", "0px")
}
else {
$(this).find('.file-uploader-attachment-Class').addClass("upload-placeholder-unchecked");
$(this).find('.file-uploader-attachment-Class').html($('#myHTML2').html());
}
}
$('tr').each(handleCheckbox);
$('tr').on('click', handleCheckbox);
});
}
});
You stated your problem as "if any of the rows selected (selected via checkboxes) have any value in a particular cell in that row"
jsfiddle
This is a somewhat crude example, but see if this helps you any. It's a static table with input fields. If you enter data into column C and click the associated checkbox it finds the cell and changes the text color. If the cell is empty it changes the background color. Just to illustrate finding the cell and acting on its contents.
There are many ways (better ways than this no doubt) to do stuff like this, but the flow should be the same.
1) Find the checkboxes that are checked. var ch = $(":checked");
2) Iterate over collection of elements returned from your search ch.each(function () {}
a) determine what row you are currently looking at parentRow = $(this).closest('tr');(perhaps optional but that's how I do it)
b) find the cell in that row parentRow = $(this).closest('tr');and determine if it is "empty" based on your own criteria.
Personally, I don't hesitate to add classes data- elements or whatever is going to help me retrieve what I need later, so you'll note I added a class to that column's TD's as a convenience.
JQUERY
$(".checkbox").on("click", function () {
var ch = $(":checked");
var parentRow;
var cellInQuestion;
ch.each(function () {
parentRow = $(this).closest('tr');
cellInQuestion = $(parentRow).find(".C");
if (cellInQuestion.val() === "") {
cellInQuestion.css("background-color", "red");
} else {
cellInQuestion.css("color", "green");
}
});
});
HTML
<table>
<thead>
<tr>
<th>A</th>
<th>B</th>
<th style="color:green;">C</th>
<th>D</th>
<th>E</th>
</tr>
</thead>
<tbody>
<tr class="parentrow">
<td>
<input type="text" style="width:40px;" />
</td>
<td>
<input type="text" style="width:40px;" />
</td>
<td>
<input type="text" class="C" style="width:40px;" />
</td>
<td>
<input type="text" style="width:40px;" />
</td>
<td>
<input type="checkbox" class="checkbox" />
</td>
</tr>
<tr class="parentrow">
<td>
<input type="text" style="width:40px;" />
</td>
<td>
<input type="text" style="width:40px;" />
</td>
<td>
<input type="text" class="C" style="width:40px;" />
</td>
<td>
<input type="text" style="width:40px;" />
</td>
<td>
<input type="checkbox" class="checkbox" />
</td>
</tr>
<tr class="parentrow">
<td>
<input type="text" style="width:40px;" />
</td>
<td>
<input type="text" style="width:40px;" />
</td>
<td>
<input type="text" class="C" style="width:40px;" />
</td>
<td>
<input type="text" style="width:40px;" />
</td>
<td>
<input type="checkbox" class="checkbox" />
</td>
</tr>
</tbody>
</table>
I want my site to display differently based on the size of the web browser. Based on the questions/answers from other users, I got this to work with JavaScript onload. But I can't get it to work dynamically -- that is to say, in real-time, as users are adjusting the window. They have to refresh to get the format of the webpage to change.
Here is my current code:
<table class="index_table" border="0">
<tr>
<!--BELOW IS JAVASCRIPT FOR ADJUSTING HTML BASED ON WINDOW SIZE -->
<script>
if (window.innerWidth > 900){
document.write('<td rowspan="3" class="index_article"></td>');
}
</script>
<!-- END OF JAVASCRIPT -->
<td class="index_article_light">
<h2 class="index_instructions_subheader">INSERT HEADER HERE</h2>
<p class="index_instructions">INSERT PARAGRAPH HERE.</p>
<p class="index_instructions">INSERT PARAGRAPH HERE. </p>
<br />
<form action="signup.html" style="vertical-align:top;">
<table border="0" style="margin-left:auto;margin-right:auto;width:400px;">
<tr>
<td>
<input type="text" name="search" class="firstname" value=" First name">
</td>
<td>
<input type="text" name="search" class="lastname" value=" Last name">
</td>
</tr>
<tr>
<td colspan="2">
<input type="text" name="search" class="email" value=" Email">
</td>
</tr>
<tr>
<td colspan="2">
<div style="color:#979797;">Password: <br /><input type="password" name="password" class="password" value="Password"></div>
</td>
</tr>
<tr>
<td>
<div style="color:#979797;">Verify password: <input type="password" name="verify_passwords" class="password" value="Password"></div>
</td>
</tr>
<tr>
<td colspan="2">
<select>
<option value="kent">INSERT LIST HERE</option>
</select>
</tr>
</tr>
<tr>
<td colspan="2">
<input type="submit" value="signup!" style="float:right;" id="result_submit">
</td>
</tr>
</table>
</form>
</td>
</tr>
<!--BELOW IS JAVASCRIPT FOR ADJUSTING HTML BASED ON WINDOW SIZE -->
<script>
if (window.innerWidth < 900){
document.write('<tr><td class="index_article" style="height:200px;"></td></tr>');
}
</script>
<!-- END OF JAVASCRIPT -->
Note: I know I shouldn't be used tables, I should be using divs. But that's another issue... I started building this website before I knew that. I also know it's pretty sloppy. So just bear with me. I'm trying to just go with it until I have time to fix it up.
You shouldn't use JavaScript to make responsive web design. Use CSS instead, with media querys. So you write your HTML:
<table class="index_table" border="0">
<tr>
<!--This only will display on screen-width>900-->
<td id="big_device_index" rowspan="3" class="index_article"></td>
<td class="index_article_light">
<h2 class="index_instructions_subheader">INSERT HEADER HERE</h2>
<p class="index_instructions">INSERT PARAGRAPH HERE.</p>
<p class="index_instructions">INSERT PARAGRAPH HERE. </p>
<br />
<form action="signup.html" style="vertical-align:top;">
<table border="0" style="margin-left:auto;margin-right:auto;width:400px;">
<tr>
<td>
<input type="text" name="search" class="firstname" value=" First name">
</td>
<td>
<input type="text" name="search" class="lastname" value=" Last name">
</td>
</tr>
<tr>
<td colspan="2">
<input type="text" name="search" class="email" value=" Email">
</td>
</tr>
<tr>
<td colspan="2">
<div style="color:#979797;">Password: <br /><input type="password" name="password" class="password" value="Password"></div>
</td>
</tr>
<tr>
<td>
<div style="color:#979797;">Verify password: <input type="password" name="verify_passwords" class="password" value="Password"></div>
</td>
</tr>
<tr>
<td colspan="2">
<select>
<option value="kent">INSERT LIST HERE</option>
</select>
</tr>
</tr>
<tr>
<td colspan="2">
<input type="submit" value="signup!" style="float:right;" id="result_submit">
</td>
</tr>
</table>
</form>
</td>
</tr>
<!--This only will display on screen-width<900-->
<tr id="small_device_index"><td class="index_article" style="height:200px;"></td></tr>
Use the following CSS:
#media all and (max-width: 899px) {
#big_device_index {
display: none;
}
#media all and (min-width: 900px) {
#small_device_index {
display: none;
}
You can find out more about media queries here
}
Add this outside of if (window.innerWidth > 900){.....
$(window).resize(function(){
if (window.innerWidth > 900){
$('.index_article').remove();
$('.index_table).find('tr:first').append('<td rowspan="3" class="index_article"></td>');
}
}
hope this will help you, make sure to include fisrt jquery.min.js
This is my following codes..
<form class="form-horizontal" id="tambah_gps" name="tambah_gps" method="POST" action="../controller/add_gps.php">
<table>
<tr style="height:40px">
<td>Nama User</td>
<td style="width:20px"> : </td>
<td><input class="form-control" type="text" name="nama_user" placeholder=" User Name" style="width:300px" readonly></td>
<td>  Choose User</button></td>
</tr>
<tr style="height:40px">
<td>Vehicle ID</td>
<td style="width:20px"> : </td>
<td colspan="2"><input class="form-control" type="text" name="no_polisi" placeholder=" Nomor Polisi Kendaraan"></td>
</tr>
<tr style="height:40px">
<td>Car brand</td>
<td style="width:20px"> : </td>
<td colspan="2"><input class="form-control" type="text" name="merk_mobil" placeholder=" Merk Mobil"></td>
</tr>
<tr style="height:40px">
<td>Color</td>
<td style="width:20px"> : </td>
<td colspan="2"><input class="form-control" type="text" name="warna" placeholder=" Warna"></td>
</tr>
<tr style="height:40px">
<td>GPS Number</td>
<td style="width:20px"> : </td>
<td colspan="2"><input class="form-control" type="text" name="no_telp_gps" placeholder=" nomor telepon GPS"><td>
</tr>
<tr style="height:40px">
<td>Time Zone/td>
<td style="width:20px"> : </td>
<td colspan="2"><input class="form-control" type="text" name="zona_waktu" value="GMT (Default)" placeholder=" Zona Waktu" readonly></td>
</tr>
</table>
<div class="modal-footer">
<button class="btn btn-default" data-dismiss="modal">Cancel</button>
<input type="submit" name="sumbit" value="Save" class="btn btn-primary">
</div>
<form>
The form I made has 3 buttons : 1 Button Save, 1 Button Cancel, and 1 button to choose User Name.. if the button to choose user name clicked, it will open new window that containing user list. the button works pretty well. but whenever it clicked the page always directed to the form action (just like when you click the save button). Can anyone tell me whats wrong with my code? Thank you...
First of all you use your <button> inside of <a> where latter has javascript:void(0) as href. If href is not needed then there no point to put <a> around <button>.
Second &nbps entity MUST end with ;
Third javascript in onclick must be enclosed by " . Single quotes should be used within javascript statement.
And last: you must tell <button> to be exactly what you want it to be: just button! by using type='button'
Therefore the line for your "Choose User" button looks as follows:
<td> <button type="button" class="btn btn-primary" onClick="window.open('pilih_user.php','Ratting','width=1000,height=400,left=200');">Choose User</button></a></td>