How to refresh page each time you press submit button? - javascript

I'm new to Javascript and HTML.
I have the following form in HTML:
<div id="form-select">
<form id="date_form" onsubmit="return myFunction();">
<datalist id="dates">
<option value="February 7">February 7</option>
<option value="February 14">February 14</option>
<option value="February 21">February 21</option>
<option value="February 28">February 28</option>
</datalist>
<input type="text" class="input" name="data" id="date" value="" list="dates" placeholder="pick a date"><br>
<input type="submit">
</form>
</div>
Here's the javascript in a file called script.js. The js file is linked in the header as <script type="text/javascript" src="script.js" />:
function myFunction(){
var input = document.getElementById("date").value;
if(input==="February 7"){
document.getElementById('w1').innerHTML = document.getElementById('w1').innerHTML + "<h2> HEADING </h2>";
}
return false;
};
When I fill out the form and hit submit, the javascript correctly executes the function and adds "HEADING." However, when I press submit again, it adds "HEADING" a second time under the first instance of it.
How do I make it so that the page "refreshes" each time submit is pressed?
Thanks!

You can Use
window.location.reload();
In your Submit event code..

use jQuery, bind('submit', function(e){ e.preventDefault; ....; })
$('#date_form').submit(function(e){
e.preventDefault();
var input = document.getElementById("date").value;
if(input==="February 7"){
document.getElementById('w1').innerHTML = "<h2> HEADING </h2>";
}
return false;
});

Found another way around the issue. I added the statement:
document.getElementById('week').innerHTML = "";
at the beginning of each call of the function. That way, every time the user clicks submit, the div is emptied out before it is repopulated.

Related

Concatenate two fields and use this value to change/set value of a hidden field

Here is what I want to achieve. I have a requirement in which there is one dropdown for country codes and another input field for mobile number. I want to send country code and mobile input value as combined value so for that I am using a hidden field. When not using a hidden field it is easy to change value of a third tag element but that will not send value when form is submitted. So hidden field has to be used. So I have tried doing this but it is not changing value of hidden field.
<html>
<head>
<script language="javascript">
var dropdown = '';
var mobilenum = '';
function calldropdown()
{
dropdown = document.getElementById("country_code_id").value;
return dropdown;
}
function calltxtfield()
{
mobilenum = document.getElementById("mobileid").value;
return mobilenum;
}
function codemobile()
{
document.getElementById("codemobileid").value = calldropdown() + ' ' + calltxtfield;
alert(document.getElementById("codemobileid").value);
}
</script>
</head>
<body>
<form>
<select name="country_code" id="country_code_id" onchange="calldropdown()">
<option value="">Select</option>
<option value="+975">Bhutan</option>
<option value="+977">Nepal</option>
<option value="+94">Sri Lanka</option>
</select>
<input type="text" name="mobile" id="mobileid" onchange="calltxtfield()" />
<input type="hidden" name="codemobile" id="codemobileid" value="" />
<input type="submit" name="submit" value="Submit" onclick="return codemobile();" />
</form>
</body>
</html>
I can not explain it right now, but name="codemobile" seems to silently shadow function codemobile(). Rename one of the two and it works.
Also note that right now you are concatenating the function body (... + calltxtfield;), it should rather be ... + calltxtfield();

How to change button URL through JS?

