I'm not sure if this is possible, or if I am doing it the wrong way?
I have a form that when submitted, should send the user to a URL depending on the input.
e.g If the users inputs '2', the URL should be books/itemView?id=2
I have created a var = id, which takes the search input box data. Is it possible to add this variable to my current form action? Perhaps there is a more efficient way?
My current code is as follows;
<form id="search" action="<?php echo URL; ?>books/itemView?id=" method="post">
<input type="text" name="search" id="demo"/>
<input type="submit" value="Submit">
</form>
My JS
$(document).ready(function(){
var id = $('#search').val();
});
Quite new to JS so any help appreciated.
JS should be
$('#search').on('submit', function() {
var id = $('#demo').val();
var formAction = $('#search').attr('action');
$('#search').attr('action', formAction + id);
});
If they enter 2 in the search input then your id will be appended to your url like:
url?search=2
So maybe you want to change the name of your search input to id or add another input field.
<form id="search" action="<?php echo URL; ?>books/itemView" method="post">
<input type="text" name="id" id="demo"/>
<input type="submit" value="Submit">
</form>
That should be all you need no jquery or javascript necessary.
When you submit it should result in:
books/itemView?id=2(or whatever is in the search/id input when you click submit)
Hmm, you can try with that:
$(document).ready(function(){
var $form = $('#search');
var id = $form.val();
var $search = $('#demo');
var originalAction = $search.attr('action');
$form.on('submit', function() {
$search.attr('action', originalAction + id);
});
});
Before submitting the form, jQuery's on('submit', handler) function executes the code in handler modifying the attribute action that you want.
originalAction variable stores the content of the action attribute that was partially generated in php, then you append your id dynamically created with js.
Related
I have a login form on a modal jquery dialog with the usual 2 text INPUTs. When I enter a login name and password then click the submit, the call back function is called.
The first thing the callback does is try to extract the values of the two INPUTs, but the values returned are empty strings (I have a breakpont here, and have even stepped through the jquery processing of the objects - they objects are correctly identified as the fields on the form, but value="" for both).
At this point I can still see the values in the form, and when the callback exits and the focus goes back to the form, the values are still in the INPUTS. I also tried .prop("value") rather than .val(), but the result was the same.
I just can't figure why I can't read the values - any help appreciated.
<form id="cp-loginform" action="/cypo/index.php" method="POST" >
<input type="hidden" name="Login" value="Login">
<input type="hidden" name="pp" value="0" />
<input type="text" id="cp-loginname" name = "loginname" placeholder = "Login ID" class="loginforminput cp-width-50" autofocus >
<input type="password" id="cp-password" name = "password" placeholder = "password" class="loginforminput cp-width-50"></p>
<input type="submit" id="cp-submit" name = "submit" onclick="ProcessLogin()" ></p>
</form>
function ProcessLogin() {
var loginval = $("#cp-loginname").val();
var passwordval = $("#cp-password").val();
console.log(loginval.concat(" ",passwordval));
}
PROBLEM RESOLVED:
I felt that this was a scope issue. The form itself was obviously OK (if submitted from the dialog it worked) - it was just the attempt to check the INPUT values using jquery that wasn't working.
I found that my select had to start with the dialog element and include a descendent path to my INPUTs. It's as if the dialog puts a wrapper around the elements inside so they are no longer visible as owned by the document.
If I login with xxx and zzz and step therough the following code I see this:
var loginval = $("#cploginname").val(); << = ""
var passwordval = $("#cppassword").val(); << = ""
var loginval = $("#cp-loginform #cploginname").val(); << = ""
var passwordval = $("#cp-loginform #cppassword").val(); << = ""
var loginval = $("#cpdialog #cp-loginform #cploginname").val(); << = "xxx"
var passwordval = $("#cpdialog #cp-loginform #cppassword").val(); << = "zzz"
console.log(loginval.concat(" ",passwordval));
I can't say I understand what's going on, but I have a solution so I am happy. Thanks to all who answered.
FINAL WORD
Thanks to #CMedina, I now understand. The form was defined in a hidden DIV at the top of my BODY section, and I passed $("#loginform") to a f() that created the dialog. The dialog was added to the DOM just before the . I had missed the fact that my original form was still in the DOM, so I was referencing that, not the dialog copy. When I included the dialog wrapper in the path, I finally 'found' the second copy.
Your button is the type submit (their natural behavior is to send the form). Remove the onclick in your button html.
<input type="submit" id="cp-submit" name = "submit">
You must add preventDefault to prevent submit the form and do what you want. Add the code JS for the button onclick event
$("#cp-submit").on("click", function(e){
e.preventDefault();
var loginval = $("#cp-loginname").val();
var passwordval = $("#cp-password").val();
console.log(loginval.concat(" ",passwordval));
});
Result: https://jsfiddle.net/cmedina/svjqb2a4/
Try it :
<html>
<head>
</head>
<body>
<form id="cp-loginform" action="/cypo/index.php" method="POST">
<input type="hidden" name="Login" value="Login">
<input type="hidden" name="pp" value="0" />
<input type="text" id="cp-loginname" name = "loginname" placeholder = "Login ID" class="loginforminput cp-width-50" autofocus >
<input type="password" id="cp-password" name = "password" placeholder = "password" class="loginforminput cp-width-50">
<input type="submit" id="cp-submit" name ="submit" onclick="ProcessLogin(event)">
</form>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script>
function ProcessLogin(e) {
e.preventDefault();
var loginval = $("#cp-loginname").val();
var passwordval = $("#cp-password").val();
alert(loginval.concat(" ",passwordval));
}
</script>
</body>
</html>
I have a form like this:
<form method="POST">
<input type="url" placeholder="Enter URL Address">
<input type="submit" value="go!">
</form>
And I want users to be redirected to a URL based on what they wrote in the URL input when they click the submit button.Is it possible?
Like this
window.onload=function() {
document.getElementById("form1").onsubmit=function() {
var url = this.url.value;
if (url) location=url;
return false;
}
}
using
<form id="form1">
<input type="url" placeholder="Enter URL Address">
<input type="submit" value="go!">
</form>
You can check out the window.location for this specific case. You can throw any string in there and the browser will redirect to that page.
EDIT:
You do not need a whole form for that. The form is used to send data to the server - the thing you want here is client-sided and does not require a form. You can use a simple input field with a simple button that fires a bit of javascript code.
Yes jane it is possible. You can do that by javascript or php.
example on javascript:
// Put an id on your form and change the id below accordingly
var idForm = 'form';
var form = $('#' + idForm);
form.submit(function(e) {
e.preventDefault();
var redirectTo = form.find('input').val();
switch(redirectTo) {
case "INPUT_VALUE_EXAMPLE":
window.location = 'YOUR URL HERE';
break;
case "google"
window.location = 'http://www.google.com'
break;
}
});
I am trying to capture the value of a submit button so I can submit the form based on this button being used. The form name incidentform and the button name is updateincidentButton. Below is the code.
$(function(){
$$("#incidentform").submit(function(e){
var =$("#updateincidentButton").val();
if(var==="Update incident"){
alert(var);
e.preventDefault();
}
})
})
Here is the basic html of the form
<form id="incidentform" action="/" method="get">
<input type="submit" class="button" id="updateincidentButton" name="updateincidentButton" value="Update Incident"/>
</form>
var is a reserved keyword in javascript. You can't use it as the name of a variable.
Change this:
var =$("#updateincidentButton").val();
to something like this:
var var1 = $("#updateincidentButton").val();
First off, you don't need two "$$".
Is the name "updateincidentButton" or the id? If it is currently the name, change it to the id:
<button id="incidentform">Click Me</button>
Same thing with the form. The hashtag that is passed into $ represents an id of an element.
First, you have to define your form somewhere...give it an ID:
<form id="aspnetForm">
....
<input type="button" id="updateincidentButton" value="Update incident"/>
</form>
Next, change your JavaScript:
$("#updateincidentButton").click(function(e){
if ($(this).val() == "Update incident"){
$("aspnetForm").submit();
}
e.preventDefault();
return false;
});
Make sure the type of the button is 'button'.
$(document).on('click', '#updateincidentButton', function () {
var value = $('#updateincidentButton').val();
if (value == 'Update incident') {
alert(value);
}
});
Then you won't even have to prevent default. Then submit form using AJAX. Posting to a URL dependent on the value of the button when clicked.
I have a very basic question (I'm sure) - I have an Zoho application and I'm using their REST API to recover a single result from a table.
I want to use that result in a javascript variable - the form request is here:
<form id="Latest" method="POST" action="https://creator.zoho.com/api/xml/my-company-culture/view/PageFeed_Report">
<input type="hidden" name ="authtoken" value="**********************">
<input type="hidden" name ="scope" id="scope" value="creatorapi">
<input type="submit" value="View Records">
</form>
I can auto submit the form using this
<script type="text/javascript">
document.getElementById("Latest").submit();
</script>
Which recovers a the result - but I want to assign this result to a javascript variable and use it in a following piece of code (within the same frame).
I am new to this, so please be gentle! Any help appreciated.
This is easily done with jQuery:
<form id="Latest">
<input type="hidden" name ="authtoken" value="**********************">
<input type="hidden" name ="scope" id="scope" value="creatorapi">
<input type="submit" value="View Records">
</form>
<div id="result"></div>
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script>
$('#Latest').submit(function(event) {
// Stop form from submitting normally
event.preventDefault();
var url = "https://creator.zoho.com/api/xml/my-company-culture/view/PageFeed_Report";
// Get some values from elements on the page:
var $form = $( this );
var authtokenData = $('#authtoken').attr('value');
var scopeData = $('#scope').attr('value');
// Send the data using post
var posting = $.post( url,
{
authtoken: authtokenData,
scope: scopeData
}
);
// Put the results in a div
posting.done(function( data ) {
// empty results div
$("#result").empty()
// write POST result to results div
$("#result").append("<p>" + data + "</p>);
});
});
</script>
I'm fairly new to javascript and have a question about how to get a value of an input field without submitting a form. I have the following small piece of code, which I'm using in combination with a realtime-validation script to validate the fields.
<form name="FormName" method="post" />
<input type="text" id="nameValidation" value="HelloWorld" />
<script type="text/javascript">
var NameValue = document.forms["FormName"]["nameValidation"].value;
</script>
</form>
I want the var NameValue to be the value of what you type into the input field so I can use it in the message which appears after the validation. When I change the value of the input field without submitting the form, the var NameValue is stil set to "HelloWorld". After doing some research I found out I could solve it using jQuery and it's function serialize(). Is there a way to do this without jQuery?
Without jQuery :
var value = document.getElementById('nameValidation').value;
The syntax you had would be usable to get an input by its name, not its id.
If what you want is to use this value when it changes, you can do that :
var nameValidationInput = document.getElementById('nameValidation');
function useValue() {
var NameValue = nameValidationInput.value;
// use it
alert(NameValue); // just to show the new value
}
nameValidationInput.onchange = useValue;
nameValidationInput.onblur = useValue;
Your code works. It assign value of your input field to var NameValue. What you explained and what JQuery serialize does are two different things.
Everything you need is to assign your code to right event:
<form name="FormName" method="post" />
<input type="text" id="nameValidation" value="HelloWorld" onchange="myFunction()"/>
</form>
<script type="text/javascript">
function myFunction(){
var NameValue = document.forms["FormName"]["nameValidation"].value;
alert(NameValue);
}
</script>
​see the JSFiddle.
use the onchange or onblur event to call this code:
var NameValue = document.forms["FormName"]["nameValidation"].value;
This way it will get activated when the cursor leaves the textbox
<input type="text" id="nameValidation" value="HelloWorld" onblur="changeVal();" />
<script type="text/javascript">
function changeVal() {
var NameValue = document.forms["FormName"]["nameValidation"].value;
alert(NameValue);
}
</script>
In your example, the variable only gets the value assigned to it at that moment in time. It does not update when the textbox updates. You need to trigger a function [onchange or onblur or keypress] and reset the variable to the new value.
<form name="FormName" method="post" />
<input type="text" id="nameValidation" value="HelloWorld" />
<script type="text/javascript">
var myTextbox = document.getElementById("nameValidation");
var nameValue = myTextbox.value;
myTextbox.onchange = function() {
nameValue = myTextbox.value;
};
</script>
</form>
You can let your client-side code respond to a change in the value of the textbox, like so:
$(document).ready(function(){
$("#nameValidation").on('change', function() {
var value = $("#nameValidation").value;
//do your work here
}
})