Adding a Div response on ActionPerformed - javascript

I have this javascript/ajax code that I have been tweaking for half a day now to just add a div response that was echoed by php script. Any help would be much appreciated.
<form id="form1" name="form1" method="post" enctype="multipart/form-data">
<select id="machine" name="machine" class="field" >
<option value="" selected="selected">Choose..</option>
<option value="machine1.php">Machine 1</option>
<option value="machine2.php">Machine 2</option>
</select>
</fieldset>
<fieldset>
<legend><strong>Select a file to upload</strong></legend>
<input type="file" id="files" name="files[]" size="40" multiple="multiple" />
<br />
<p></p>
<input type="submit" value="Upload File" id="upload" />
<br />
<br />
</form>
<div id="information"></div>
</fieldset>
<fieldset>
<legend><strong>Uploaded Files</strong></legend>
<div id="uploaded"></div>
</fieldset>
<script type="text/javascript">
function addaction(actionvalue){
$("#form1").attr("action",actionvalue);
};
</script>

As GHOST93 said, there's no AJAX call in your code.
But to me it seems like you're trying to change the action attribute based on what is selected in the select box. That by itself doesn't need an Ajax call.
Try adding something like this into your script
http://jsfiddle.net/W4Km8/7431/
$("#machine").change(function(){
$("#form1").attr("action", $(this).val());
});
And you can probably drop your addaction() function.

Related

Conditionally change form action in JSP based on combo box selection

I am have three servers in three different domains. For example,
google.com
oracle.com
sap.com
I have a combo box with the same values as above. How can I change the form action to change to respective site once it is selected in the combo box?
Here is the code i have tried.
<script src="http://code.jquery.com/jquery-latest.min.js"
type="text/javascript"></script>
<script>
$(document).ready(function(){
$("#serverName").on("change",function(){
alert($(this).val());
if($(this).val().toString===("google"))
$("#dataform").attr('action',"http://google.com");
if($(this).val().toString===("oracle"))
$("#dataform").attr("action","http://oracle.com");
if($(this).val().toString===("sap"))
$("#dataform").attr("action","http://sap.com");
});
});
</script>
My form is like :
<form action="anyaction" name="dataform" method="post" >
<img src="logo.png"><br/>
<label for="email" class="boldtext">Triggered By</label><br>
<input type="text" id="email" name="email" placeholder="Enter your mail id"
required><br/>
<label for="serverName" class="`boldtext`">Server Name</label>
<select id="serverName" name="serverName" >
<option value="selectServer">Select the Server</option>
<option value="google">Google</option>
<option value="oracle" >Oracle</option>
<option value="sap">SAP</option>
</select><br/>
<label for="Clients" name= "Clients"
class="boldtext">Clients</label><br>
<input type="text" id="count" name="count"
placeholder="Enter No Of clients" required>
<br/>
<label for="items" name="items" id="items"
class="boldtext">Items</label>
<textarea id="items" name="items" required rows="3"> </textarea><br/>
<button type="submit">Submit</button>
</form>
Looks like there is some value represented by the name for the form i used "dataform".
Once i change it to dataform123 it worked. also the comparison i have changed from tostring.equals to == / === both of them worked.
Thanks for being there to keep me trying !!

Form event onChange not working on dropdown selection

I have one form that works perfectly and changes the action of the form based on radio buttons:
<form name="form1" method="post" action="[[base_urlnt]]/electricity-rate-plans">
<input type="radio" name="energy" value="electricity" checked>
<label for="electricity">Electricity</label>
<input type="radio" name="energy" value="gas" onChange="if(this.checked){document.forms[0].action='[[base_urlnt]]/natural-gas-rate-plans'}">
<label for="gas">Natural Gas</label>
<input name="service_zip_5" type="text" id="search" placeholder="Enter ZIP Code"><button type="submit" class="bigButton">Get Rates</button>
</form>
And I want to do the same thing, but change the action on another form by using onChange but not on radio buttons, but using a dropdown list seen below. What am I doing wrong?
<form name="form1" method="post" action="[[base_url]]alberta/electricity-plans">
<p>Choose Your Service</p>
<select name="service" id="service" title="Choose Your Service">
<option value="Electricity" selected="selected">Electricity</option>
<option value="Gas" onChange="if(this.selected){document.forms[0].action='[[base_url]]alberta/natural-gas-plans'}">Natural Gas</option>
<option value="Dual" onChange="if(this.selected){document.forms[0].action='[[base_url]]alberta/dual-fuel-plans'}">Dual Fuel</option>
</select>
<p>Enter Your ZIP Code</p>
<input name="service_zip_5" type="text" id="zipcode">
<button type="submit" id="submit">Get Started</button>
</form>
I tried
onChange="if(this.checked)
first and the thought that since it is a selection it should be onChange="if(this.selected) but neither work. Is this just not a function?
You need to change it slightly.
Your onchange events should be bound to the select not the individual options.
I have also added an attribute "data-url" to each option to store the url that will need to be added to the form action onchange.
This "data-url" attribute can then be used by the javascript function to update the form action. It also means you don't have to repeat the same code in all of your onchange attributes. You can just call a function that extracts the corresponding "data-url".
See - http://jsfiddle.net/williamtdavies/8kxzaquw/
<form name="form1" method="post" action="[[base_url]]alberta/electricity-plans">
<p>Choose Your Service</p>
<select name="service" id="service" title="Choose Your Service" onChange="changeFormAction(this);">
<option value="Electricity" data-url="[[base_url]]alberta/electricity-plans">Electricity</option>
<option value="Gas" data-url="[[base_url]]alberta/natural-gas-plans">Natural Gas</option>
<option value="Dual" data-url="[[base_url]]alberta/dual-fuel-plans">Dual Fuel</option>
</select>
<p>Enter Your ZIP Code</p>
<input name="service_zip_5" type="text" id="zipcode"/>
<button type="submit" id="submit">Get Started</button>
</form>
<script>
function changeFormAction(elem){
document.forms[0].action = elem.options[elem.selectedIndex].getAttribute("data-url");
}
</script>