I have been spending a lot of time researching how to change a button href dynamically in my website using JS. I have a functioning Wordpress website, but would like to add some small additional functionality using JS to change a button's link based on a few user options.
I have researched this and found answers, but I absolutely cannot get the solutions to work on my site.
One of the simplest solutions that should work was found here:
How to make option selection change button link?
I can't understand what is different between what I am trying to accomplish and what the accepted answer proposed. I added window.onload() to prevent the JS from running before elements were loaded.
I am trying to do something similar with the following HTML & JS code:
HTML Code:
<input type="hidden" id="input-book-type" value="GlassCrystal">
<br><br>
<select id="select-page-size">
<option value="6x6">6" x 6"</option>
<option value="10x10">10" x 10"</option>
</select>
<br><br>
<input id="input-project-title" value="Optional Project Title">
<br><br>
<a class="button" id="design-button" href="http://">Design Now</a>
JS Code:
window.onload = function() {
document.getElementById("design-button").onclick = function() {
var booktype = document.getElementById("input-book-type");
var pagesize = document.getElementById("select-page-size");
var projtitle = document.getElementById("input-project-title");
this.href = "http://test/?sessionid=guest&ref="+booktype.value+pagesize.value+"&projectName="+projtitle.value+"/";
};
}
JS Fiddle:
https://jsfiddle.net/w65c9x2d/
I think your code to change the href is correct. However, the onload function is not immediately invoked for the code to work.
window.onload = function(e) {
var booktype = document.getElementById("input-book-type");
var pagesize = document.getElementById("select-page-size");
var pagenum = document.getElementById("select-page-num");
var projtitle = document.getElementById("input-project-title");
document.getElementById("design-button").onclick = function() {
this.href = "http://design.framesmile.com/?sessionid=guest&ref=" + booktype.value + pagesize.value + "*projectName=" + projtitle.value + " / ";
console.log(this.href);
};
}();// invoke the function
<input type="hidden" id="input-book-type" type="" value="GlassCrystal">
<br>
<br>
<select id="select-page-size">
<option value="6x6">6" x 6"</option>
<option value="10x10">10" x 10"</option>
</select>
<br>
<br>
<select id="select-page-num">
<option value="20">20</option>
<option value="22">22</option>
</select>
<br>
<br>
<input id="input-project-title" type="" value="Optional Project Title">
<br>
<br>
<a class="button" id="design-button" href="http://test/">Design Now</a>
Here is example code:
jhg
jhhghj
<script type="text/javascript">
document.getElementById("myLink").onclick = function() {
document.getElementById("abc").href="xyz.php";
return false;
};
</script>
I took this from here
Change your button to this:
<button class="button" id="design-button" onclick="redirect()">Design Now</button>
Now instead of using a link, simply do a function that will take the inputs and change the window.location.href (or whatever method you prefer) to change the page.
redirect(obj) {
window.location.href = "http://test/?sessionid=guest&ref="+booktype.value+pagesize.value+"&projectName="+projtitle.value+"/"
}
Obviously change it to your liking :)
I recommend using jQuery.
$("#submit").on('click', function(event) {
event.preventDefault();
data = $("#link").val();
$("#frame").attr({
src: "http://"+data});
});
When the submit button is clicked, it changed the iframe url which changed the content of the iframe automatically.
I don't really understand what you are trying to ask, but try to modfiy the code above :)

Redirect on selecting a select input

<script type="text/javascript">
var x = document.getElementById("mySelect").value;
</script>
<form action="something?val="+x enctype="multipart/form-data" method="post">
<label>Select the Playlist:</label>
<select name="select" id="mySelect">
<option value="#">----Select-----</option>
<option value="playlist1">Playlist1</option>
<option value="playlist2">Playlist2</option>
</select>
<input type="submit">
</form>
Now i want that when i select playlist1 and press the submit button my page should redirect to something?val=playlist1..But it is redirecting to something?val= ..Value of x is not getting printed there.I cannot find the mistake please help.
assign id to your form so that it is easier to access thru js, like:
...
<form id="myform" action="something" enctype="multipart/form-data" method="post">
...
and use change event handler of select element to change your form's action, such as:
var selectEle = document.getElementById("mySelect");
selectEle.onchange = function(event) {
var selValue = event.target.value,
frm = document.getElementById("myform");
frm.action = (selValue != "#") ? "something?val=" + selValue : "something";
}
var x = document.getElementById("mySelect").value;
//works just like a link
window.location.href = "/somewhere?x=" + x;
I am giving you a little explanation of working flow of your code:
once page load following line will run (i am assuming you write your following js in header).at that time you form is not rendered so value of x is undefined,
<script type="text/javascript">
var x = document.getElementById("mySelect").value;
// this is not going to call automatically , when you change value of select box.
</script>
once your form rendered and you change the value of select box you need to call a function to execute above js code to get new value.
and other issue is the way you are using x in html , x is a javascript variable so it can only use inside a tag.
<form action="something?val="+x enctype="multipart/form-data" method="post">
For your expected result there is no need of javascript simple html form can do this, use get method of form it put your input name with value in url automatically
<form action="something" method="get">
<label>Select the Playlist:</label>
<select name="val" id="mySelect">
<option value="#">----Select-----</option>
<option value="playlist1">Playlist1</option>
<option value="playlist2">Playlist2</option>
</select>
<input type="submit">
</form>

