This problem seems to be odd to me and I can't seem to fix it. I do have a simple HTML form; inside, I do have a textbox and a button as shown down here:
<form id="form1" method="get"> <!-- Note: No Action property -->
<div>
<h1>
Simple Test Form</h1>
<table border="0" width="400">
<tr>
<td align="right">
All of these words
</td>
<td>
<input name="txtAll" id="txtAll" type="text" value="testing keyword" />
</td>
</tr>
<tr>
<td colspan="2" align="center">
<input type="submit" name="Submit" value="Submit" onclick="myJS(this);" />
</td>
</tr>
</table>
</div>
</form>
MyJS file is as:
<script type="text/javascript">
function myJS(which) {
var CONSTANT_SITE_TARGET = "http://servername/redirect/target.aspx?text=";
//capture all values from the form
var allWords = document.getElementById("txtAll").value;
var morestring = ""; //More data manipulation here.....
var url = CONSTANT_SITE_TARGET + allWords + morestring;
window.open(url);
//window.location = url; //Doesn't work
//window.location.href = url; //Doesn't work
//self.location = url; //Doesn't work
//top.location = url; //Doesn't work
}
</script>
As you can see, it doesn't redirect to the designated URL in the javascript. When I use the window.open then it works. Note that in the < form... > tag, I don't put the action property in it. I don't want to open a new browser, just redirect to the new url within the same browser.
Is there a way to redirect it?
Don't use the form tags. Or, set the "type" attribute of your button to be "button", not "submit". The form submits when you click the button, but you don't want that to happen. Either removing the form or changing the button should fix improper redirection. When you don't specify an action, I'm pretty sure the default is the current URL.
Ok, just an idea. As you haven't set the action parameter, the default behaviour of a submit button is to reload the same page. You alter that behaviour by handling its onclick. Maybe there is a conflict that can be resolved by having return false; at the end of the click handler, which prevents the default action for that event.
Here
function myJS(which) {
var CONSTANT_SITE_TARGET = "http://servername/redirect/target.aspx?text=";
//capture all values from the form
var allWords = which.txtAll.value;
var morestring = ""; //More data manipulation here.....
return CONSTANT_SITE_TARGET + allWords + morestring;
}
<form id="form1" method="get" onsubmit="this.action=myJs(this)">
<div>
<h1>
Simple Test Form</h1>
<table border="0" width="400">
<tr>
<td align="right">
All of these words
</td>
<td>
<input name="txtAll" id="txtAll" type="text" value="testing keyword" />
</td>
</tr>
<tr>
<td colspan="2" align="center">
<input type="submit" name="Submit" value="Submit" />
</td>
</tr>
</table>
</div>
</form>
to elaborate on a comment:
<script>
window.onload=function() {
document.getElementById("Submit").onclick=function() {
var CONSTANT_SITE_TARGET = "http://servername/redirect/target.aspx?text=";
//capture all values from the form
var allWords = document.getElementById("txtAll".value;
var morestring = ""; //More data manipulation here.....
location = CONSTANT_SITE_TARGET + allWords + morestring;
}
}
</script>
<div>
<h1>
Simple Test Form</h1>
<table border="0" width="400">
<tr>
<td align="right">
All of these words
</td>
<td>
<input name="txtAll" id="txtAll" type="text" value="testing keyword" />
</td>
</tr>
<tr>
<td colspan="2" align="center">
<input type="button" id="Submit" value="Submit" />
</td>
</tr>
</table>
</div>
Try one the options for redirection below. I commented out three of them so that the code stays valid, but you may play around with either and see if it suits your needs.
var CONSTANT_SITE_TARGET = "http://servername/redirect/target.aspx?text=";
//capture all values from the form
var allWords = document.getElementById("txtAll").value;
var morestring = ""; //More data manipulation here.....
var url = CONSTANT_SITE_TARGET + allWords + morestring;
window.location.href= url;
//window.navigate(url);
//self.location(url);
//top.location(url);
Related
I'm making an address book of a company's tech support contacts and the admin gets access to all addresses in a form of a table. In this table, he can add, delete and make changes to data in the same page.
I have set up the add and delete functions successfully, but I struggle a lot with the edit. I'm using node, express, mongodb and vanilla javascript.
I'm still a newbie in web developement and there is are words I may use wrong, so sorry in advance!
(Excuse my french, but most of the words mean the same in english.)
My HTML
<div>
<input id="edit" type="button" value="Editer" onclick="return edit()">
<input id="valider" type="hidden" value="Valider" onclick="return valider()">
</div>
<table id='myTable'>
<thead>
<tr class="header">
<th>Nom de l'entreprise</th>
<th>Téléphone 1</th>
<th>Téléphone 2</th>
<th>Mail</th>
</tr>
</thead>
<tbody>
<% companies.forEach(function(company){ %> //I loop through my db
<tr class="compName">
<td hidden id='_id' > <%= company._id %> </td>
<td> <input id="name" class="readonly" type="text" value=" <%= company.name %>" readonly style="border: none" onblur="change(this)"> </td>
<td> <input id="phone" class="readonly" type="text" value=" <%= company.phone %>" readonly style="border: none" onblur="change(this)"> </td>
<td> <input id="phone2" class="readonly" type="text" value=" <%= company.phone2 %>" readonly style="border: none" onblur="change(this)"> </td>
<td> <input id="mail" class="readonly" type="text" value=" <%= company.mail %>" readonly style="border: none" onblur="change(this)"> </td>
</tr>
<% }) %>
</tbody>
</table>
My Script
<script>
function edit() {
var editComp = document.getElementsByClassName("readonly");
var edit = document.getElementById('edit').type = 'hidden'; //get the edit button and hide it
var valider = document.getElementById('valider').type = 'button'; //then unhide the validate button so I can use it
for (var i = 0; i < editComp.length; i++) { //remove the readonly for each td so I can edit it
editComp[i].removeAttribute('readonly');
editComp[i].setAttribute("style", "border: 1px solid red;");
};
}
function valider() {
var editComp = document.getElementsByClassName("readonly");
var edit = document.getElementById('edit').type = 'button'; //unhide the edit button
var valider = document.getElementById('valider').type = 'hidden' //hide my validate button
for (var i = 0; i < editComp.length; i++) { //put back the readonly for each td so its uneditable
editComp[i].setAttribute('readonly', true);
editComp[i].setAttribute("style", "border: none;");
};
}
function change(element) { //when the input gets unfocused, I assume that's because changes happened
var setChanged = element.setAttribute("class", "readonly changed"); //I mark all changed element
/*I want to udapte my database with the changed elements
I was thing of getting the hidden company._id and the id of the changed element so I can update them specifically*/
}
</script>
So I was think of getting the col[0] of the changed row, which is the _id of my changed element, so I can target it for updating in my database, but I don't know how I should do it.
Thanks!
Below in the example, I want that each time when the add button is clicked to take the element inside the template div and append it to the landingzone class element. But at the same time I need the NEWID to change for the new element. Of course this is just an example, the table stuff can be a div or anything else.
the form:
<form method="post">
<input type="text" name="title">
<input type="text" name="number">
<table>
<thead>
<tr> <th>Parts</th> </tr>
</thead>
<tbody class="landingzone">
</tbody>
</table>
<input type="submit" value="Save">
<input type="button" name"add" class="add" value="Save">
</form>
the template:
<div class="template" style="display: hidden">
<tr id="NEWID">
<td>
<input type="text" name="part_NEWID">
</td>
</tr>
</div>
What would be the best way to accomplish this?
Here's an example for your need. The javascript will work without changing any html except in place of name"add" should be name="add"
What i have done here is i'm getting the id of the template tr and setting it with increment and also the input field name.
var $landingzone = $('.landingzone');
var $add = $('.add');
var desiredId = 'id';
$add.on('click', function() {
var $template = $('.template').find('tr');
var id = $template.attr('id');
var idArr = id.split('-');
if (!idArr[1]) {
id = desiredId + '-1';
} else {
id = desiredId + '-' + (parseInt(idArr[1]) + 1);
}
$template.attr('id', id);
$template.find('input').attr('name', 'part_'+id);
console.log('input id--->'+id, 'input name--->'+'part_'+id);
$landingzone.append($template.clone());
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form method="post">
<input type="text" name="title">
<input type="text" name="number">
<table>
<thead>
<tr>
<th>Parts</th>
</tr>
</thead>
<tbody class="landingzone">
</tbody>
</table>
<input type="submit" value="Save">
<input type="button" name="add" class="add" value="Add">
</form>
<table class="template" style="display: none">
<tr id="NEWID">
<td>
<input type="text" name="part_NEWID">
</td>
</tr>
</table>
Like #Andrea said in her comment, some more details would be appreciated ...
I think what you are after is:
const $template = $('.template').clone()
$template.attr('id', 'someId')
$template.find('input[name="part_NEWID"]').attr('name', 'part_someId')
$('.landingzone').append($template)
And if you need it in a function:
function appendTemplateToLandingZone (newId) {
const $template = $('.template').clone()
$template.attr('id', newId)
$template.find('input[name="part_NEWID"]').attr('name', 'part_' + newId)
$('.landingzone').append($template)
}
I haven't tested this, so it might need a slight adjustment. If you'll provide a basic jsbin I'll make it work there.
I have code here. There are no errors in this code, but when I was tried to execute this, the output is shown just for a fraction of second. After that, the fields are changed to null. I want all the values to be shown, even after clicking the submit button.
<script type="text/javascript">
function calcu() {
var h = parseInt(document.getElementById("height").value);
var w = parseInt(document.getElementById("weight").value);
var r = h + w;
document.getElementById("res").innerHTML = r;
if (r < 50) {
var x = document.getElementById("report");
x.innerHTML = "less 50";
}
if (r > 50) {
var xy = document.getElementById("report");
xy.innerHTML = "high 50";
}
}
<body>
<form onsubmit="calcu();">
<table>
<tr>
<td>Height:</td>
<td>
<input type="text" id="height">
</td>
</tr>
<tr>
<td>Weight:</td>
<td>
<input type="text" id="weight">
</td>
</tr>
<tr>
<td>
<input type="submit" value="CALCULATE">
</td>
<td>
<p id="res"></p>
</td>
</tr>
</table>
<p id="report">REPORT</p>
<p id="tip"></p>
</form>
Show Your Code First for more.
As much i can from your statement is that you have a button which is type submit and your values are not holding because when you click on submit type button it will post your data and find the next where it has to go in action attribute as if you have not given the action attribute (a/c to me ) so its reloading the page which refreshing the whole content that's why your page is not holding the data.
But if you want it to be hold make your button type simple "Button".
I think this will resolve your problem.
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<script type="text/javascript" >
function calcu() {
var h = parseInt(document.getElementById("height").value);
var w = parseInt(document.getElementById("weight").value);
var r = h + w;
document.getElementById("res").innerHTML = r;
if (r < 50) {
var x = document.getElementById("report");
x.innerHTML = "less 50";
}
if (r > 50) {
var xy = document.getElementById("report");
xy.innerHTML = "high 50";
}
}
</script>
</head>
<body>
<form id="form1" >
<table>
<tr>
<td>Height:</td>
<td>
<input type="text" id="height" />
</td>
</tr>
<tr>
<td>Weight:</td>
<td>
<input type="text" id="weight"/>
</td>
</tr>
<tr>
<td>
<input type="button" value="CALCULATE" onclick="calcu();" />
</td>
<td>
<p id="res"></p>
</td>
</tr>
</table>
<p id="report">REPORT</p>
<p id="tip"></p>
</form>
This will do good You are calling function on form submit which reloads the page so previous page does not exist thats why is not doing any good so your have to change your button type to button and on button click you can call the function you will get your desired result.
Im just new at using Javascript and I'm having trouble on pageload event. After submitting form1, form 2 should appear.
<html>
<head>
<script src="jquery1.9.1.js" type="text/javascript"></script>
<link rel="stylesheet" type="text/css" href="sCss.css">
</head>
<script type="text/javascript">
function hide( obj1 ) {
obj1 = document.getElementById( obj 1);
if ( document.cookie.indexOf('mycookie') == -1 ) {
document.cookie = 'mycookie = 1';
obj1.style.display = 'none';
} else {
obj1.style.display = 'block';
}
}
function show( obj2 ) {
var cookie = "test"
obj2 = document.getElementById( obj2 );
obj2.style.display = 'block';
document.cookie = 'mycookie = 1';
}
</script>
<body onload="hide('form2')">
<form id="form1" onsubmit="show('form2')">
<table id="table1" border="1" >
<tr>
<td>
<input type="text" name="txt1" id="txt1" />
</td>
<td>
<input type="submit" name="submit1" id="submit1" />
</td>
</tr>
</table>
</form>
<form id="form2">
<table id="table2" border="1" >
<tr>
<td>
<input type="text" name="txt2" id="txt2" />
</td>
<td>
<input type="submit" name="submit2" id="submit2" />
</td>
</tr>
</table>
</form>
</body>
</html>
Base on the code given. After clicking the submit button of form1, form2 appears and disappears right away.
I think you should abort the onload method of trying to do this. If you want to post to the same page maybe you should set your form to post with a query string ?submitted=true Then you could read this with JavaScript to determine if you should show your next form.
Have a look
<form id="form1" action="index.html?submitted=true" method="post" onsubmit="show('form2')">
<table id="table1" border="1" >
<tr>
<td>
<input type="text" name="txt1" id="txt1">
</td>
<td>
<input type="submit" name="submit1" id="submit1">
</td>
</tr>
</table>
</form>
See I've changed the action to reflect the current page (assuming it's index.html) and I've added a query string (?submitted=true) Once the form has been submitted you can use Javascript to parse this from the URL and show the second form.
You can create a Javascript function (taken from jquery get querystring from URL) to parse the query string for you.
// Read a page's GET URL variables and return them as an associative array.
function getUrlVars()
{
var vars = [], hash;
var hashes = window.location.href.slice(window.location.href.indexOf('?') + 1).split('&');
for(var i = 0; i < hashes.length; i++)
{
hash = hashes[i].split('=');
vars.push(hash[0]);
vars[hash[0]] = hash[1];
}
return vars;
}
Now that you have this function you can make a call to the method onload or wherever you see fit and see if submitted has been set.
//Simple conditional to see if the query string 'submitted' is set to true
if(getUrlVars()["submitted"] == "true"){
//Hide Form1, Show Form2
};
While this is probably not the best method and some form of dynamic programming language would suit you better I always had fun learning and this will get you going.
Final Code:
<html>
<head>
</head>
<script type="text/javascript">
// Read a page's GET URL variables and return them as an associative array.
function getUrlVars()
{
var vars = [], hash;
var hashes = window.location.href.slice(window.location.href.indexOf('?') + 1).split('&');
for(var i = 0; i < hashes.length; i++)
{
hash = hashes[i].split('=');
vars.push(hash[0]);
vars[hash[0]] = hash[1];
}
return vars;
}
function hide(obj1)
{
obj1 =document.getElementById(obj1);
obj1.style.display='none';
}
function show(obj2)
{
obj2=document.getElementById(obj2);
obj2.style.display='block';
}
function isItSubmitted(){
if(getUrlVars()["submitted"] == "true"){
hide('form1');
show('form2');
}
else{
hide('form2');
console.log('notsubmitted');
}
}
</script>
<body onload="isItSubmitted();">
<form id="form1" action="index.html?submitted=true" method="post" onsubmit="show('form2')">
<table id="table1" border="1" >
<tr>
<td>
<input type="text" name="txt1" id="txt1">
</td>
<td>
<input type="submit" name="submit1" id="submit1">
</td>
</tr>
</table>
</form>
<form id="form2">
<table id="table2" border="1" >
<tr>
<td>
<input type="text" name="txt2" id="txt2">
</td>
<td>
<input type="submit" name="submit2" id="submit2">
</td>
</tr>
</table>
</form>
</body>
</html>
Let's say that this' an HTML code:
<tr>
<td>Wusool</td>
<td id="yasel">
15:12
</td>
</tr>
and I want to change it into this html code:
<tr>
<td>Wusool</td>
<td id="yasel">
15:12
</td>
</tr>
<tr>
<td>Ersal</td>
<td id="sent">
20:12
</td>
</tr>
How can I use GetElementById to do this?
Thanks in advance.
var tr = document.getElementById('yasel').parentNode,
new_tr = tr.parentNode.insertRow( tr.rowIndex + 1 ),
new_td;
new_tr.insertCell(0).innerHTML = 'Erasel';
(new_td = new_tr.insertCell(1)).innerHTML = '20:12';
new_td.id = "sent";
http://jsfiddle.net/7N3kr/
After getting elementbyID, get parent element (I don't have code handy, but you can google how to get parent element for html getelementbyID). Then add child element.
Try This Code in HTML Head:
<script language="javascript" type="text/javascript" >
function ChangeValue(element_id, val) {
var elm = document.getElementById(element_id);
elm.innerHTML = val;
}
</script>
Try This in HTML body:
<table>
<tr>
<td>
<span id="box1"></span>
</td>
<td>
<span id="box2"></span>
</td>
<td>
<span id="box3"></span>
</td>
</tr>
</table>
<input type="button" id="btn_change1" value="Change Value" onclick="ChangeValue('box1','22:30')" />
<input type="button" id="btn_change2" value="Change Value" onclick="ChangeValue('box2','11:10')" />
<input type="button" id="btn_change3" value="Change Value" onclick="ChangeValue('box3','21:35')" />
using javascript you can do it as
var td_elem = document.getElementById('yasel');
var tr_elem = td_elem.parentNode;
var table_elem = tr_elem.parentNode;
table_elem.innerHTML = table_elem.innerHTML + '<tr><td>Ersal</td><td id="sent">20:12</td></tr>';
fiddle : http://jsfiddle.net/4MJuS/
but you must try using jquery, it is a very good framework for javascript.
you can do it vary easily using jQuery
$('#yasel').parent().parent().append('<tr><td>Ersal</td><td id="sent"> 20:12 </td></tr>');