I want to display "something" on the HTML forms textbox
this value should be a javascript variable
var paramvalue = "something"
document.getElementById("client_id").value = paramvalue
<form action="login.php" method="post">
<input type="hidden" name="clientID" id="client_id" value="" />
<button>Login</button>
</form>
You have to put the script after the HTML, since when it is run, the input field doesn't exist yet, so it will return an error.
<form action="login.php" method="post">
<input type="hidden" name="clientID" id="client_id" value="" />
<button>Login</button>
</form>
<script type="text/javascript">
var paramvalue = "something";
document.getElementById("client_id").value = paramvalue;
</script>
var textbox = document.getElementById('client_id');,
then
textbox.value = paramvalue;
will work.
Your issue is you have type='hidden' where it should be type='text' because hidden will not be visible. You also need to change it to run onload so you replace the value on page load.
<script type="text/javascript">
function init(){
var paramvalue = "something"
document.getElementById("client_id").value = paramvalue
}
body.addEventListener("load", init);
</script>
<form action="login.php" method="post">
<input type="text" name="clientID" id="client_id" value="" />
<button>Login</button>
</form>
Alternatively, you can keep your code, change input type = "text" and just move your script below your HTML code/ Form, negating the need for the JS function and the event listener
The user could also do :
<input type="text" name="clientID" id="client_id" value="" onload="init()" />
Related
I have a simple html form i.e.
<form action="https://www.sandbox.paypal.com/cgi-bin/webscr" method="post" target="_top" id="registration-form">
<input type="text" class="form-control" name="form-reg-fullname" data-form-field="Name" id="form-reg-fullname">
<input type="hidden" name="return" value=""/>
</form>
in <script> tag I am doing validation and changing the value of return:
<script>
$('#registration-form').submit(function () {
var fname = $.trim($('#form-reg-fullname').val());
$("#return").val("http://localhost:9000/app/fname");
});
</script>
Validation is working successfully while submitting the form but I am getting empty value in return input type. How can I make it work?
Looks like you are missing an id on the return input, you just have a name. So it should look like this:
<input type="hidden" name="return" id="return" value=""/>
That way when you call the input in js with $('#return') it will get it by it's proper id.
<input type="hidden" name="return" value=""/>
$("#return").val("http://localhost:9000/app/fname");//PROBLEM RESIDE Here
See what are you doing you are trying to assign the value to a selector that have id = return . But you don't have any element with this id however , you have an element with the same name.You can resolve this in two ways:
First selecting the element by its name:
$("input[name='return']").val("http://localhost:9000/app/fname");
or you can assign the id attribute to your input element as
<input type="hidden" id="return" name="return" value=""/>
You are assigning the value of input with id="return" which doesn't exist.
$("#return").val("http://localhost:9000/app/fname");
You should either give an id to input tag as
<input type="hidden" name="return" id="return" value=""/>
Or change script to
$("input[name='return']").val("http://localhost:9000/app/fname");
You call node using id in jquery , your return input doesnt have the Id called return
$('#registration-form').submit(function () {
var fname = $.trim($('#form-reg-fullname').val());
$("#return").val("http://localhost:9000/app/fname"); //setting the value
console.log($("#return").val()); //getting the value
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form action="https://www.sandbox.paypal.com/cgi-bin/webscr" method="post" target="_top" id="registration-form">
<input type="text" class="form-control" name="form-reg-fullname" data-form-field="Name" id="form-reg-fullname">
<input type="hidden" name="return" value="" id="return"/>
</form>
I would like to count number of submitted form by user with javascript
and then put the number of submitted form in a value attribute of an input type hidden and then retrieve that value with PHP (with the name attribute of the input hidden)
Here is a simple code I have tried, but it didn't work :
form.html
<form method="post" action="submit.php">
<input type="text" name="name" placeholder="name"/>
<input type="text" name="firstname" placeholder="firstname"/>
<input type="hidden" name="nb_submit" value="" id="nb"/>
<input type="submit" value="OK" onclick="count_nb_submit()"/>
</form>
after the html form ended, I have put the javascript code:
<script type="text/javascript">
var nb=0;
function count_nb_submit()
{
nb ++;
return nb;
document.getElementById('nb').value=nb;
}
</script>
submit.php
<?php
echo $_POST["nb_submit"] ;
?>
In your script you're returning before you've finished your function.
You should only use return when you want to stop the function and return a result. Anything after return will not be read.
This is what your code should look like:
<script type="text/javascript">
var nb=0;
function count_nb_submit() {
nb++;
document.getElementById('nb').value=nb;
return nb;
}
</script>
You are using return before setting the value to field, remove the return hope it will work.The function should be -
function count_nb_submit()
{
// calculate values
document.getElementById('nb').value= //the value you want to assign;
}
JS CODE :
<script type="text/javascript">
var nb = 0;
function count_nb_submit() {
nb++;
var myform = document.getElementById('test');
document.getElementById("nb").value = nb;
myform.submit();
}
</script>
Form CODE :
<form method="post" name="test" action="submit.php" id="test" target="_blank">
<input type="text" name="name" placeholder="name"/>
<input type="text" name="firstname" placeholder="firstname" onblur="count_nb_submit();"/>
<input type="hidden" name="nb_submit" value="0" id="nb"/>
<input type="button" value="OK" onclick="count_nb_submit();" />
</form>
<script type="text/javascript">
var nb = 0;
function count_nb_submit()
{
nb++;
var myform = document.getElementById('test');
document.getElementById("nb").value = nb;
myform.submit();
}
</script>
<form method="post" name="test" action="submit.php" id="test" target="_blank">
<input type="text" name="name" placeholder="name"/>
<input type="text" name="firstname" placeholder="firstname" />
<input type="hidden" name="nb_submit" value="0" id="nb"/>
<input type="button" value="OK" onclick="count_nb_submit();" />
</form>
How to submit form using JavaScript and redirect to a URL ?
<form name="f1" method="get" action="aaa.php">
name : <input type="text" name="value_1" value=""/><br>
age: <input type="text" name="value_2" value=""/>
<input type="submit" name="submit" value="send"/>
</form>
please see image in this link:
http://image.ohozaa.com/i/4d0/zCzQIH.jpg
after press submit button , i want to redirect page to www.example.com/aaa/robert/21
How can i do that ?
Try this with html code
<form name="f1" method="get" action="aaa.php">
name : <input type="text" id="value_1" name="value_1" value=""/><br>
age: <input type="text" id="value_2" name="value_2" value=""/>
<input type="button" name="submit" onclick="checkredirect()" value="send"/>
And javascript
<script type="text/javascript">
function checkredirect(){
var value_1 = $('#value_1').val();
var value_2 = $('#value_2').val();
window.location = 'http://www.example.com/'+value_1+'/'+value_2;
return false;
}
</script>
Don't forget to add jQuery library
Maybe something like this:
HTML:
<form id="f1" class="js-redirect" method="get" action="aaa.php">
name : <input type="text" name="value_1" id="value_1" value=""/><br>
age: <input type="text" name="value_2" id="value_2" value=""/>
<input type="submit" name="submit" value="send"/>
</form>
N.B.: name attribute in form tags is deprecated, use id attribute. Input, select and textarea tags should have ids as well.
JS:
$('.js-redirect').on('submit', function() {
var newUrl = this.action.replace('.php', '/' + $('#value_1').val() + '/' + $('#value_2').val());
this.action = newUrl;
})
set header in php file
$dynamic = $_GET['value_1'];
$id =$_GET['value_2'];
header('location:www.example.com/aaa/'.$dynamic.'/'.$id);
Try this function on click button
function myFunction() {
document.getElementById("myForm").submit();
}
I have seen on youtube when we upload any videos automatically, the title field of form gets filled with the name of the video file. How can i achieve this?
my form is
<form enctype="multipart/form-data" method="post" action="http://youshare.ca/music/writestorypost"><p>
<span class="form_label">Title</span><input type="text" value="" name="title" style="width:400px" class="inputText required"></p>
<p><label>Upload</label><input type="file" name="song">
<p><input type="submit" value="Submit" class="button"></p><input type="hidden" value="935" name="page_id">
</form>
Here's some jquery code to make it work:
$('#myfile').change( function(){
var fileValue = $(this).val();
$('#mytitle').val(fileValue);
});
And here's the modified HTML:
<form enctype="multipart/form-data" method="post" action="http://youshare.ca/music/writestorypost"><p>
<span class="form_label">Title</span><input id="mytitle" type="text" value="" name="title" style="width:400px" class="inputText required"></p>
<p><label>Upload</label><input id="myfile" type="file" name="song">
<p><input type="submit" value="Submit" class="button"></p><input type="hidden" value="935" name="page_id">
</form>
Click here for the working JSFiddle. If you've never used jQuery before, then tell me, as this may be confusing!
Edit: Here's the replacing code:
$('#myfile').change( function(){
var fileValue = $(this).val();
fileValue = fileValue.replace('_', ' ');
fileValue = fileValue.replace('-', ' ');
$('#mytitle').val(fileValue);
});
Here's the updated jsfiddle
Use this code:
//use this in your form tag
<input id="song" type="file" />
//use this in your destination(action)
document.title = document.getElementById("song").value ;
I'm currently working on a basic form. When you hit the submit button, it should first change the value of a field, and then submit the form as usual. It all looks a bit like this:
<form name="myform" id="myform" action="action.php">
<input type="hidden" name="myinput" value="0" />
<input type="text" name="message" value="" />
<input type="submit" name="submit" onclick="DoSubmit()" />
</form>
And this is how far I've come with the JavaScript code. It changes "myinput"'s value to 1, but it does not submit the form.
function DoSubmit(){
document.myform.myinput.value = '1';
document.getElementById("myform").submit();
}
You could do something like this instead:
<form name="myform" action="action.php" onsubmit="DoSubmit();">
<input type="hidden" name="myinput" value="0" />
<input type="text" name="message" value="" />
<input type="submit" name="submit" />
</form>
And then modify your DoSubmit function to just return true, indicating that "it's OK, now you can submit the form" to the browser:
function DoSubmit(){
document.myform.myinput.value = '1';
return true;
}
I'd also be wary of using onclick events on a submit button; the order of events isn't immediately obvious, and your callback won't get called if the user submits by, for example, hitting return in a textbox.
document.getElementById("myform").submit();
This won't work as your form tag doesn't have an id.
Change it like this and it should work:
<form name="myform" id="myform" action="action.php">
Here is simple code. You must set an id for your input. Here call it 'myInput':
var myform = document.getElementById('myform');
myform.onsubmit = function(){
document.getElementById('myInput').value = '1';
myform.submit();
};
No. When your input type is submit, you should have an onsubmit event declared in the markup and then do the changes you want. Meaning, have an onsubmit defined in your form tag.
Otherwise change the input type to a button and then define an onclick event for that button.
You're trying to access an element based on the name attribute which works for postbacks to the server, but JavaScript responds to the id attribute. Add an id with the same value as name and all should work fine.
<form name="myform" id="myform" action="action.php">
<input type="hidden" name="myinput" id="myinput" value="0" />
<input type="text" name="message" id="message" value="" />
<input type="submit" name="submit" id="submit" onclick="DoSubmit()" />
</form>
function DoSubmit(){
document.getElementById("myinput").value = '1';
return true;
}
My problem turned out to be that I was assigning as document.getElementById("myinput").Value = '1';
Notice the capital V in Value? Once I changed it to small case, i.e., value, the data started posting. Odd as it was not giving any JavaScript errors either.
I have done this and it works for me.
At first you must add a script such as my SetHolderParent() and call in the html code like below.
function SetHolderParent(value) {
alert(value);
}
<input type="submit" value="Submit" onclick="SetHolderParent(222);" />
You can use the onchange event:
<form name="myform" id="myform" action="action.php">
<input type="hidden" name="myinput" value="0" onchange="this.form.submit()"/>
<input type="text" name="message" value="" />
<input type="submit" name="submit" onclick="DoSubmit()" />
</form>
This might help you.
Your HTML
<form id="myform" action="action.php">
<input type="hidden" name="myinput" value="0" />
<input type="text" name="message" value="" />
<input type="submit" name="submit" onclick="save()" />
</form>
Your Script
<script>
function save(){
$('#myinput').val('1');
$('#form').submit();
}
</script>