jquery ddslick not working

Okay, this is continuing from my prior asked question:
iFrame with Variable URL in PHP Variable
I even have it set to automatically turn on when the page is ready and that still doesnt work.
Now I am using ddslick so I can show an icon next to each drop down in a form.
This is what Im doing:
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script type="text/javascript" src="jquery.ddslick.min.js"></script>
Then in the dropdown:
<select form="form1" id="MyMenu">
<option value="0" data-imagesrc="http://example.com/entry/value0.png" data-description="Description 0" >Nothing</option>
<option value="1" data-imagesrc="http://example.com/entry/value1.png" data-description="Description 1" >Value 1</option>
<option value="2" data-imagesrc="http://example.com/entry/value2.png" data-description="Description 2" >Value 2</option>
</select>
The scripts:
<script>
//Make it slick!
$('#make-it-slick').on('click', function(){
$('#MyMenu').ddslick();
});
//Restore Original
$('#restore').on('click', function(){
$('#MyMenu').ddslick('destroy');
});
$(document).ready(function(){
$('#MyMenu').ddslick(); // Turn on Slickness
});
</script>
Lastly the form
<form name="form1" id="form1">
<input type="submit" name="submit" id="submit" value="Submit Form">
<button id="make-it-slick"> Make it slick!</button>
<button id="restore"> Restore to Original</button>
</form>
Please replace the code you have written in script tag with below code
<script type="text/javascript">
//Make it slick!
$(document).ready(function(){
$('#MyMenu').ddslick(); // Turn on Slickness
$('#make-it-slick').click(function(){
$('#MyMenu').ddslick();
return false; //do not propogate click
});
$('#restore').click(function(){
$('#MyMenu').ddslick('destroy');
return false; //do not propogate click
});
});
</script>
With your code, when button is clicked, that click is followed and form is submitted. button tag in form submits the form. So now what we need to do here is when button is clicked, form should not get submit but it should only execute the javascript code. We do this by returning false in click method.
Hope this helps :)

javascript jquery carrying html form POST data

SO I have a form that look similar to
<form action="test.php" id="checksub" method="post">
<div>
<select name="mydropdown">
<option value="buy">buy</option>
<option value="sell">sell</option>
</select>
</div>
autocomplete text input that triggers "checksub"
<input type="submit" id="checksub" name="checksub" style="visibility:hidden">
<input type="submit" id="newsbutton" name="newsbutton">
</form>
<script type="text/javascript">
$('#newbutton').click(function() {
var newaction = "cantfinditems.php";
$("#checksub").prop("action", newaction);
$('#checksub').submit();
});
</script>
Now the submit button is hidden because the autocomplete triggers it anyway, but if the user cant find what they are looking for I want a button that says "cant find what your'e looking for?"
I want this button to have a different action to the form action, ie window.location = cantfinditems.php
but I also want to carry the POST data from the form ie "mydropdown".
Thank you
Ok, so you need a second button, which calls a JavaScript function. In this function, you do a number of things:
Set the action attribute of the form to your alternate action (e.g. cantfinditems.php)
var newaction = "cantfinditems.php";
$("#form_id").prop("action", newaction);
Submit the form
$('#form_id').submit();
So a full example would be:
<script type="text/javascript">
$('#yourbuttonid').click(function() {
var newaction = "cantfinditems.php";
$("#form_id").prop("action", newaction);
$('#form_id').submit();
});
</script>

Categories