<center>
<table>
<form method="post" name="login" enctype="application/x-www-form-urlencoded">
<tr>
<td colspan="2" align="center">
<font face="arial" size="5">Areá do Cliente</font>
</td>
</tr>
<tr>
<td>
E-mail:
</td>
<td>
<input type="text" name="credential_0" value="" size="30" maxlength="128" class="formfield">
</td>
</tr>
<tr>
<td>
Senha:
</td>
<td>
<input type="password" naem="credential_1" size="20" maxlength="50" class="formfield">
</td>
</tr>
<tr>
<tr>
<input type="submit" name="Log In" value="Check Mail" onclick="javascript:login.action='https://thewebsite.com/mail/index.bml?s=1';javascript:login.destination.value = '/mailadmin/index.bml?check=1';">
</td>
<td>
<input type="submit" name="Log In" value="Manage Mail" onclick="javascript:login.action='https://thewebsite.com/mailLogin';javascript:login.destination.value = '/mailadmin/index.bml?manage=1';">
</td>
</tr>
<input type="hidden" name="destination">
</form>
</table>
</center>
I am not an expecialist but i don't know much of javascript, also i need a little help on the full code. Check for me if it's all ok!
But my main question is how i make this button open in a new window/tab or set url parent?
https://thewebsite.com/mail/index.bml?s=1';javascript:login.destination.value
= '/mailadmin/index.bml?check=1';" >
<a target="_blank" href="https://www.wikipedia.org/">Wikipedia (opens in a new window)</a>
You can open page in new tab or page by using anchor tag very easily. Like,
The home page will open in another tab.
Read more:
https://html.com/attributes/a-target/#ixzz5Sh13WUpK
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a
I am trying to insert input field in my div onclick of check box. and it is working but when i submit the form the value is not received to me of that input box
check box
<form action="{{ url('product_uplo') }}" method="get" enctype="multipart/form-data" accept-charset="utf-8">
<tr>
<table class="table">
<tr>
<td>
<label><input type="checkbox" id="ELarge" name="pro_size[]" onclick="a('ELarge')" value="ELarge"> Extra Large</label>
</td>
<td>
<label><input type="checkbox" id="Large" name="pro_size[]" onclick="a('Large')" value="Large"> Large</label>
</td>
<td>
<label><input type="checkbox" id="Medium" name="pro_size[]" onclick="a('Medium')" value="Medium"> Medium</label>
</td>
<td>
<label><input type="checkbox" id="Small" name="pro_size[]" onclick="a('Small')" value="Small"> Small</label>
</td>
<td>
<label><input type="checkbox" id="ESmall" name="pro_size[]" onclick="a('ESmall')" value="ESmall"> Extra Small</label>
</td>
</tr>
</table>
</tr>
<tr>
<td>Price</td>
<td>
<div id="set"></div>
</td>
</tr>
<tr>
<td colspan="2">
<input type="submit" class="form-control btn btn-primary">
</td>
</tr>
</form>
JQuery code
<script type="text/javascript">
function a(extra){
if($('#'+extra+'').is(":checked")){
$('#set').append("<div id="+"price"+extra+"><label>"+extra+"</label><input type='text' name='pro_price["+extra+"]' class='form-control' placeholder="+extra+" /></div>");
}else{
$('#price'+extra).remove();
}
}
</script>
When I submit the form the url is like this
http://www.asggas.com/product_uplo?dat=pro_type=Girls+Cloth&pro_name=asadsfd&brand=sadf&Material=sadf&pro_color=sdf&pro_des=sadf&pro_size%5B%5D=ELarge&pro_size%5B%5D=Large&pro_quantity=5446&galary%5B%5D=
it doesn't pass pro_price[Elarge] ...
Please help
after searching to much i got the answer. because of i am using table tag it's now sending the data. so remove the table tag and it will work
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
I have some HTML shown below, which is generated dynamically in an ASP Classic form.
There can be any amount of groups/tables (Size/Color) with any amount of rows/options.
Each group/table has an img tag, and each row/option has a hidden field with its corresponding image URL.
On the hover of each row, I need to change the src attribute of the image of that group to that row's image URL, using JS or jQuery (something that works in ASP classic).
The HTML can be changed if needed for it to work.
Thank you.
<table>
<tr>
<td style="font-weight: 700" colspan="2">
Color<input id="colorSortOrder" type="hidden" value="1" />
</td>
</tr>
<tr>
<td>
<input id="radioRed" type="radio" name="Color" value="R-" />
<label for="radioRed">
Red</label>
<input type="hidden" value="Image1.jpg" />
</td>
<td rowspan="3">
<img />
</td>
</tr>
<tr>
<td>
<input id="radioOrange" type="radio" name="Color" value="O-" />
<label for="radioOrange">
Orange</label>
<input type="hidden" value="Image2.jpg" />
</td>
</tr>
<tr>
<td>
<input id="radioBlue" type="radio" name="Color" value="B-" />
<label for="radioBlue">
Blue</label>
<input type="hidden" value="Image3.jpg" />
</td>
</tr>
</table>
<table>
<tr>
<td style="font-weight: 700" colspan="2">
Size<input id="sizeSortOrder" type="hidden" value="2" />
</td>
</tr>
<tr>
<td>
<input id="radioLarge" type="radio" name="Color" value="LA-" />
<label for="radioLarge">
Large</label>
<input type="hidden" value="Image4.jpg" />
</td>
<td rowspan="3">
<img />
</td>
</tr>
<tr>
<td>
<input id="radioMedium" type="radio" name="Color" value="ME-" />
<label for="radioMedium">
Medium</label>
<input type="hidden" value="Image5.jpg" />
</td>
</tr>
<tr>
<td>
<input id="radioSmall" type="radio" name="Color" value="SM-" />
<label for="radioSmall">
Small</label>
<input type="hidden" value="Image6.jpg" />
</td>
</tr>
</table>
...which looks something like:
I would change the HTML just a little bit to reduce the JavaScript parsing needed by adding data attributes for the image src like this
http://jsfiddle.net/muDJ9/
and with the use of JavaScript replace you can edit out extensions for the alt tags
EDIT: This also runs the fastest I just ran tests on the others submitted using the console.time() profiler
FINAL: http://jsfiddle.net/FV9cw/
You can do it as under
Live Demo
$('label[for]').closest('tr').mouseenter(function(){
$(this).siblings().find('img').hide();
$(this).find('img').attr('src', $(this).find('input[type=hidden]').attr('value')).show();
});
$("input[type='radio']").hover(function(){
var src = $(this).parent().find("input[type='hidden']").val();
$(this).parent().parent().parent().find("img").attr("src",src);
});
Line 1 detects hover.
Line 2 go up to td and looks for the hidden input inside td and takes the value
Line 3 go up three times td > tr > table and looks for img and sets his attribute src with the image.
I finished my Javascript code and its about 3,000 lines long. There are many variables within the code(60+), but a few of the variables I'd like to write to my page such as
totalTime
longitudinalAcceleration
shiftTime
numberOfShifts
corneringTime
numberOfCorners
instantaneousCoefficientOfFriction
totalFuel
meanLongAccel
meanHorsepower
These are all variables within the Jscript code(not included because it would be too long). What I'd like to be able to do is to write this code to my main HTML page which calls the function. THe javascript function is called images.js(dont ask lol). I'm pretty sure I need an output variable thats an object within the Jscript file. This part I'm not too sure about how to do, or how to later write parts of the object variable in the actual HTML page.
Basically I am running Main Calculation() which is contained within image.js, after this function is ran, I want to pull those variables and write them to my HTML page. Those are the variables you see above. How do I grab those variables after the calculation has been ran? I'm pretty sure I need to use jQuery or Javascript to write the variables to the page??
Here is a link to the page if it helps
http://www.fsaesim.com/Products.html
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
<script type="text/javascript" src="images.js"></script>
<script type="text/javascript">
function ShowCalculation() {
Main($("#vehicleWeightTxt").val(), $("#tireChoiceSel").val(), $("#wheelBaseTxt").val(), $("#wheelRadiusTxt").val(), $("#trackWidthTxt").val(), $("#hcgTxt").val(), $("#weightDistributionTxt").val(), $("#shiftRpmTxt").val(), $("#ntTxt").val());
}
</script>
</head>
<body id="page4">
<div class="body1">
<div class="body2">
<div class="body5">
<div class="main">
<header>
<div class="wrapper">
<h1>Progress Business Company</h1>
<nav>
<ul id="menu">
<li id="nav1" class="active">Home<span>Page</span></li>
<li id="nav2">News<span>Updates</span></li>
<li id="nav3">Available<span>Features</span></li>
<li id="nav4">Run<span>Simulation</span></li>
<li id="nav5">Contact<span>Support</span></li>
</ul>
</nav>
</div>
</header>
</div>
</div>
</div>
</div>
<div class="body1">
<div class="main">
<br />
<table border="0">
<tr>
<td>
Tire Choice
</td>
<td>
<select id="tireChoiceSel">
<option value="1">Michelin 13"</option>
<option value="2">Hoosier 13" Large</option>
<option value="3">Hoosier 13" Small</option>
<option value="4">Mexican Tires</option>
</select>
</td>
<td>
Engine:
</td>
<td><select id="engineSelectionSel">
<option value="1">Yamaha R6 - 4 Cylinder</option>
<option value="2">Yamaha WR450 - 1 Cylinder</option>
<option value="3">Honda CBR600RR - 4 Cylinder </option>
<option value="4">Suzuki GSXR600 - 4 Cylinder</option>
</select>
</td>
<td>
Torque Curve:
</td>
<td>
<select id="torqueCurveSel">
<option value="1">Cornell Curve 2008</option>
<option value="2">MIT Curve 2008</option>
<option value="3">RMIT Curve 2008 </option>
<option value="4">Fullerton Curve 2008</option>
</select>
</td>
</tr>
<tr>
<td>
Vehicle Weight:
</td>
<td>
<input type="text" id="vehicleWeightTxt" value="530" size="3" />
</td>
<td>
Number of NOS:
</td>
<td>
<input type="text" id="Text1" value="100" size="3" />
</td>
<td>
NOS Bottle #1:
</td>
<td>
<input type="text" id="Text2" value="3000" size="3" />
</td>
</tr>
<tr>
<td>
Wheel Base:
</td>
<td>
<input type="text" id="wheelBaseTxt" value="61" size="3" />
</td>
<td>
NOS Bottle #2:
</td>
<td>
<input type="text" id="Text3" value="3000" size="3" />
</td>
<td>
NOS Bottle #3:
</td>
<td>
<input type="text" id="Text4" value="3000" size="3" />
</td>
</tr>
<tr>
<td>
Wheel Radius:
</td>
<td>
<input type="text" id="wheelRadiusTxt" value="10.25" size="3" />
</td>
<td>
NOS Bottle #4:
</td>
<td>
<input type="text" id="Text5" value="3000" size="3" />
</td>
<td>
NOS Bottle #5:
</td>
<td>
<input type="text" id="Text6" value="3000" size="3" />
</td>
</tr>
<tr>
<td>
Track Width:
</td>
<td>
<input type="text" id="trackWidthTxt" value="50" size="3" />
</td>
<td>
NOS Bottle #6:
</td>
<td>
<input type="text" id="Text7" value="3000" size="3" />
</td>
<td>
NOS Bottle #7:
</td>
<td>
<input type="text" id="Text8" value="3000" size="3" />
</td>
</tr>
<tr>
<td>
Center of Gravity:
</td>
<td>
<input type="text" id="hcgTxt" value="12" size="3" />
</td>
<td>
NOS Bottle #8:
</td>
<td>
<input type="text" id="Text9" value="3000" size="3" />
</td>
<td>
NOS Bottle #9:
</td>
<td>
<input type="text" id="Text10" value="3000" size="3" />
</td>
</tr>
<tr>
<td>
Weight Distribution:
</td>
<td>
<input type="text" id="weightDistributionTxt" value="0.50" size="3" />
</td>
<td>
NOS Bottle #10:
</td>
<td>
<input type="text" id="Text11" value="3000" size="3" />
</td>
<td>
NOS Bottle #11:
</td>
<td>
<input type="text" id="Text12" value="3000" size="3" />
</td>
</tr>
<tr>
<td>
Shift RPM:
</td>
<td>
<input type="text" id="shiftRpmTxt" value="9500" size="3" />
</td>
<td>
NOS Bottle #12:
</td>
<td>
<input type="text" id="Text13" value="3000" size="3" />
</td>
<td>
NOS Bottle #13:
</td>
<td>
<input type="text" id="Text14" value="3000" size="3" />
</td>
</tr>
<tr>
<td>
Final Drive Ratio:
</td>
<td>
<input type="text" id="ntTxt" value="2.86" size="3" />
</td>
<td>
NOS Bottle #14:
</td>
<td>
<input type="text" id="Text15" value="3000" size="3" />
</td>
<td>
NOS Bottle #15:
</td>
<td>
<input type="text" id="Text16" value="3000" size="3" />
</td>
</tr>
</table>
<center><input type="submit" value="Calculate" onclick="ShowCalculation(); return false;" /></center>
</div>
</div>
<div class="body4">
<div class="main">
<article id="content2">
<div class="wrapper">
<section class="col3">
<h4>Why Us?</h4>
<ul class="list1">
<li>Professional Engineers</li>
<li>Years of Experience</li>
<li>Vehicle Dynamics Experts</li>
</ul>
</section>
<section class="col3 pad_left2">
<h4>Address</h4>
<ul class="address">
<li><span>Location:</span>United States, CA</li>
<li><span>City:</span>Northridge</li>
<li><span>Phone:</span>1-888-888-8888</li>
<li><span>Email:</span>Contact Us</li>
</ul>
</section>
<section class="col3 pad_left2">
<h4>Follow Us</h4>
<ul id="icons">
<li><img src="images/icon1.jpg" alt="">Facebook</li>
<li><img src="images/icon2.jpg" alt="">Twitter</li>
</ul>
</section>
<section class="col2 right">
<h4>Search The Site</h4>
<form id="newsletter" method="post">
<div>
<div class="wrapper">
<input class="input" type="text" value="Type Your Email Here" onblur="if(this.value=='') this.value='Type Your Email Here'" onFocus="if(this.value =='Type Your Email Here' ) this.value=''" />
</div>
Search
</div>
</form>
</section>
</div>
</article>
<!-- content end -->
</div>
</div>
if I get it right, you compute these values, they are a result you want to display,
I would suggest to create a div where you want to show them (like, under the calculate button)(or a modal box, that would replace the alert).
and in js, a bit basic but well:
var stuffToShow = [
'totalTime',
'longitudinalAcceleration',
'shiftTime',
'numberOfShifts',
'corneringTime',
'numberOfCorners',
'instantaneousCoefficientOfFriction',
'totalFuel',
'meanLongAccel',
'meanHorsepower'
];
var someHtml = '';
$(stuffToShow).each( function () {
someHtml += '<div id="'+this+'">'+this+': '+youResultObject[this]+</div>;
});
$('#yourResultDiv').html(someHtml).slidedown('slow');
It is not completely clear what you are trying to do, but if this page is linked to from a javascript-based page that does the calculations, you can pass the variables using GET or POST (see here: http://www.php.net/manual/en/reserved.variables.post.php).
If you are trying to alter the html using php based on javascript running in that same page, it's going to be impossible. I recommend using only javascript, not php, in that case.
Well, assuming you have a javascript object e.g
var data = { totalTime: 12, shiftTime: 10 }
You could loop through the data object, create a label and an input for each data item in the array. Let's assume you would like to display this in a div called show_data
for( var i in data )
{
$('#show_data').append( "<label for='"+ i + "'>" + i + "</label>" );
$('#show_data').append( "<input id='"+ i +"' value='"+ data[i] + "' />" );
{
Not sure if this is what you were asking. This could be improved a lot but it gives you a rough idea.
It appears that your images.js file is obfuscated. I'm going out on a limb here, but it is possible you are asking about how to access variable names defined in that JS file before it gets compiled. If that is the case I have a few recommendations...
First, don't obfuscate your code like that; it is pointless and affects performance. If that is not an option, it is possible that the obfuscator will let you define specific keywords not to munge; set the variables you want to access in the obfuscator's configuration.
If none of this helps, then you will likely need to post more information.