Redirect form to different URL based on select option element, but after I submit the form

I'm new to JavaScript, and seeking for some help. I have a form with a select drop down with 5 options.
<form accept-charset="UTF-8" action="" method="post" onclick="javascript:location.href = this.value;">
<input id="name" name="name" size="30" type="text" value="Type your name">
<select id="option" name="Region" >
<option value="value1.html">Option1</option>
<option value="value2.html">Option2</option>
<option value="value3.html">Option3</option>
<option value="value3.html">Option4</option>
<option value="value3.html">Option5</option>
</select>
<input type="submit" id="submit" value="Submit">
</form>
And this Javascript:
<script type="text/javascript">
window.onload = function(){
location.href=document.getElementById("option").value;
}
</script>
I tried this and doesn't work to redirect to the page I want after I submit the form! Any ideas? I need that form to work, doesn't matter if I can do it with PHP or JavaScript.
Your window.onload is executed instantly before you even get a chance to make a choice.
<form onsubmit="return mysubmit();">
<select id="option" name="Region" >
<option value="value1.html">Option1</option>
<option value="value2.html">Option2</option>
<option value="value3.html">Option3</option>
<option value="value3.html">Option4</option>
<option value="value3.html">Option5</option>
</select>
<input type="submit" id="submit" value="Submit">
</form>
<script>
function mysubmit(){
//you can return false; here to prevent the form being submitted
//useful if you want to validate the form
window.location.href=document.getElementById('option').value;
}
</script>

Open submit in new tab (or window) and replace the content of this tab in a for loop

The following HTML document contains a form which should be submitted by the script. The value of the text field is set initially to 50000 and the form is submitted in a new window and the script STOPS but that's not what I want; I want the script to open the new window for 50000 then do the same for 50001, 50002, ...,55000, of course in the same opened window
<html>
<head>
<script type="text/javascript">
function now(){
for (i=50000;i<=55000;i++){
document.getElementById("candidate_id").value=i;
document.forms["here"].submit();
}
}
</script>
</head>
<body onload="now()">
<form accept-charset="UTF-8" action="http://www.naharnet.com/examresults" method="post" target="_blank" id="here" name="here">
<div style="margin:0;padding:0;display:inline"><input name="utf8" type="hidden" value="✓" /><input name="authenticity_token" type="hidden" value="ksuw0r4TRM80q1Sw+dBoYRSrw7tfxmjLpVIVyqJnnhs=" /></div>
<div class="row">
<h5 id="category">Exam Category</h5>
<select id="exam_category" name="exam_category">
<option value="SG">SG </option>
<option value="SV"> SV </option>
<option value="SE">SE</option>
<option value="LH">LH</option>
<option value="BR">BR</option></select>
</div>
<div id="padding">
<h5 id="cand_num">Candidate #</h5>
<input id="candidate_id" maxlength="5" name="candidate_id" type="text"/>
</div>
<div id="padding">
<input class="search_btn" name="commit" type="submit" value="Search"/>
</div>
</form>
</body></html>

unable to add new text box on onclick() using javascript and disable an element

I am not able to add a new input box after the onclick event is called and is there way to disable the select options after the input box appears? I am sorry for such a noob question but I am at the dead end here, been trying this for an hour. Please link me to a place where I can easily learn JS with examples.
<script>
function funcGet(val)
{
if(val=="Create new category")
{
var element = document.createElement("input");
element.setAttribute("type", "input");
element.setAttribute("name", "new_cat");
var foo = document.getElementById("cat");
foo.appendChild(element);
}
}
</script>
<div name="cat">
<form method="post" action="">
<input type="text" placeholder="Enter a topic name" name="word"><br/>
<select name = "category" onchange="funcGet(this.value);">
<?php
displayCat();
?>
</select>
</div>
<select name = "site_type">
<?php
displaySitetype();
?>
</select>
<input type="submit" value="Submit data">
</form>
Try changing <div name="cat"> to
<div id="cat">
.getElementById only works on IDs,
as in
document.getElementById("cat");
If you want to leave <div name="cat"> you should use .getElementsByTagName[0] instead.
As foir a a link to learn JavaScript by example, I recommend the W3Schools JavaScript Tutorial, as they let you try out code as you learn it on their website. Once you become more familiar, you can reference the Mozilla Developer Network.
Here
var foo = document.getElementById("cat"); is giving null
There is no element exist with id cat
Error is:TypeError: foo is null
Change this:
<div name="cat">
To this:
<div id="cat">
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>
Untitled Document
</title>
<script>
function generateRow() {
var d=document.getElementById("div");
d.innerHTML+="<td><input type='text'<td><input type='text'<td><input type='text' name='food'name='food'name='food'name='food'>";
}
</script>
</head>
<body>
<form id="form1" name="form1" method="post" action="">
<label>
<input name="food" type="text" id="food" />
</label>
<td>
<input name="food" type="text" id="food" />
</td>
<td>
<input name="food" type="text" id="food" />
</td>
<div id="div">
</div>
<td>
<input type="button" value="Add" onclick="generateRow()"/>
</td>
<td>
<label>
<input type="submit" name="Submit" value="Submit" />
</label>
</td>
</form>
</body>

Categories